함수란?

함수를 호출하기 이전에 인수를 전달받을 매개변수와 실행할 문들, 반환할 값을 지정하는 것입니다.
정의된 함수는 자바스크립트 엔진에 의해 평가되어 함수 객체가 됩니다.

자바스크립트의 함수는 일급 객체입니다.

함수 선언문

function add(x,y){
  	return x + y 
}

시작이 function이며 함수의 이름을 생략할 수 없습니다.
또한 함수 선언문은 표현식이 아니라 문이기 때문에 실행 시 undefined가 출력됩니다.

호출시

함수 이름을 호출하면 됩니다.

function add(x,y){
  	return x + y 
}

console.log(add(2,3)) // 5

함수 표현식

var add = function (x,y) {
  	return x + y
}

함수 표현식은 별도의 변수에 할당하며 위의 함수선언문과 다르게 이름을 생략하는 것이 일반적입니다.
즉, 함수를 다른 변수에 값으로써 '할당'한 것이 곧 함수 표현식입니다.

호출시

함수 이름이 아니라 함수 객체를가리키는 식별자를 사용해야합니다.
함수 이름은 함수 몸체 내부에서만 유효한 식별자입니다

var add = function hi (x,y) {
  	return x + y
}

console.log(add(1,3)) // 7

console.log(hi(1,3)) // referenceError: hi is not defined

함수 생성 시점과 함수 호이스팅

호이스팅이란?

함수 안에 있는 선언들을 해당 함수 유효 범위의 최상단으로 선언하는 것입니다.

자바스크립트는 실행되기 전에 함수 안에 사용해야하는 값들을 유효범위의 최상단에 선언합니다.

자바스크립트에서 변수와 함수의 '선언' 을 끌어올리는 것입니다.

그렇기 때문에 끌어 올려진 것처럼 보이지만 실제로는 그렇지 않으며 내부적으로 끌어올려서 처리하는 것입니다.

이유?

자바스크립트의 변수 생성(Instantiation)과 초기화(Initialization)의 작업이 분리돼서 진행되기 때문입니다.

호이스팅 비교

❗️함수 선언문은 호이스팅에 영향을 받지만 함수 표현식은 호이스팅에 영향을 받지 않습니다.

호이스팅은 함수 선언문과 함수 표현식에서 각각 다르게 동작하기 때문에 주의해야합니다.

함수 선언문

함수 선언문보다 더 위에서 호출했음에도 불구하고 출력이 되는 모습입니다.

위와같이 함수 선언문형태로 정의한 함수의 유효 범위는 코드의 맨 처음부터 시작하며 이것을 함수 호이스팅이라고 합니다.

이렇게 선언 전에 사용할 수 있습니다. 다만 이 부분은 작성자가 원하지 않는 방향으로 흘러갈 수 있어서 일반적으로 함수 표현식을 권장합니다.

함수 표현식

표현식보다 상단에 위치한 부분에서 TypeError가 발생하게 됩니다.

위는 함수 표현식으로 정의가 되어 있기 때문에 호이스팅이 일어나지 않습니다.

let/const

var 키워드 변수는 변수 선언전에 선언 단계와 초기화 단계를 동시에 진행합니다

javascript는 실행 컨텍스트 변수 객체의 변수를 등록하고 메모리를 undefined로 만들어 버립니다.

그렇기 때문에 변수를 선언하기 전에 호출을 해도 undefined로 호출이 되는 호이스팅이 발생합니다.

let으로 선언된 변수는 var 키워드와는 다르게 선언단계와 초기화 단계가 분리되어서 진행됩니다.

그렇기 때문에 실행 컨텍스트에 변수를 등록했지만, 메모리가 할당이 되질 않아 접근할 수 없어 참조 에러(ReferenceError)가 발생합니다.

결론

호이스팅이 적어야 유지보수 및 가독성에 좋습니다.

💡 호이스팅을 최소화 하려면?


1. 함수 표현식으로 작성하기

2. 가급적이면 코드 상단부에 선언하기

3. let /const 사용하기

4. var 지양하기