자바스크립트 호이스팅 그리고..

개떡같다. 

호이스팅 

호이스트  사전적의미  :  끌어 올리다.

자바스크립트에서 변수 선언과 함수 선언을 끌어 올린다. 

호이스팅이 없다면 아래의 코드는 에러가 발생하겠지만 

console.log(a())

console.log(b())

console.log(c())

function a() {

return 'a'

}

var b = function bb() {

return 'b'

}

var c = function() {

return 'c'

}

앞서 설명했듯이 호이스팅이 끌어 올리는 역할을 하기 때문에 실제 자바스크립트가 실행 될 때는 아래와 같이 변환된다고 생각하면 됨

function a() {

return 'a'

}

var b;

var c;

console.log(a())

console.log(b())

console.log(c())

b = function bb() {

return 'b'

}

c = function() {

return 'c'

}

함수 선언은 통째로 올라가버린 반면에 함수 표현식은 선언만 올라 갔다. 이유는 할당은 해당사항이 아니기 때문이다.

함수 선언은 그 자체가 하나의 선언이지만 표현식은 var b = 함수는 분리가 가능하기 때문에 b와 c는 선언만 올라갔다.

그렇다면 함수 표현식과 함수 선언식이란?? 차이점은??

함수선언식

function a() {

return a;

}

기명함수표현식

var b = function bb() {

return 'bb'

}

(익명) 함수표현식  : 이름 생략이 가능함 

var c = function(){

return 'c'

}

이전에는 기명함수 표현식이 이점이 있었음 왜냐 에러 발생 시 함수의 이름을 노출해줬기 때문 그러나 요즘에는

함수명이 비어져 있을 경우 자동으로 변수명을 네임프로퍼티에 할당하기 때문에 이제는 익명 함수표현식이 선호되고 있음

익명 함수표현식이 선언되는 과정

var c = function(){

return 'c'

}

1. 변수 c 선언
2. 익명 함수 선언 
3. 함수를 변수c에 할당

할당이 키포인트다. 

할당을 하면 함수 표현식이고 

할당을 하지 않으면 함수 선언식이다.

할당을 하지 않으면 함수 전체가 호이스팅 되고

할당을 하면 변수만 호이스팅 됨

그럼 호이스팅이 왜 중요할까 설명은 개떡처럼 못하면 서 왜 계속 설명할까..

 

협업 시 소스가 길어질 때 2명의 개발자가 같은 함수를 만들었을 때를 가정해 보자. 

그럼  두개의 함수가 모두 호이스팅 되어 끌어올려질 것이고 나중에 선언된 함수가 기존의 함수를 덮어 버릴 것이다 그럼 결과가 

개떡처럼 나오겠지. 또한 가독성면에서 좋지 않기 때문에 욕먹기 딱 좋다. 

function sum(a,b){

return a+b;

}

sum(1,2)

/* 중략 ..1만라인.. */

function sum(a,b){

return 'a'+'+'+'b'+'='+(a+b)

}

sum(1,2)

그래서 함수 선언식보다는 무조건 함수 표현식을 쓰길 권장함

안전하고 예측가능한 소스가 되기 때문에 

var sum = function sum(a,b){

return a+b;

}

sum(1,2)

/* 중략 ..1만라인.. */

var sum = function sum(a,b){

return 'a'+'+'+'b'+'='+(a+b)

}

sum(1,2)

함수스코프와 실행컨텍스트

스코프 (SCOPE )  : 유효범위 (변수)

실행컨텍스트 (EXCUTION CONTEXT)  : 실행되는 코드 덩어리( 추상적 개념)

둘의 가장큰 차이는 발생 시점에 있음

스코프는 함수가 정의 될 때 결정된다.

실행 컨텍스트는 함수가 실행 될 때 생성된다.

실행 컨텍스트에는 

호이스팅, this 바인딩 등의 정보가 담김

즉 함수실행에 필요한 정보를 불러 담은 정보 집합체 라고 생각하면될 것 같다.

var a = 1;

function outer(){

console.log(a);

function inner(){

console.log(a)

var a = 3;

}

inner();

console.log(a);

}

outer();

console.log(a);

실행순서를 생각해 보자 

실행 값을 예측해보자.

왜 2번에서 undefined 가 출력됐을까? 실행 순서를 보고 알아보자.