[JavaScript] 함수 정리(2)

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

---

 

1) 함수 선언식

함수를 선언과 동시에 정의한다.

function sayHello() {
  alert('Hello');
}

 

2) 함수 표현식

변수를 선언하고 변수에 함수를 할당한다. 이후 변수를 호출하면 함수가 실행된다.

let sayHello = function() {
  alert('Hello');
}l

 

 

1) 함수 선언식

함수 선언식은 스크립트의 위치와 상관 없이 어디서든 사용할 수 있다.

let region = 'Busan';

if (region == 'Busan') {
  welcome(); // 1번 실행     -> 고향이 같네요.

  function welcome() {     
    alert('고향이 같네요.');
  }

  welcome(); // 2번 실행     -> 고향이 같네요.
    
} else {
  function welcome() {
    alert('반갑습니다.');
  }
}

welcome(); // 3번 실행       -> Error: welcome is not defined

 

 

2) 함수 표현식

함수 표현식은 스크립트가 해당 함수에 도달했을 때 사용할 수 있다.

let region = prompt('어디 출신인가요?', 'Seoul');

let welcome;

if (region == 'Busan') {

	welcome = function() {
		alert("고향이 같네요.");
	};

} else {

	welcome = function() {
		alert("반갑습니다.");
	};

}

welcome();

 

3) 화살표 함수

화살표 함수는 함수 표현식의 function 표현보다 더 간결하게 만들 수 있다.

화살표 함수는 익명 함수로만 사용할 수 있다.

let func = (arg1, arg2, ...argN) => expression

 

함수 표현식으로 나타내면 아래와 같다.

let func = function(arg1, arg2, ...argN) {
    return expression;
};

 

인수가 하나이거나 없을 경우는 조금 다르다.

// 인수가 하나일 경우, 괄호를 생략할 수 있다.
let sum = n => n + n;

alert( sum(3) ); // 6


// 인수가 없을 경우, 빈 괄호를 넣어야 한다.
let sayHello = () => alert('안녕하세요.');

sayHello();

 

let region = prompt('어디 출신인가요?', 'Seoul');

let welcome;

if (region == 'Busan') {

	welcome = () => alert("고향이 같네요.");

} else {

	welcome = () => alert("반갑습니다.");

}

welcome();

 

함수 선언식은 함수가 선언되기 전에도 활용할 수 있기 때문에, 함수 선언식을 따르는 것이 좋다.

함수 선언식은 코드를 유연하게 구성할 수 있고 가독성도 뛰어나다.

함수 표현식은 함수 선언식을 사용하는게 부적절할 때에 사용하는 것이 좋다.