이번 글에서는 변수와 상수에 대해 알아보도록 하겠습니다. “변수”라는 같은 용어라도 누가 설명하는지 혹은 설명하는 대상이 누군지에 따라 조금씩 설명이 달라질 수 있습니다. 항상 모든 용어에서 제가 글에서 적는 설명만이 정답이 아닐 수도 있습니다. 여러분이 이해한 설명 역시 정답이 될 수 있습니다.
자바스크립트의 문법을 다루는 도서나 사이트 역시 같은 용어라도 조금씩 다르게 정의하고 있는 경우가 있습니다.
변수
우선 유명한 자바스크립트관련 도서나 사이트에서 변수에 대해 어떻게 정의하고 있는지 한 번 읽어보고 가겠습니다. 몇 개의 어려운 단어가 포함되어 있을 수 있습니다. 현재 어려운 단어는 이해하지 못하셔도 괜찮습니다.
변수(variable)란 간단히 말해 이름이 붙은 값으로, 변수라는 이름이 암시하듯 언제든 바뀔 수 있습니다.
-러닝 자바스크립트 (이선 브라운)-
변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말한다.
-모던 자바스크립트 Deep Dive (이웅모) -
변수는 값을 담기 위한 공간이다. 예를 들어 사용자 이름, 주소, 쇼핑몰 사이트의 상품 항목 등등의 값을 저장하여 사용할 수 있다. 값을 재할당할 수 있다.
-모던 자바스크립트 핵심 가이드 (알베르토 몬탈레시)-
변수(variable)는 데이터를 저장할 때 쓰이는 ‘이름이 붙은 저장소’ 입니다.
-모던 자바스크립트 튜토리얼-
변수란 값이 위치하고 있는 메모리 주소(Memory address)에 접근하기 위해 사람이 이해할 수 있는 언어로 명명한 식별자(identifier)이다.
-Poiemaweb, Web Development Tutorial -
눈치채셨겠지만 위에서 인용한 5개의 설명 자체는 조금씩 다르지만 공통적으로 가지고 있는 특징이 3개 존재합니다. 바로 이름(식별자, identifier), 값을 저장할 수 있는 공간(저장소), 값이 바뀔 수 있음(재할당) 입니다.
예를 들어 현재 유저의 나이를 입력받아 성인인지 검사하는 프로그램을 만들게 된다면 userAge 라는 변수를 만들게 될 수 있습니다. 자바스크립트에서는 let 키워드를 사용해 변수를 생성할 수 있습니다.
userAge 같은 변수나 상수, 함수의 이름을 식별자(identifier)라고 부릅니다. 따라서 다음의 코드에서는 userAge 라는 이름(식별자)을 가진 저장소가 생겨나게 됩니다.
let currentUserAge = 25; // 현재 유저의 나이
console.log(currentUserAge); // 25TIP 1.
변수를 생성하는let키워드는 2015년에 나온 ES6 문법에서 자바스크립트에 새로 추가되었습니다. ES6 이전에는var키워드만 존재하였습니다.
현재 2022년 자바스크립트를 프로그래밍하게 된다면var키워드를 이용한 변수를 만들 일이 거의 없을 겁니다. 따라서var키워드는 나중에 다뤄보겠습니다.
TIP2.
변수에는 내가 원하는 의미와 연관 있는 값(예: 나이, 연도, 온도 등)만 넣을 수 있는 방법은 존재하지 않습니다.
더 쉽게 표현하자면 자바스크립트라는 언어에는a나b라는 변수에 “현재 유저의 나이”만 받고 싶어도 그렇게 지정해 놓을 수 있는 방법이 존재하지 않습니다.
따라서currentUserAge처럼 변수 내가 원하는 의미(예: 현재 유저 이름)와 상관없는 값(예: 이름 데이터, 주소 데이터 등)을 다시 할당하는 실수를 줄이기 위해 이름에서 값이 가지는 의미를 표현하는 것이 좋습니다.
이름을 의미있게 짓는 것은 강제되는 규칙은 아니지만 혹시 모르는 실수를 줄일 수 있는 방법입니다.
현재 위에 코드(문, statement)는 currentUserAge 변수를 생성하고(선언) 동시에 초깃값을 할당하는(초기화) 두 가지의 일을 동시에 처리하고 있습니다. let 키워드로 선언된 currentAge 는 현재 변수이기 때문에 다음 코드와 같이 값을 다시 할당 해줄 수 있습니다.
currentUserAge = 26; // currentUserAge 변수는 이제 26 이라는 값을 가지고 있습니다.
console.log(currentUserAge); // 26변수를 꼭 생성(선언)과 함께 초깃값을 할당(초기화)를 해줄 필요는 없습니다. 초깃값을 할당하지 않으면 자바스크립트에서는 선언과 동시에 자동적으로 undefined 라는 값을 할당해주게 됩니다.
TIP 3.
자바스크립트는 “존재하지 않는 것” 을 의미하는 두 가지 특별한 타입인null과undefined를 가지고 있습니다.
null타입은null만 가질 수 있으며undefined타입도 가질 수 있는 값은undefined하나입니다.
이런 특징들 때문에 두 가지 타입이 초보자 입장에서는 별반 차이가 없어 보이게 되었고null과undefined는 자바스크립트에서 초보자들을 힘들게 하는 요소 중 하나가 되었습니다.
두 타입을 구분하기 쉽게 설명하자면null은 프로그래머가 명시적으로 “존재하지 않음 혹은 없음” 을 나타내기 위해 일반적으로 자주 사용하는 데이터 타입입니다. 그리고undefined는 자바스크립트에서 “존재하지 않음 혹은 없음” 을 나타내기 위해서 자체적으로 사용하는 데이터입니다.
강제로 적용되는 규칙은 아니기 때문에 프로그래머가 직접undefined를 사용하여 변수에 할당하는 등의 작업을 시도할 수는 있습니다. 하지만 반드시 필요한 상황이 아니라면 혼동이나 실수를 줄이기 위해 직접적으로undefined를 사용하는 상황은 피하는 것이 좋습니다.
let val; // undefined 가 들어가게 됩니다. let val2 = null; // null, 어떤 값이 들어올지 아직 모르는 상태라는 의미입니다. val2 = "value"; // val2는 이제 "value"라는 데이터를 가지고 있습니다. val2 = undefined; // 직접적으로 undefined를 재할당하는 것은 좋지 않습니다.(초기화가 안된 것 처럼 보임) ```
let 으로 한번에 여러개의 변수를 생성할 수도 있습니다.
let currentYear, adultAge = 19, userPhoneNumber = "010-1234-5678";
console.log(currentYear); // undefined
console.log(adultAge); // 19
console.log(userPhoneNumber); // 010-1234-5678위에 코드에서는 let 한번으로 3개의 변수가 동시에 선언되었습니다. currentYear 변수 역시 선언은 되었지만 초깃값이 할당되지 않았으므로 undefined 가 들어가게 됩니다.
다음으로는 상수에 대해 알아보겠습니다.
상수
상수(constant)는 변수와 마찬가지로 값을 할당받을 수 있지만, 한 번 할당한 값을 바꿀 수는 없습니다.
-러닝 자바스크립트 (이선 브라운) -
const 키워드로 생성된 변수는 이름에서 알 수 있듯이 상수(constant) 이므로 그 값을 덮어쓸 수 없다
-모던 자바스크립트 핵심 가이드 (알베르토 몬탈레시) -
변화하지 않는 변수
-모던 자바스크립트 튜토리얼 -
상수(constant)의 대부분의 특징은 변수와 같습니다. 변수와 상수의 차이점은 변수는 재할당이 가능하지만 상수는 재할당을 할 수 없다는 것입니다.
다만 할당되어 있는 데이터가 객체인 경우 상수에 할당되어 있는 값은 객체의 주소이기 때문에 객체의 프로퍼티(속성)은 변경하여도 객체의 주소는 변경되지 않기 때문에 객체의 프로퍼티(속성)은 const 에서 보호되지 않습니다.
const 역시 한번에 여러 개의 상수를 선언할 수 있습니다.
const USER_ID = "example123", USER_PASSWORD = "test123";
USER_ID = "newExample123" // ! 에러발생 ! const에는 재할당 할 수 없음 (TypeError: Assignment to constant variable.)const obj = { greeting: "hi" }
obj = { greeting: "hello" } // ! 에러발생 ! const에는 재할당 할 수 없음 (TypeError: Assignment to constant variable.)// 객체의 내용은 변경할 수 있다.
const obj = { age: 25 }
obj.age = 26;
console.log(obj) // { age: 26 };상수와 변수 중에 어떤 걸 우선적으로 써야하나요?
될 수 있으면 변수보다 상수를 써야합니다. 데이터의 값이 막 바뀌는 것 보다는, 고정된 값이 이해하기 쉽습니다. 상수를 사용하면 값을 바꾸지 말아야 할 데이터에서 실수로 값을 바꾸는 일도 줄어듭니다.
우선 상수를 먼저 생각합니다. 그 상수의 값이 바뀌는 게 자연스럽다고 생각된다면, 언제든지 변수로 바꿀 수 있습니다.
상수는 쓰면 안되고 항상 변수를 써야하는 상황도 있습니다. 예를 들어 for 문과 같은 루프(반복) 제어에는 변수를 써야합니다. 시간이 지나면서 값이 바뀌는 경우에도 변수를 써야합니다.
하지만 일단 상수를 쓰는 습관을 들이면, 변수가 꼭 필요한 상황이 훨씬 적다는 걸 알고 놀라게 될 겁니다.
-러닝 자바스크립트 (이선 브라운)-
개인적으로, 기본으로
const를 사용하고 값을 재할당하는 경우에만const를let으로 바꾸는 것이 좋다고 생각한다.
-모던 자바스크립트 핵심 가이드 (알베르토 몬탈레시)-
- 기본적으로
const를 사용해라- 재할당이 필요한 경우에만
let을 사용하도록 하자.var는 ES6 이상에서 절대 사용하지 않는다.
-마티아스 바인즈의 의견 (in 모던 자바스크립트 핵심가이드)-
