[JS] 자바스크립트 변수 설명과 var, let, const 비교 차이

변수

값을 담기 위한 공간

 

변수 명명법 규칙 

1. 숫자로 시작할 수 없음

2. 변수명에는 공백, 기호, 마침표가 들어갈 수 없음

3. 자바스크립트의 예약어는 쓰일 수 없음

 

변수이름 자체가 변수를 설명할 수 있는 방식이 가장 좋은 변수 명명법

 

자바스크립트는 동적언어(dynamic language)이기 때문에

정적언어와 달리 변수를 정의할 때 자료형을 정의할 필요가 없음

-장점 : 편리하다

-단점 : 대규모 프로젝트를 작업할 때 문제의 원인이 될 수 있음

(js를 엄격한 자료형을 준수하는 강타입언어로 탈바꿈시키는 타입스크립트 존재)

 

+)

원시자료형 

-객체가 아닌 자료형 > 메서드를 가지지 않는다

-string

-number (js는 모두 실수 표현)

-boolean

-null (값이 없음)

-undsfined (정의되지 않은 값)

-symbol

 

객체

-하나의 값만 담을 수 있는 원시자료형과 달리

-객체는 여러 속성의 모음을 저장하는 데 사용 가능

-객체를 생성할 때는 속성을 선언할 필요가 없음

-빈 객체 만드는 법 

  1. const car = new object();

  2. const car = {};

-객체 속성 접근법

  1.console.log(car.wheels);  점 표기법/속성이 여러 단어인 경우 사용 불가

  2.console.log(car['color']);

 

var

-변수가 함수 스코프에 종속

-반면, for루프(블록 스코프) 내에서 var 키워드로 변수를 선언하면 이 변수를 for루프 밖에서도 사용 가능

-정의되기 전에 접근할 수 있지만, 그 값에는 접근할 수 없다

 

let

-(+const) 변수는 블록 스코프로 종속

-즉, 변수가 선언된 블록과 그 하위 블록 내에서만 사용

 

 

이처럼 블록 스코프 내에서 let으로 선언한 변수에 새 값을 할당했을 때 블록 바깥에서는 그 값이 변경되지 않음

반면, var 로 선언된 변수에 대해 동일한 작업을 하면 블록 스코프외부에서 접근이 가능하므로 블록 가깥에서도 값이 변함

-정의하기 전에 접근할 수 없다

 

 

const : 상수(constanat)

-let과 마찬가지로 변수가 블록 스코프에 종속

-재할당을 통해 값이 변경될 수 없고 다시 선언될 수도 없음

-중요한 사실은 const로 선언된 변수가 불변이라는 의미는 아니다 

-정의하기 전에 접근할 수 없다

 

 

const에 객체가 담기는 경우

-변수 전체를 재할당 하는 것이 아니라 그 속성 중 하나만 재할당 하는 경우 문제가 없다

-참고로, 객체의 내용을 변경할 수 없게 const 객체를 고정할 수는 있다

-이때 하지만, 객체 값을 변경하려고 할 때  js가 오류로 처리하지는 않는다

 

 

 

TDZ (Temporal dead zone 일시적 비활성 구역)

-var는 정의되기 전에 접근할 수 있지만 그 값에는 접근할 수 없다

-const, let 은 정의하기 전에 접근할 수 없다

-즉, 모두 다른 소스에서 읽을 수 있는 내용임에도 불구하고 호이스팅의 대상이 된다

-즉, 코드가 실행되기 전에 처리되고 해당 스코프 상단으로 올라간다

-var 가 가지는 가장 큰 차이점은 정의되기 전에도 접근할 수 있다는 점

-즉, 정의되기 전에는 var는 undefined 값을 가지게 된다

-반면, let은 변수가 선언될 때까지 일시적으로 TDZ존에 있게된다 (일시적 비활성 구역)

-따라서, 초기화 전에 변수에 접근하면 오류가 발생한다

-undefined 값을 얻는 것보다는 오류가 발생하는 편이 코드 디버깅이 쉽다

 

 

마티아스 바인스 의견

1. 기본적으로 const를 사용하자

2. 재할당이 필요한 경우에만 let을 사용하자

3. var은 절대 사용하지 않는다

 

카일 심슨 의견

1. 여러 큰 스코프에서 공유하기 위한 최상위 변수에는 var를 사용하자

-작은 스코프의 로컬 변수에는 let을 사용한다

-코드 작성이 어느 정도 진행된 후에만 let을 const로 리팩터링하자 

(변수 재할당을 막아야 하는 경우라는 것이 확실해야 한다)

 

 

값을 재할당 하는 경우가 아니라면 항상 const 사용을 해야한다

>나중에 코드를 디버그 하지 않고 실수로 재할당 하려고 할 때 오류가 발생해서, 잘못된 변수를 참조했다는 사실을 알 수 있음