hoistiong

변수의 호이스팅 현상 - 변수의 선언을 변수 범위 맨위로 끌고 오는 현상.

function 함수() {

  var 변수 = 'kim';

  변수;

}

함수();

var 나이 = 30; //선언

// 호이스팅

var 나이; //선언

function 함수() {
	var 변수 = 'kim';
	변수;
}
함수();

나이 = 30;//할당

위와 같이 자바스크립트는 변수를 만나면 선언 부분을 강제로 맨위로 올려 해석한다. 이러한 현상을 호이스팅이라 한다.

예시 - 호이스팅으로 인해 첫번째 줄 콘솔로그에 undefined 으로 출력

//var 나이 선언부가 위로 올라옴.
console.log(나이); //undefined

var 나이 = 30;

console.log(나이); //30

함수선언도 호이스팅을 일어난다.

문제 - 다음 코드의 콘솔창 출력 결과는 무엇일까?

함수();
function 함수() {
  console.log(안녕);
  let 안녕 = 'Hello!';
}
//답: error; var 와 달리 let은 호이스팅이 되어도 빈줄이기 때문에 에러가 남. 

함수();
var 함수 = function() {
  console.log(안녕);
  var 안녕 = 'Hello!';
}

//답: error 함수()는 함수가 아니다.(정의가 되지 않았다.)

let a = 1;
var 함수 = function() {
  a = 2;
}
//함수();
console.log(a);

//답: 1 
// 2를 불러오고 함수(); 라고 불러야 한다.

let a = 1;
var b = 2;
window.a = 3;
window.b = 4;

console.log(a + b);

//답: 5

5. 콘솔창에 1초에 한번씩 1부터 5까지의 정수를 출력해주고 싶다.

setTimeout(function() { console.log(1); }, 1000 ); 
setTimeout(function() { console.log(2); }, 2000 ); 
setTimeout(function() { console.log(3); }, 3000 ); 
setTimeout(function() { console.log(4); }, 4000 ); 
setTimeout(function() { console.log(5); }, 5000 );

//보기싫어서 반복문 안에 담았다.
for (var i = 0; i < 5; i++) { 
  setTimeout(function() { console.log(i); }, i*1000 ); 
}

//그런데 5만 1초마다 출력 된다.
// 왜그런지 설명하고 해결 방법을 제시하라.

위 코드는 반복문이 다 실행되고 i 값은 전역변수형태로 남아있다.

var i = 5; <<이런식으로 

for (var i = 0; i < 5; i++) { 
  setTimeout(function() { console.log(i); }, i*1000 ); 
}

여기서 console.log(i);< 바로 실행되는 코드가 아니고 1~5초 후에 실행이 된다.
1~5초 후에 코드를 실행하려고 i를 찾는데 i는 전역변수로 남아있어 값은 5가 되어있다.

그래서 이미 5라는 값이 담아져 있기 때문에 콘솔차에 5만 출력이 됨.

1초마다 출력 되게 하려면? 1부터 5까지 출력 되게 하려면?

for (let i = 1; i < 6; i++) { 
  setTimeout(function() { console.log(i); }, i*1000 ); 
} //선언을 let 으로 바꾸어 주면 된다.
//1 부터 5까지 차례 대로 출력이 된다.