-
[러닝 자바스크립트] 변수와 상수 :: 마이구미Javascript 2018. 12. 22. 20:51반응형
자바스크립트의 대해 책 한 권을 통해 정리하면 좋겠다고 생각한 것을 다룬다.
전체적으로 다루는 것이 아닌, 하나의 주제를 다룰 예정이다.
이 글은 "변수와 상수 중 어떤 것을 써야 할까요?" 를 중점으로 한다.
이전에도 비슷한 걸 다룬 적이 있다. let, const 키워드를 모른다면, 읽으면 도움이 될 것이다.
도서는 대부분 사람들이 추천하는 책으로써, 많이 알려져있다.
이 책의 3장 "리터럴과 변수, 상수, 데이터타입" 에서는 다음과 같은 질문이 있다.
"변수와 상수 중 어떤 것을 써야 할까요?"
대답은 "변수보다 상수를 써야한다."
본인은 이것을 이해하기 위해 우선 "변수와 상수가 무엇을 뜻하는가?" 과 "변수와 상수를 왜 우선 순위를 구분하는지에 대한 이해" 가 필요했다.
변수는 언제든지 변할 수 있는 값, 반대로 상수는 변하지 않는 값으로써, 변수의 반대말로 정의할 수 있다.
ES6 기준으로 키워드로 표현하면, 변수는 let 을 사용하고, 상수는 const 를 사용한다.
let 은 값을 할당하더라도, 새로 할당할 수 있지만, const 는 한 번 할당한 값은 바꿀 수 없다.
고정된 값을 가지는 상수의 본질을 가지는 경우에 const 를 사용하는 모습을 볼 수 있다.
const MAX_COUNT = 10;
const ANIMATION_SLIDE_TIME = 500;
위와 같은 형태로 사용할 수 있고, 변하지 않는 숫자나 문자열과 같은 원시 값에서만 사용하지 않고, 객체 선언에서도 사용한다.
같은 목적으로 다음과 같은 코드처럼 사용할 수 있다.
const obj = {};
obj = {};
=> Uncaught TypeError: Assignment to constant variable.
let obj = {};
obj = {};
=> {}
하지만 굳이 왜 객체를 const 로 사용하는 것인지 의문을 올 수 있다.
기본적으로 객체는 상수가 아니라고 볼 수 있기 때문이다.
그런데 비슷한 얘기로, 다음과 같은 말은 많이 알려져있다.
- 대부분 변수보다 상수를 써라.
- let 과 const 의 사용에 있어, const 우선적으로 써라.
같은 말이라는 것을 이해한다면, 관련 내용을 이해한 것으로 볼 수 있다.
이 부분을 이해하기에 위해서는, C 의 포인터, 참조, 주소 값과 같은 개념을 생각하면 된다.
객체가 생성될 때는 객체 자체는 문자열이나 숫자 같은 원시 타입의 값을 갖는 것이 아닌, 주소 값을 가지게 된다.
그래서 다음과 같은 코드의 결과를 우리는 이해할 수 있다.
const a = {}; const b = {}; a === b // false
생성된 각 객체는 서로 주소값이 다르기 때문에 false 결과 값을 내게 된다.
const o = {a: 1};
const p = o;
o.a = 4;
p // {a: 4}
p 는 객체 o 의 주소 값을 가지고 있기 때문에, p 는 o 를 가리키고 있기 때문에 위와 같은 결과를 낸다.
이 주소 값을 우리는 상수라고 생각하면 된다.
이러한 형태로 사용하면, MAX_COUNT 와 같은 형태를 사용하는 이점 및 이외에도 많은 면으로 도움이 된다.
let, const 선언에 따라, 재할당 여부를 통해 해당 목적을 파악하여, 가독성 향상 및 상수의 값을 변경하는 실수를 방지할 수 있듯이 말이다.
따라서 우선적으로 상수를 먼저 생각한 후, 상수의 목적에 안 어울린다고 파악된다면, 언제든지 변수로 바꾸면 된다.
본인 또한, 이것이 실제로 많은 도움이 되었다.
현재도 const 를 우선적으로 선언하되, 추후에 let 이 어울린다고 생각될 때 변경하고 있다.
반응형'Javascript' 카테고리의 다른 글
제너레이터(Generators) 란? :: 마이구미 (0) 2020.03.23 MouseEvent 종류와 주의사항 :: 마이구미 (0) 2019.05.12 Javascript: isNaN() 동작원리 및 주의사항 :: 마이구미 (0) 2018.11.11 Binary data to RGB in canvas :: 마이구미 (0) 2018.11.05 removeEventListener, this 동작 :: 마이구미 (6) 2018.09.20