var let const 차이점

Ryeokyeong Hong·2022년 5월 12일
0

Javascript

목록 보기
13/15

변수 선언 방식

var

	var name = 'rk';
	console.log(name);			//결과값: rk

	var name = 'hong';
	console.log(name);			//결과값: hong
  • 같은 변수를 선언해도 다른 값이 출력됨
  • 유연한 방식의 변수 선언이나 코드량이 많아지면 파악이 힘들고 값이 변경될 우려가 있음

let

	let name = 'rk';
	console.log(name);			//결과값: rk

	let name = 'hong';
	console.log(name);			//결과값: Uncaught SyntaxError: Identifier 'name' has already been declared

	name = 'rkhong';
	console.log(name);			//결과값: rkhong
  • 이미 선언된 변수라는 에러가 뜸
  • 재선언이 불가능하나 변수에 다른 값을 넣는 재할당은 가능

const

	const name = 'rk';
	console.log(name);			//결과값: rk

	const name = 'hong';
	console.log(name);			//결과값:  Uncaught SyntaxError: Identifier 'name' has already been declared

	name = 'rkhong';
	console.log(name);			//결과값: Uncaught TypeError: Assignment to constant variable.
  • 이미 선언된 변수라는 에러가 뜸 + name 값에 재할당 불가능이라는 에러가 뜸
  • 선언된 변수에 재선언, 재할당 모두 불가

호이스팅

  • var, let, const 선언문이나 function 선언문 등을 해당 스코프의 선두로 옮긴 것처럼 동작하는 특성
  • 자바스크립트는 모든 선언을 호이스팅 함

var

	// 스코프의 선두에서 선언 단계와 초기화 단계가 실행됨
	// 따라서 변수 선언문 이전에 변수를 참조할 수 있음

	console.log(name);			//결과값: undefined

	var name;
	console.log(name);			//결과값: undefined
	
    // 할당문에서 할당 단계가 실행됨
	name = 'rk'; 
	console.log(name);			//결과값: rk
  • 선언 단계와 초기화 단계가 한번에 이루어짐

let

	// 스코프의 선두에서 선언 단계가 실행됨
	// 아직 변수가 초기화(메모리 공간 확보와 undefined로 초기화)되지 않았음
	// 따라서 변수 선언문 이전에 변수를 참조할 수 없음

	console.log(name);			//결과값: ReferenceError: foo is not defined

	// 변수 선언문에서 초기화 단계가 실행ehla
	let name;
	console.log(name);			//결과값: undefined
	
    // 할당문에서 할당 단계가 실행됨
	name = 'rk'; 
	console.log(name);			//결과값: rk
  • 선언 단계와 초기화 단계가 분리되어 진행됨 (스코프의 시작에서 변수의 선언까지 일시적 사각지대(Temporal Dead Zone;TDZ)에 빠지기 때문)

.
.
.
.

참고
https://velog.io/@bathingape/JavaScript-var-let-const-%EC%B0%A8%EC%9D%B4%EC%A0%90
https://210one2.tistory.com/368
https://hanamon.kr/javascript-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85%EC%9D%B4%EB%9E%80-hoisting/

0개의 댓글