JS Essential: 변수와 상수

박철연·2022년 2월 2일
0

JS Essential

목록 보기
3/10
post-thumbnail

해당 게시물은 도서 <모던 자바스크립트 Deep Dive>와 패스트캠퍼스 강의 "김민태의 프론트엔드 아카데미 : 제 1강 JavaScript & TypeScript Essential"를 참고하여 작성되었습니다.

변수와 상수의 선언

변수와 상수를 빠르게 이해하기 위해, 두 가지 개념을 선언하는 명령어를 먼저 짚고 넘어가 보겠습니다.

자바스크립트를 간단하게나마 다루신 분들은 다들 익숙하실 겁니다. 변수는 let으로, 상수는 const로 선언합니다.

 let counter = 10;
 const name = "Kim";

 counter = 20;
 counter = 30;

변수와 상수의 가장 큰 차이점은 불변성(Immutability)입니다.

변수는 선언하고 값을 할당한 뒤에도, 위의 코드 블럭 내 마지막 줄처럼 새롭게 값을 넣어줄 수 있습니다.

상수는, 즉 const로 선언하게 된 변수는 이러한 재할당이 불가능합니다.

변수든, 상수든 마지막으로 넣은 값을 기억하기 때문에, 예시에서 만든 counter라는 변수는 결국 숫자 30을 담은 변수일 것입니다.

객체 타입의 변수/상수

공부를 하다보면 언제나 예외적인 것들이 있습니다. 변수에도 그러한 예외 사항이 있습니다.

다음 예시를 한번 살펴보세요.

 const id = {
  name: "Kim",
  age: 30,
  isMarried: false
 }
 
 id.age = 31;
 id.isMarried = true;

일단 const를 썼으니까, id라는 객체는 상수로 선언한 것입니다. 그리고 세 가지 key-value 쌍을 확인 할 수 있군요.

그리고 밑 부분을 보면, key를 통해 객체 내 데이터에 접근하여 새로운 값을 지정해 주었습니다.

각각 나이와 결혼 여부를 순서대로 31, 불리언 true로 바꾸어준 것을 확인할 수 있습니다.

이 경우에는 어떻게 될까요? 이미 앞에서 말한 것처럼, 상수로 선언했으니까 값을 재할당하는 행위가 금지되지 않을까요?

하지만 그렇지 않습니다. const로 선언했지만, id라는 객체를 아예 다른 객체로 교체하거나, 객체가 아닌 데이터 타입으로 바꾸지 않는 이상 위 코드 블럭은 아무 에러도 발생시키지 않습니다.

즉, 상수로 선언했어도 객체 내부의 속성과 값이 변경되는 것까지는 막지 않는다는 것입니다.

나중에 더 깊이 다뤄볼 주제인데, 이처럼 변수와 상수를 다룰 때, 자바스크립트는 원시 데이터 타입과 객체형 데이터 타입을 다루는 방식이 상이하다라는 점 꼭 기억해두세요.

var, let 그리고 const

ES6 이전에는 사실 상수를 만드는 명령어가 없고, var 명령어 하나만 존재했습니다.

그러다가 ES6에서 값의 재할당이 가능한 let, 그리고 불변의 값을 담는 const를 따로 만들게 되었습니다.

var, let, const의 특징은 다음과 같습니다.

  1. var로 선언한 변수는 선언 전에 활용해도 에러가 나지 않지만, const와 let은 에러가 발생한다.
    우리가 자바스크립트에서 변수를 선언하면, 이 변수는 호이스팅이라는 과정을 거칩니다. 이 호이스팅은 변수를 프로그램에 등록하는 과정의 일종인데, var의 경우에는 초기값으로 변수에 자동으로 undefined를 할당합니다. 하지만 const와 let은 선언만 하고 값을 할당하지 않으면 자동으로 undefined를 넣는 과정을 거치지 않기 때문에, const와 let으로 만든 변수를 선언 이전에 활용하면 에러가 발생합니다.

  2. var와 let은 변수 선언 시 초기 값을 주지 않아도 되지만, const는 반드시 초기 값을 설정해야 한다.

  3. var와 let은 값을 다시 할당할 수 있지만, const는 한번 할당한 값을 변경할 수 없다.
    물론 앞에서 살펴본 것과 같이, const라고 해도 객체형 데이터 타입은 내부 내용물을 바꾸는 것은 가능합니다.

추가적으로, var는 const나 let과 달리 함수 레벨 스코프이고, 블록 안에서 var를 사용해 선언한 변수는 전역 변수 취급을 받습니다.

스코프에 대해 간략히 설명하자면, 변수/매개변수의 접근성과 생존 구간을 지칭하는 단어인데, 변수가 영향력을 끼칠 수 있는 범위라고 생각할 수도 있겠습니다.

전역 변수가 되면 자바스크립트 문서 모든 곳에서 참조가 될 수 있기 때문에, const와 let이 등장하고 나서부터는 변수 할당 오류를 최대한 피하기 위해 var의 사용하지 않는 것이 권장되는 것입니다.

profile
Frontend Developer

0개의 댓글