Q. var, let, const의 차이에 대해 알려주세요.
이건 전에 변수 생성 3단계랑 좀 겹치는거 같긴한데 그래도 다시 정리해봅시당
차이는 크게 변수 선언 방식, 스코프(Scope), 호이스팅이 있다.
1. 변수 선언 방식
1) var 중복 선언 가능
var name = '이름1'
console.log(name) // 이름1
var name = '이름2'
console.log(name) // 이름2
var로 선언한 변수는 동일한 이름으로 중복 선언이 가능함.
변수를 유연하게 사용할 수 있는거 같지만 변수가 변하면 생각지 못한 오류가 발생해 이를 보완하기 위해 ES6부터
let 과 const 변수가 추가되었습니당.
2) let 중복 선언 불가능, 재할당 가능
let name = '이름1'
console.log(name) // 이름1
let name = '이름2'
console.log(name) // Uncaught SyntaxError: Identifier 'name' has already been declared
name = '이름3';
console.log(name) // 이름3
var 과 달리 대 선언 불가 but 재할당은 가능!
3) const 중복 선언 불가능, 재할당 불가능
const name = '이름1'
console.log(name) // 이름1
const name = '이름2'
console.log(name) // Uncaught SyntaxError: Identifier 'name' has already been declared
name = '이름3';
console.log(name) // Uncaught TypeError: Assignment to constant variable
=> let 과 const 차이점은 불변(immutable) 여부!
but. const도 재할당은 불가하지만 배열과 오브젝트 값을 변경하는 것은 가능
그래서 어떤 변수 사용해?
const 를 기본으로 사용하여 불필요한 변수의 재사용을 방지하고, 재할당이 필요한 경우 let을 사용하는 것이 좋음!
(execute context 측면으로 봐도 var은 변수를 전역 변수에 할당 할 수도 있어서 최대한 지양하는것이 좋다)
2. 스코프 (Scope)
스코프란 유효한 참조 범위를 뜻함.
1) var 함수 레벨 스코프
function var(x) {
if (x) {
var a = 1;
console.log(a) // 1
}
console.log(a) // 1
}
var(); // 1
console.log(a); // ReferenceError: a is not defined
함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없음.
함수 내부에서 선언한 변수는 지역변수이고
함수 외부에서 선언한 변수는 모두 전역변수 취급!
2) let, const 블록 레벨 스코프
function const(x) { // let 동일
if (x) {
const a = 1;
console.log(a) // 1
}
console.log(a) // ReferenceError: a is not defined
}
console.log(a); // ReferenceError: a is not defined
함수, if문, for문, while문, try/catch문 등의 모든 코드 블록({ }) 내부에서 선언 된 변수는 코드 블륵 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없음. 즉, 코드 블록 내부에서 선언한 변수는 지역변수 취급
3. 호이스팅
함수 내부에 있는 선언들을 모두 끌어올려 해당 함수 유효 범위의 최상단에 선언하는것을 말함. (자바스크립트 parser가 함수 실행 전 해당 함수를 한번 훑는 과정에서 내부적으로 끌어올려 처리하는 것을 뜻함)
1) var, 함수선언문 : 호이스팅이 발생함
//변수 호이스팅
console.log(a) // undefined
var a = 1;
console.log(a); // 1
//함수 호이스팅
var(); // 1
function var() {
console.log(1)
}
변수 a가 선언되기 전에 참조됐는데 에러가 발생하지 않음.
=> 자바스크립트 내부에서 코드 실행 전에 미리 변수를 선언하고 undefined로 초기화함.
함수선언문 또한 동일하게 선언되기 전 호출됨에도 에러가 발생하지 않음.
2) let, const, 함수표현식 : 호이스팅이 발생하지만, 다른 방식으로 작동됨
/* 변수 호이스팅
console.log(a) // ReferenceError: a is not defined
let a = 1;
console.log(a) // 1
/* 함수 호이스팅
함수표현식(); // error
let 함수표현식 = function() {
console.log("함수표현식");
}
=> 변수 a가 선언되기 전에 참조하니 에러가 발생. 호이스팅은 발생했지만 변수 선언과 초기화 사이에 일시적으로 변수 값을 참조할 수 없는 구간인 TDZ(Temporal Dead Zone)에 빠졌기 때문
=> 함수 표현식을 사용하거나 let 또는 const로 변수를 선언하는 경우, 자바스크립트 내부에서는 코드 실행 전 변수 선언만 해둘 뿐 초기화는 코드 실행 과정에서 변수 선언문을 만났을 때 수행함. 그래서 호이스팅은 발생하지만, 값을 참조할 수 없어서 동작하지 않는것처럼 보임!
갑자기 예정에없던 강남에 왔습니당 항해99 칭구들 모여서 스터디한다길래 취업 준비 어떻게들 하고있나~ 궁금하기도 해서 갔는데 다들 열심히 하고있군..ㅎ 취업준비 진짜 빡세게 이력서 100개씩 날렸던 칭구들은 벌써 입사하고 면접 보러 댕기고있길래 조금 뒤쳐졌나 생각도 들었다. 뭐 나도 열심히 하고 있고 급하게 이력서 막 날리는 것보다 조~금 시간두면서 천천히 자소서 첨삭하고 공부 하면서 이력서 내용 보충하고있는데(아직 모아뒀던 돈이 좀 있어서 안 급한가..?) 그래도 칭구들 보면서 의욕 생겨서 좋았음
특히, 친구들 블로그 구경했는데 한명이 엄~청 내용 알차고 꾸준히 작성한거 보고 나도 좀 본격적으로 작성해야겠다, 싶었다.. 보고 내 블로그랑 비교해보니까 항해99 카테고리는 거의 노션에 작성해놔서 내용도 별로 없고 TIL 도 너무 면접 내용 + 일기인가 싶기도 하넹 그래도 기술 적인 내용은 git에 하고있긴한데, 뭐 남에꺼 좀 참고해서 더 잘 작성해봅시다~
+ 스터디 끝나고 곱도리탕에 소주 한잔하고 파했는데,
꾸역꾸역 집에 안가고 스터디카페로 왔다... 휴, 2시간만 타입스크립트 조지고 간다 화이팅...!