영역별/JavaScript

Js:변수 및 호이스팅

brandNuWs 2022. 5. 4. 11:05

(1)호이스팅

=> 함수가 실행되기 전 함수 안에 필요 변수값들을 모두 모아 유효범위 최상단에 선언

-> 자바스크립트 parser가 함수 실행 전 함수를 한번 훑음

-> 함수안에 존재하는 변수 / 함수선언에 대한 정보를 기억하고 실행시킴

-> 유효범위 : 함수 블록 {} 

*실제로 코드가 변화되는건 아니고 parser 내부적으로 끌어올려서 처리

-> 메모리상 변화는 없음

* var 변수 선언과 함수선언문에 대해서만 호이스팅이 일어남

let/const 변수 선언과 함수표현식에서는 호이스팅이 일어나지 않음

 

EX) 함수선언문 / 함수표현식 

 

-함수선언문-

function abc() {

   console.log("hellomello");

}

 

-함수표현식-

var abc = function() {

   console.log("hellomello");

}

 

-순서-

변수선언 > 함수선언 

--> 유효범위 내 호출이 선언보다 위에 존재할 경우 에러 호출

 

(2)변수

 

-var 변수

선언과 초기화 단계가 동시에 진행

EX) var example

console.log(example)

==> undefined --> undefined을 할당하여 초기화진행

-재할당 가능

-중복 선언가능 ==> 이로 인해 호출 위치에 따라 다른결과 호출

 

-let 변수

-변수 중복 선언 불가

-재할당 가능

 

-const 변수

-반드시 선언과 초기화 동시에 진행

EX) const example = 'ex';

-원시값의 재선언, 재할당 불가

-객체의 재할당 가능

EX) 변수선언은 위 예시에서 먼저 진행

const example = {

   first : 'var'

}

example.first = 'let'

console.log(example)

===> { first: "let" }

'영역별 > JavaScript' 카테고리의 다른 글

Ts:세번째 변수  (0) 2022.05.12
Ts:두번째 변수  (0) 2022.05.12
Ts:변수의 지정 및 재사용  (0) 2022.05.12
가벼운 Js VS Ts  (0) 2022.05.03
React Hook 관련  (0) 2022.02.12