JavaScript - 함수 선언 방법과 호이스팅

1부터 10까지 더하는 코드와 1부터 20까지 더하는 코드가 있다.
두 코드의 로직은 똑같다.

//1부터 10까지 합
let sum1 = 0;
for(i=1; i<=10; i++){
	sum1 += i;
}
console.log(sum1);

//1부터 20까지 합
let sum2 = 0;
for(i=1; i<=20; i++){
	sum2 += i;
}
console.log(sum2);

이런 경우 우리는 공통되는 코드를 독립적인 코드 블록의 함수로 정의하여 호출하여 사용할 수 있다.

//1부터 10까지 합
console.log(SUM(10));

//1부터 20까지 합
console.log(SUM(20));

function SUM(endNum){
  let sum = 0;
  for(i=1; i<=endNum; i++){
	sum += i;
  }
  return sum;
}

* 함수 선언 방법

함수를 선언하는 방법을 알아보자

1. 기본형(기명함수) : 함수 선언식, 호이스팅 지원

function 함수명(){
	소스코드;
}

2. 익명함수 : 함수 표현식, 호이스팅 불가

let 변수명 = function(){
	소스코드;
}

3. ES6 화살표 함수(익명함수의 일종) : 함수 표현식, 호이스팅 불가

let 변수명 = () => {
	소스코드;
}

* 호이스팅이란?

코드가 실행하기 전 변수선언/함수선언이 해당 스코프의 최상단으로 끌어 올려진 것 같은 현상

위 예시 코드에선 에러가 발생하지 않았지만 아래와 같이 익명함수로 함수를 만들었다면 에러가 발생한다.

//1부터 10까지 합
console.log(SUM(10)); //ERROR

let SUM = function(endNum){
  let sum = 0;
  for(i=1; i<=endNum; i++){
	sum += i;
  }
  return sum;
}

익명함수는 먼저 선언하고 호출해야한다.

let SUM = function(endNum){
  let sum = 0;
  for(i=1; i<=endNum; i++){
	sum += i;
  }
  return sum;
}

//1부터 10까지 합
console.log(SUM(10)); //정상작동