[JS] JavaScript 공부 4일차

자바스크립트 공부하기 4일차

함수 선언, 함수 표현식, 화살표 함수

---

함수

함수는 ‘이름이 붙은 명령들의 모음’이라고 말할 수 있다.
공통으로 사용하는 유사 코드를 하나로 묶어 함수라는 이름으로 사용할 수 있다.

함수 선언

function 함수 이름(매개변수) {
    함수에서 실행할 명령
}

function이라는 키워드를 사용해서 함수를 만든다.
매개변수는 함수에 값을 전달하는 일종의 매개체이다. 함수에서 실행할 명령에 실행할 명령 내용을 입력한다.

함수의 예시

아래의 예시는 두개의 수를 매개변수로 받아서 더하여 출력하는 함수이다.

function add(num1, num2) {
    const result = num1 + num2;
    return result;
}

console.log(add(1, 2));

출력결과

3

add라는 함수는 두개의 매개 변수를 받아서 더한 값을 결과값으로 반환한다.
따라서 add(1, 2) 는 1과 2를 더한 3을 결과로 갖게 된다.

함수 표현식

함수 선언 말고도 함수를 만들 수 있는 다른 방법은 ‘함수 표현식’이다.
함수 표현식이란 함수를 생성하고 변수에 값으로 저장하는 방법이다.

let add = function(num1, num2) {
    const result = num1 + num2;
    return result;
}

console.log(add(1, 2));

자바스크립트에서 함수는 숫자나 문자열처럼 값으로 취급되므로 변수에 함수를 저장할 수 있다.
함수를 변수의 값으로 저장해 생성하는 방법을 함수 표현식이라고 한다.
함수 표현식으로 만든 함수는 호이스팅이 되지 않으므로, 함수 선언 이후에 호출해야 오류가 발생하지 않는다.
Tip. 호이스팅: 변수 선언과 함수 선언을 코드 맨 위로 끌어올리는 현상

화살표 함수

화살표 함수는 함수 표현식의 대체 방법으로, 함수 선언을 더 간결하게 할 수 있게 해준다.
function 키워드 대신 => 구문을 사용하여 함수를 정의한다.
위에서 예시로 작성한 함수 표현식 함수를 화살표 함수로 바꾸면 아래와 같다.

const add = (num1, num2) => {
    const result = num1 + num2;
    return result;
}

위의 코드에서 result 변수를 제거하여
실행할 코드가 한줄이 되면 중괄호 생략이 가능하다.
=> 안에 반환한 값을 입력하면 된다.

const add = (num1, num2) => num1 + num2;

함수 표현식과 마찬가지로 호이스팅이 되지 않는다.

4일차 공부 끝