11장 호이스팅, 클로저

채팅

설문조사

코딩창

 

호이스팅 이란?

변수와 상수 함수등의 선언을 하고 나서 코드를 실행 시키면 선언된 모든 내용은 가장 위로 끌어 올린다 라는 의미이다.

1. 전역 범위(global scope)
   • 전역 범위에서는 해당 페이지에서 최상단으로 끌어 올려진다.
2. 함수 범위(function scope)
   • 함수 범위에서는 해당 함수의 최상단으로 끌어 올려진다.

그러나 변수의 선언만 끌어 올립니다 할당은 끌어올려지지 않습니다

 

변수 호이스팅

let은 호이스팅이 일어나긴 하지만 호이스팅은 선언만 할 뿐 실제로 값을 할당하지는 않기 때문에 오류가 나게 됩니다

console.log(num); //error
let num = 10;

함수 호이스팅

함수 선언부를 호출부 아래에 뒀지만 실행하는데 오류가 없습니다. 

add();
function add() {
  console.log(10 + 1);
}

 

위의 코드를 호이스팅 한 결과입니다

이렇듯 함수를 선언식으로 선언하면 자동으로 호이스팅이 됩니다

function add() {
  console.log(10 + 1);
}
add();

하지만 함수 표현식은 호이스팅 되지 않습니다 

add();
const add = () => {
  console.log(10 + 1);
};

호이스팅 문제가 중요한 이유

호이스팅은 자바스크립트가 스크립트 방식으로 코드를 실행하기 때문에 미리서 선언되어있는 변수와 함수를 메모리에 올려놓는 작업을 합니다 그 작업을 하는데 호이스팅 할 것이 많으면 그만큼 자바스크립트의 실행이 늦어져 속도가 저하되게 됩니다. 그래서 호이스팅을 되도록 하지 않도록 선언식들은 최대한 파일의 맨 위에다 작성해야합니다

 

클로저란?

스코프에 따라서 내부함수의 범위에서는 외부 함수 범위에 있는 변수에 접근이 가능하지만 그 반대는 불가능하다는 의미이다. (매개변수로 넘겨주지 않아도 된다는 의미)

예를 들어보자

print함수의 스코프 안에는 변수 name과 displayName함수가 있다 즉 변수name은 displayName함수안에서 사용이 가능하지만 반대로 displayName 함수안의 functionName은 print함수로 꺼내와 사용할 수 없다

function print() {
  let name = "myname";
  function displayName() {
  	let functionName = 'hello'
    console.log(name);
  }
  return displayName();
}

print();

 

 

 

자바스크립트 포스팅을 마치며...

당신은 자바스크립트 마스터가 되셨습니다. react와 nodejs 에 도전해보세요