코딩앙마 자바스크립트 기초 강의 11. 함수 표현식, 화살표 함수

함수 선언문

function sayHello(){

    console.log('Hello');

}

 

sayHello();

 

 

함수 표현식

let sayHello = function(){

    console.log('Hello');

}

 

sayHello();

 

위 두 코드는 같은 뜻이다.

차이점은 호출할 수 있는 타이밍

 

자바스크립트는 위에서 한줄씩 읽어가면서 실행함

> 인터프리터 언어 : 순서대로 읽으면서 즉시 결과를 반환하는 언어

 

 

 

함수 선언문 : 어디서든 호출 가능

 

 

sayHello();

 

function sayHello(){

    console.log('Hello');

}

이렇게 실행해도 동작함

 

자바스크립트 내부 알고리즘 때문

자바스크립트는 실행 전 코드의 모든 함수 선언문을 읽어서 생성해둠

그래서 함수 사용 범위는 더 넓어짐(위로 올라감) > 호이스팅(Hoisting)

코드 위치가 실제로 올라간다는 말은 아님

 

함수 표현식 : 코드에 도달하면 생성

let sayHello = function(){ 생성 후 사용가능

    console.log('Hello');

}

 

sayHello();

그래서 함수 표현식은 반대로 적으면 실행하지 않음

 

tip)

에러가 발생하면 코드를 위로 옮기면 되지만 신경쓰는게 싫은 사람들은 함수 선언문 사용 추천

 

 

 

 

화살표 함수(arrow function)

 

let add = function(num1, num2){

    return num1 + num2;

}

 

화살표 함수를 사용하면 이 함수를 더욱 간결하게 적을 수 있다

let add =         (num1, num2) => {

    return num1 + num2;

}

 

return문이 있기 때문에

let add =         (num1, num2) => (

         num1 + num2;

)

중괄호를 사용하지 않고 이렇게 return을 지우고 소괄호로 바꿀 수 있음

 

return문이 한 줄 이라면 괄호도 생략 가능

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

 

 

인수가 하나라면 괄호 생략 가능

let sayHello = (name) =>` Hello, ${name}`;

let sayHello = name =>` Hello, ${name}`;

 

인수가 없는 함수는 괄호 생략 불가능

 

return문 외에 코드가 있다면 괄호를 생략할 수 없음

 

tip)

화살표 함수는 JS6이후 매우 활발이 사용 중이므로 필수적으로 알아야 함