라벨이 let인 게시물 표시

[JavaScript] 호이스팅(Hoisting)

호이스팅(Hoisting)은 어디에 선언했나와 상관없이 항상 제일 위로 선언을 끌어 올리는 현상이다. 아래의 예시를 보면 function foo () { console . log ( a ); // undefined var a = 100 ; console . log ( a ); // 100 } foo (); 다른 프로그래밍 언어의 경우 위의 코드를 실행하면 a가 선언되지 않았는데 a를 호출했기 때문에 에러가 발생한다.  하지만 자바스크립트의 경우는 호이스팅을 통해 a의 선언을 함수 제일 위에서 자동으로 초기화 해주기 때문에 에러 없이 undefined가 출력된다.  위 코드는 아래와 동일한 역할을 하는 코드이다. function foo () { var a ; console . log ( a ); // undefined var a = 100 ; console . log ( a ); // 100 } foo (); 변수 이외에도 함수가 선언되기 이전에 함수를 호출하여도 에러가 발생하지 않으며 동작한다. foo (); function foo () { console . log ( a ); // undefined var a = 100 ; console . log ( a ); // 100 } 함수 작성 이전에 함수를 호출하였지만 JavaScript의 특이한 컨텍스트 실행 동작 방법으로인해 동작한다. 이러한 호이스팅은 유연함을 제공하지만 그만큼 오류도 많이 발생하게 되어 문제가 된다. 호이스팅은 혼란스러울 수 있기 때문에 함수를 호출하기 전에 최상단에 함수를 선언하는 습관을 들이는 것이 좋다. var를 사용하여 변수를 선언하거나 함수 선언문을 사용하였을때는 호이스팅이 발생하였는데  현재 es6로 넘어오면서 let, const 문법을 사용하거나 함수 표현식을 사용하게 되면서 호이스팅 현상이 발생하지 않게 되었다.??  사실 호이스팅이 발생한다. 그런데 var는...

[JavaScript] const, let, var 차이점 + 호이스팅(Hoisting)

첫번째 차이점 - 접근 범위 var는 function level scope 즉, 함수 단위 범위를 가진다. let 과 const는 block level scope 즉, 중괄호{ } 단위 범위를 가진다. function level scope란   선언된 함수의 { } 중괄호 안에서 작성된 변수와 함수는 함수 블록 내부에서만 참조가 가능하다. 선언된 함수 블록을 제외한 if 조건문, for 와 같은 반복문 등의 블록 내부에서 선언된 변수 또는 함수는 전역변수이면서 전역함수이다. function person () { var name1 = "lee" ; let name2 = "kim" ; } console . log ( name1 ); // ReferenceError: name1 is not defined => var는 함수 레벨 스코프 이므로 접근 불가 console . log ( name2 ); // ReferenceError: name2 is not defined => let은 블록레벨 스코프 이므로 접근 불가 { var fruit = "apple" ; console . log ( fruit ); // apple } console . log ( fruit ); // apple => 함수 레벨 스코프이므로 var로 선언한 변수는 전역변수가 된다. if ( true ) { var name1 = "lee" ; let name2 = "kim" ; } console . log ( name1 ); // lee => var는 함수 레벨 스코프이므로 참조가능(전역변수) console . log ( name2 ); // ReferenceError: name2 is not defined => let은 블록레벨 스코프 이므로 접근 불가 function level scope 는 함수의 코드 블록만을 스코프로 인정한다. 함수 외...