[Javascript 기초] 함수 표현식, 화살표 함수(arrow function) - 가온 코딩

함수 표현식, 화살표 함수(arrow function)

 

목차

1. 함수 선언문 vs 함수 표현식

2. 화살표 함수(arrow function)

 

 

 

1. 함수 선언문 vs 함수 표현식

 

아래 함수 선언문과 함수 표현식의 예를 보자

 

// 함수 선언문 예

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

 

 

이름이 없는 함수로 만들고 변수를 선언해서 함수를 할당했다.

// 함수 표현식 예

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

 

둘 다 실행, 동작 방식 모두 똑같다

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

 

자바스크립트는 인터프리터 언어(Interpreter languge): 순차적으로 실행되고 즉시 결과를 반환하는 프로그램 언어이다.

 

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

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

 

따라서

아래 코드는 값이 나올 수가 없다. console이 먼저 실행되고 num 변수가 생성되기 때문이다.

console.log(num);	// 오류

let num = 1;

그러면 아래 코드는 어떨까?

sayHello를 출력하는 순서가 위에 있음에도 정상적으로 출력된다.

sayHello();	// Hello

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

 

이 이유는 자바스크립트의 알고리즘 때문이다.

자바스크립트는 실행 전, 초기화 단계에서 코드의 모든 함수 선언 문을 찾아서 생성해준다. 즉, 함수를 더 넓은 범위에서 사용할 수 있게 해 주는데, 이를 호이스팅(hoisting)이라고 한다.(함수 코드 위치가 위로 올라간다는 뜻은 아니다)

 

하지만 함수 표현식은 위와 같이 할 수 없다. 순서대로 실행되기 때문이다.

(1) ...
(2) ...
(3) let sayHello = function(){	// 생성
     	console.log('Hello');
    }
(4) sayHello(); // Hello

 

그러면 함수 선언문과 함수 표현식 중 뭘 써야 될까?

대부분의 상황에서는 상관이 없다. 에러가 나면 위로 옮기면 그만이다.

하지만 그런 일이 싫다면 함수 선언문으로 사용하는 게 좋다. 더 자유롭고 편하게 코딩할 수 있을 것이다.

 

 

 

2. 화살표 함수(arrow function)

 

아래와 같이 일반적인 함수가 있다.

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

 

이제 이 함수를 화살표 함수로 바꿔보자

 

 

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

function이라는 단어가 없어지고, => 가 생겼다.

 

규칙

(1) 이 함수는 return대신 {}를 ()로 바꾸면서 더 간략화시킬 수 있다.

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

 

 

(2) 위 함수처럼 return문이 한줄인 경우, ()도 없어질 수 있다.

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

 

(3) 인수가 하나라면, ()를 생략할 수 있다.

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

 

(4) 만약 인수가 없는 함수라면 ()를 생략할 수 없다.

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

 

(5) return문이 있다고 해도, 이전에 여러 줄의 코드가 있으면 {}를 ()로 바꾸면서 return을 생략할 수는 없다.

아래의 두 경우와 같이 사용해야한다.

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

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

 

 

함수 표현식, 선언문, 함수 차이

 

// 함수 표현식

showError();	// 출력 X 오류

let showError = function(){
	console.log('error');
}

// 함수 선언문

showError();	// error

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

// 화살표 함수

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

 

예시 2)

 

화살표 함수 전

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

 

후

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

 

예시 3)

인수가 2개가 있고 return문이 있는 예제

 

화살표 함수 전

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;
};

 

return 생략하는 대신 {}를 ()로 바꾸기

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

 

return문이 한 줄이기 때문에 () 생략하기

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

 

 

참고자료

코딩앙마 - 자바스크립트 기초 강좌 : 100분 완성(https://youtu.be/KF6t61yuPCY)