[새싹 프론트엔드] var, let, const의 차이

변수

변수는 데이터를 저장하는 공간의 이름으로, 선언하는 방식에는 총 3가지의 키워드가 있다.
var, let, const 이 3가지 선언 키워드의 차이점을 알아보자.

1. var

JS 초기에 사용했던 변수 선언 방식

• 변수 선언 전에 사용 가능
• 변수 선언 시 초기값 설정하지 않아도 사용 가능
• 변수 값 재할당 가능
• 변수 중복 선언 가능

문제점
변수 중복 선언이 가능하기 때문에
변수명을 남용하거나 예기치 못한 값이 반환될 수 있다

2. let

var의 문제점을 개선하여 ES6 버전 이후에 생긴 변수 선언타입
var처럼 재할당이 가능하다

• 변수 선언 전에 사용 불가능
• 변수 선언 시 초기값 설정하지 않아도 사용 가능
• 변수 값 재할당 가능
• 변수 중복 선언 불가능
  
  
  
  
  
  

3. const

var의 문제점을 개선하여 ES6 버전 이후에 생긴 변수 선언타입
상수 선언으로 고정된 값을 의미한다
주민등록번호 같이 바뀌지 않는 값에 사용한다

• 변수 선언 전에 사용 불가능
• 변수 선언 시 초기값 설정하지 않으면 사용 불가능
• 변수 값 재할당 불가능
• 변수 중복 선언 불가능
  
  
  
  
  
  

변수 호이스팅

호이스팅이란?

실행 단계에서 아래에 있는 코드를 해당 스코프의 맨 위로 옮기는 것
자바스크립트는 코드를 실행하기 전에 var 선언문과 function 선언문을 해당 스코프의 맨위로 옮긴다

• 호이스팅 O : var
  값을 먼저 할당 → 변수를 나중에 선언 → 사용가능

• 호이스팅 X : let, const
  변수를 먼저 선언 → 값을 나중에 할당 → 사용가능

변수 스코프

스코프란?
   Scope를 우리말로 번역하면 ‘범위'
   즉, 스코프(Scope)란 ‘변수에 접근할 수 있는 범위’를 뜻한다

전역 스코프(Global Scope)
   말 그대로 전역에 선언되어있어 어느 곳에서든지 해당 변수에 접근할 수 있다는 의미

지역 스코프(Local Scope)
   해당 지역에서만 접근할 수 있어 지역을 벗어난 곳에선 접근할 수 없다는 의미

var

1) if문 내에서 선언한 변수는 if문 밖에서도 접근 가능

if(true){
	var age = 5;
    }
    
console.log(age);

>>> 5

2) 함수내에서 선언한 변수는 해당 함수 내에서만 접근 가능

function person(){
	var age = 5;
}

console.log(age);

>>> Uncaught ReferenceError: age is not defined

let, const

if문 내에서 선언한 변수는 if문 안에서만 접근 가능

if(true){
	let age = 5;
}

console.log(age);

>>> Uncaught ReferenceError: age is not defined

+) var, let, const 한눈에 비교하기

---

새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 3주차 블로그 포스팅