#1. 변수, 호이스팅, TDZ

Seulyi Yoo·2022년 6월 30일
0

javascript grammar

목록 보기
1/20
post-thumbnail

var (es6이전) / let, const (es6이후)

// var는 선언된 변수를 다시 선언할 수 있음
var name = 'Mike';
console.log(name); // Mike
var name = 'Jane';
console.log(name); // Jane

let name = 'Mike';
console.log(name); // Mike
let name = 'Jane';
console.log(name); // error!

-----------------------------------
// var는 선언하기 전에 사용할 수 있음
var name; // -> 호이스팅(hoisting)
console.log(name) // undefined
name = 'Mike';
console.log(name) // Mike 할당

------------------------------------
// 호이스팅: 스코프 내부 어디서든 변수 선언은 최상위에 선언된 것 처럼 행동 
console.log(name); // ReferenceError, Temporal Dead Zone (할당하기 전에는 사용할 수 없음)
let name = 'Mike'; 
console.log(name); // Mike, 사용 가능(코드를 예측가능하게 하고 잠재적인 버그를 줄일 수 있음)

-----------------------------------
// 정상 코드
let age = 30;
function showAge(){
	console.log(age);
}
showAge(); // 30

// 에러 코드
let age = 30;
function showAge(){
	console.log(age); // Temporal Dead Zone (호이스팅 발생)
 	let age = 20;
}
showAge();

------------------------------------
let name;
name = 'Mike';
console.log(name); // Mike

var age;
age = 30;
console.log(age); // 30

const gender; // Error!
gender = 'male';

변수의 생성과정

  1. 선언 단계
  2. 초기화 단계
  3. 할당 단계

var

  1. 선언 및 초기화 단계
  2. 할당 단계

let

  1. 선언 단계
  2. 초기화 단계
  3. 할당 단계

const

  1. 선언 + 초기화 + 할당

스코프

var: 함수 스코프(function-scoped)

let, const: 블록 스코프(block-scoped) / 함수, if문, for문, while문, try/catch문 등

→ 코드 내에서 선언된 변수는 코드 안에서만 유효함.(지역변수)

const age = 30;
if(age>19){
	var txt = '성인';
}
console.log(txt); // 성인, if문안의 var는 밖에서도 유효함

function add(num1, num2) {
	var result = num1 + num2;
}
add(2, 3);
console.log(result); // Error!, 함수 내에서 사용된 var는 밖에서 유효하지 않음
profile
성장하는 개발자 유슬이 입니다!

0개의 댓글