기본 문법 |변수와 상수 / 호이스팅

셀라문·2022년 2월 10일
0

JavaScript

목록 보기
4/27
post-thumbnail

변수(variable)와 상수

변수

  • 변경 가능한 값을 저장하기 위한 기억 공간
  • 사용하기 전 반드시 선언 필요
  • 중복 선언 불가능
  • 키워드 : let

상수

  • 변경 불가능한 값을 저장하기 위한 기억공간
  • 사용하기 전 반드시 선언 필요
  • 중복선언 불가능
  • 보통 대문자로 표기
  • 키워드 : const

// 선언
let lang2;

// 할당
lang2 = 'JS';

// 재할당
lang2 = 'JS';

// 선언과 동시에 할당 -> 추천
let lang3 = 'JavaScript';

// 재할당
lang3 = 'JS';


 
let count = 0; 을 활용할 때

// 복합 할당 연산자 (예측하기 어려움)
count += 1;

// 잘 읽히고 예상하기 쉬움
count = count + 1;

자바스크립트에서 변수 선언은 호이스팅으로 인해 선언 → 초기화 단계를 거쳐 수행된다.

선언 단계: 변수명을 등록하여 자바스크립트 엔진에 변수의 존재를 알린다.
초기화 단계: 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화한다.

var 키워드를 이용한 변수 선언은 선언 단계와 초기화 단계가 동시에 진행되어, 암묵적으로 undefined를 할당해 초기화한다.

호이스팅(Hosting)이란?

  • 함수가 실행되기 전에, 안에있는 변수들을 범위의 코드 최상단으로 끌어올리는 것
  • var의 변수/함수의 선언만 위로 올려주고, 할당은 올려지지 않음
  • let/const 변수 선언과 함수 표현식에서는 호이스팅 발생하지 않음

선언문이 있는 코드라인을 자바스크립트 엔진이 먼저 전체 코드를 스캔하면서 변수 같은 정보를 실행 컨텍스트 어딘가에 미리 기록해놓기 때문. 그 곳이 바로 레코드 이다.

const, var, let의 차이점

var
1. var 키워드를 이용한 변수 선언은 선언 단계와 초기화 단계가 동시에 진행되어, 변수에 암묵적으로 undefined를 할당해 초기화한다.
-> 호이스팅으로 인하여 선언문을 최상단으로 올려서 인식한다.

위를 실질적으로 인식하는 건 밑으로 생각하면 된다.

2. 변수 중복 선언 가능하여, 예기치 못한 값을 반환할 수 있다.

var a = 15;
console.log(a);   =>15출력
  1. 함수 레벨 스코프로 인해 함수만 지역변수로 호이스팅이 되고 나머지 변수는 모두 전역 변수로 된다.
for(var i =1; 1<5; i++){console.log(i)}
console.log(i)       //예제

예제에서 console.log(i)는 {}안에 있으므로 지역변수로 1234만 나타나야 맞지만, var를 썼으므로 전역 변수가 되어 12345가 나오게 된다.
4. 변수 선언문 이전에 변수를 참조하면 언제나 undefined를 반환한다.

  • 전역변수 : 블락 밖에서 선언을 한 어디서든 쓰일 수 있는 변수
  • 지역변수 : 블락{} 안에서 선언된 변수. 블락안에서만 쓸 수 있음

let
변수 중복 선언이 불가하지만, 재할당은 가능하다.

var a = 10;
console.log(a);    => 10
var a = 15;
console.log(a);   => error
a = 20;
console.log(a);    => 20

또한 블락에서 선언한 변수를 외부에서 쓰게 되면 에러가 뜬다.

const
상수.
변하고 싶지 않은 값들을 만들 때 쓰임
const도 let과 마찬가지로 재선언이 불가하며, 더 나아가 재할당도 불가하다.

TDZ란? (Temporal Dead zone)
변수선언 이전의 변수를 사용할수 없는 영역.
JS에서는 어디에 선언하더라도 최상위에 선언한 것과 같이 처리가 되는데, let과 const는 호이스팅이 되지 않아서 변수선언 이전의 해당 변수를 사용하려면 에러가 난다. +class

profile
취미로 하는 공부기록장

0개의 댓글