JavaScript 선언 방식과 호이스팅

TigerStoneV·2022년 3월 1일
0

JavaScript의 선언 3가지

var a = 10;
let b = 100;
const c = 1000;

consol.log(a); //10
consol.log(b); //10
consol.log(c); //10

제일 우선 먼저 var에 대한 간단한 설명은

var a = 10;
consol.log(a); // 10
var a = 20;
consol.log(a); // 20 재선언 가능
a = 30;
consol.log(a); // 30 재할당 가능

결국 var 는 변하는 수 라고 이해하면 제일 편할거 같다.
어디서든 건들어도 변하고 내 마음대로 할당이 가능하기 때문에,
다만 단점은 물론 있다.
같은 변수명을 실수로 적었을때 아무 오류없이 할당이 바로 된다는 것, 코드가
길어지는 상황에서 실수를 범할 수 있다.
이를 보완하기 위해 ES6부터 let 과 const 가 등장했다

let에 대한 간단 설명

let b = 100;
consol.log(b); // 100
let b = 200;
consol.log(b); // Error 재선언 불가능
b = 300; // 재할당 가능
consol.log(b); // 300

let은 변수의 재할당은 가능하지만 var처럼 재 선언은 되지 않는다.

const에 대한 간단 설명

const c = 1000;
consol.log(c); //1000
const c = 2000;
consol.log(c) //Error 재선언 불가능
c = 3000;
consol.log(c)//Error 재할당 불가능

명확한 차이가 나타난다.
const는 상수이고 어떠한 경우에도 값이 변하지 않는다.
예를들어 회원을 관리하는 User 테이블에서 password,nickName같은 경우에는 변경이 가능하므로 var,let 반대로 고유 id값이나 이름같은 경우는 변경할수 없는 값이므로 const가 적절하다.

여기서 !var vs let

var 는 유연한 변수 선언으로 간단한 테스트에는 편리 할 수 있겠으나, 코드량이 많아 진다면 어디에서 어떻게 사용 될지도 파악하기 힘들뿐더러 값이 바뀔 우려가 있다.
var를 남용하기 보단 적절하게 쓰는게 중요하고 let을 더 활용하는 모습이 클린코드를 작성하기에는 더욱 좋아보인다.

호이스팅

호이스팅(Hoisting)이란, var 선언문이나 function 선언문 등을 해당 스코프의 선두로 옮긴 것처럼 동작하는 특성을 말한다.

js는 ES6에서 도입된 let,const를 포함하여 모든 선언(var,let,const,function,function*,class)을 호이스팅한다.

하지만, var로 선언된 변수와는 달리 let으로 선언된 변수를 선언문 이전에 참조하게 된다면 참조 에러(Reference Error)가 발생한다.

consol.log(a); // undefined
var a;
consol.log(b); // Reference Error
let b;

이는 let으로 선언된 변수는 스코프의 시작에서 변수의 선언까지 일시적인
사각지대 (Temporal Dead Zone; TDZ)에 빠지기 때문이다.

참고로 변수는 선언단계 > 초기화 단계 > 할당 단계에 걸쳐서 생성되는데,
var 으로 선언된 변수는 선언단계와 초기화 단계가 한번에 이루어진다.

하지만 let은 선언과 초기화가 분리된 상태로 변수가 생성된다.

결론.

변수 선언에는 기본적으로 const를 사용하고, 재할당이 필요한 경우에 한정해 let 을 사용하는 것이 좋다.

그리고 객체를 재할당하는 경우는 생각보다 흔하지 않다. const 를 사용하면 의도치 않은 재할당을 방지해 주기 때문에 보다 안전하다.

재할당이 필요한 경우에 한정해 let 을 사용한다. 이때, 변수의 스코프는 최대한 좁게 만든다.

재할당이 필요 없는 상수와 객체에는 const 를 사용한다.

profile
개발 삽질하는 돌호랑이

0개의 댓글