[Javascript] 기본 - 함수 선언문 vs 함수 표현식(+화살표함수)

1. 함수 선언문

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

 

2. 함수 표현식
이름이 없는 함수를 만들고 거기에 변수를 할당해줌

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

 

3. 차이

호출할 수 있는 타이밍

자바스크립트 : 인터프리터 언어(interpreted language) : 순차적으로 실행되고 즉시 결과를 반환함

js는 내부 알고리즘, 실행 전 코드 내 모두 함수선언을 먼저 실행함 > 호이스팅(hoisting)

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

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

 

4. 화살표 함수 (arrow function)

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

4-1. function 생략하고 => 기입

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

 

4-2. 코드구문이 한줄이고 return 구문이 있기에, { 를 (로 바꿀 수 있음

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

4-3. return 문이 한줄이라면 (도 생략가능

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

4-4. 인수가 1개이면, ( 생략 가능

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

4-5. 인수가 없는 함수는 { 생략 불가

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

 

4-6. return 문이 있어도, 그 이전에 여러줄이 있으면 ( 사용 불가 ( { 생략불가)

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

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