코딩앙마 TIL [자바스크립트 기초 강좌 #11 - 함수 표현식, 화살표 함수(arrow function)]

함수 선언문 vs 함수 표현식

함수 선언문 : 지난 시간에 만들어본 방식
function sayHello(){
console.log('Hello');
}

sayHello();

함수 표현식 : 이름이 없는 변수를 만들고 변수를 선언해서 함수를 할당해줌.

let sayHello = function(){
console.log('Hello');
}

sayHello();

실행하는 방식도, 동작하는 방식도 동일.
하지만 호출할 수 있는 타이밍에 차이가 있음.

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

sayHello();

function sayHello(){
console.log('Hello');
}

이렇게 만들어도 호출 가능.
인터프리터 언어(interpreted language, 위에서부터 아래로 순차적으로 실행되고 즉시 결과로 반환하는 언어)인데 어떻게 이 코드가 실행될까?

인터프리터 언어의 예를 들어,
console.log(num);
let num = 1;
-> 에러 뜸. 위에서 num이라는 변수를 아직 만나지 못했기 때문.

그렇다면 위의 함수 선언문은 어떻게 실행되었을까?
자바스크립트 내부 알고리즘 때문.
자바스크립트는 실행 전 초기화 단계에서 코드의 모든 함수 선언문을 찾아 생성해 둠.
함수 사용 가능 범위가 코드 위치보다 위로 올라감. 이를 호이스팅(hoisting)이라고 함.

반면 함수 표현식은 저렇게 동작하지 않음.
자바스크립트가 한줄 씩 읽으면서 실행.
해당 코드에 도달해서야 비로소 생성됨.

따라서 더 자유롭게 코딩하고 싶으면 그냥 함수 선언문 쓰는게 나음.

🎀화살표 함수(arrow function) : 지금까지 배운 함수들을 보다 간결하게 작성할 수 있음.

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

이것을 화살표함수로 바꿔보자.

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

또한 이 예제는 코드 본문이 한 줄이고 return문이 있으므로 return 생략하고 중괄호가 아닌 일반괄호로 바꿀 수 있음.

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

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

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

인수가 하나일 때도 괄호 생략 가능.

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

인수가 없는 함수라면? 괄호 생략 불가능.

let showError = () => {
alert('error!');
}

또한 return 전에 여러 줄의 코드가 있을 경우 일반 괄호 사용 불가능.
let add = function(num1, num2){
const result = num1 + num2;
return result;
}

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

함수 표현식 vs 함수 선언문 예시

함수 표현식
showError();

let showError = function(){
console.log('error');
}
-> 에러 뜸. 함수 표현식(함수를 선언하고 변수에 할당)인데 사용 전에 선언부터 하지 않았기 때문.

함수 선언문
showError();

function showError() {
console.log('error');
}
-> "error"

이를 화살표 함수로 나타내려면

let showError = () => {
console.log("error");
}
-> "error"

또 다른 예제

const sayHello = function (name) {
const msg = Hello, ${name};
console.log(msg);
};

이것을 화살표함수로 바꿔보자.

const sayHello = (name) => {
const msg = Hello, ${name};
console.log(msg);
};

또 다른 예제

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

화살표 함수로 바꿔보자.
const add = (num1, num2) => {
const result = num1 + num2;
return result;
}

return문을 한줄로 바꿔보면

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

더 간결하게 줄이면

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