코어자바스크립트 2장 part1 (호이스팅)

실행컨텍스트

실행할 코드에 제공할 환경 정보들을 모아놓은 객체

구성요소
1. 전역공간
2. eval()함수
3. 함수 (흔히 함수를 실행)

호이스팅

var a = 1;
function outer(){
  function inner(){
    console.log(a);
    var a = 3;
  }
  inner();
  console.log(a);
}
outer();
console.log(a);

처음 이 내용을 보며 inner함수의 console.log결과가 왜 undefined인지 이해를 못했다. 분명 전역변수의 a가 가진 1의 값을 영향을 받아 1을 출력했다 생각했다.
혹시나 함수의 내부 함수에는 영향을 안끼치나 고민해서 코드를 수정하면서 알게 되었다.

실제 적용 결과

var a = 1;
function outer(){
  function inner(){
    var a;
    console.log(a);
    a = 3;
  }
  inner();
  console.log(a);
}
outer();
console.log(a);

var는 호이스팅이 작동하고 이는 inner 함수 내에서도 마찬가지이다. 이를 진행하면 위와 같은 결과로 즉, a를 다시 선언하므로 a에는 아무것도 없는 undefined 형태가 나타난다.

함수 선언문 vs 함수 표현식

함수 선언문 : 별도의 할당 명령이 없는 것 (호이스팅 발생)
함수 표현식 : 별도의 변수에 할당하는 것 (호이스팅 발생 X)

함수 선언문의 위험성

console.log(sum(3,4));
function sum(x,y){
return x+y;
}

var a = sum(1,2);

function sum(x,y){
return x+ ' +' +y + '=' + (x+y);
}

var c = sum(1,2);
console.log(c);

원래 의도는 처음 console.log는 첫번째 sum함수를 두번째 console.log는 두번째 sum함수를 적용시키려고 하나 실제는 둘다 두번째 sum함수에 적용된다.

이는 함수선언문 자체가 전부 호이스팅이 되어서 영향을 미치기 때문이다.

함수 표현식으로 위험 줄이기

console.log(sum(3,4));	//Uncaught TypeError: sum is not a function
var sum = function(x,y){ 
return x+y;
}

var a = sum(1,2);

var sum = function(x,y){
return x+ ' + ' +y + '=' + (x+y);
}

var c = sum(1,2);
console.log(c);

오류를 출력하여 위험을 줄일 수 있다.

정리

협업에서 문제가 되는 호이스팅을 발생시키는 함수선언식 var는 사용하지 않는 것을 권장

출처

코어자바스크립트