08. 변하지 않는 값 상수의 선언, const의 비밀.

안녕하세요. 좋아요요정입니다.

ES6이전 과거에는 전역 변수가 아닌 변수를 할당하는 방법은 var 키워드를 이용한 선언만 있었습니다.

ES6에서는  let과 const가 추가되어 var, let, const 3가지의 선언 방법이 있습니다. 

지난 게시글에서는 var와 let으로 변수 선언 시 차이점에 대해서 알아보았습니다.

오늘은 ES6에서 let과 함께 추가된 const 키워드를 알아보겠습니다. 

 

 

 

const 🎃

const는 constant의 약어로 상수를 의미합니다. 

상수란 변하지 않고 항상 같은 값을 가지는 수를 이야기합니다. 수학의 함수를 f(x) = x + 1 생각해보시면 변수와 함께 사용되는 상수값 1이 있죠? 이를 함께 이해해보시면 좋습니다. var만 있던 과거에는 모든 변수를 하나의 키워드로 선언했습니다. 

ES6에서는 let과 const로 선언 키워드 2가지가 추가되며, 키워드로 "이 변수가 가지고 있는 역할"을 표시해줄 수 있습니다. 누구에게? 이 코드를 마주할 미래의 나에게.. 혹은 다른 누군가에게 말이죠. 그렇다면 const와 let은 무엇이 다를까요? 

지난 게시글에서 설명한 let과 비교하며 const의 특징을 함께 살펴보겠습니다.

 

 

const의 특징

1. 변수 중복 선언시 문법 에러 발생   let과 동일 

const x = "사과폰";
const x = "어른폰";

const도 중복 선언시 이미 선언되어 있다는 문법에러가 발생합니다.

 

 

2. 블록레벨 스코프 인정  let과 동일

const apple = 10000; 

function getIt() { //함수 레벨 스코프
	const apple = "사과폰";
    console.log(apple) //사과폰
}

getIt()

console.log(apple) //10000

if(true) { //블록 레벨 스코프
	let apple = "A씨네 강아지"; 
}

console.log(apple) //10000

const도 블록레벨 스코프를 지역 스코프로 인정합니다.  또한 블록 밖에서 참조할 수 없습니다.

 

 

3. 선언 전 참조시 에러 발생  let과 동일 

console.log(apple);
const apple = "사과폰";

let과 동일하게 선언 전에 참조하게되면 ReferenceError가 출력됩니다. 코드 해석단계에서 선언이 되어지고, 코드 내에서 실제로 선언이 이루어질 때까지 참조를 막습니다. 

 

 

4. 전역 변수에 선언해도 전역 객체에 등록되지 않음  let과 동일 

const로 선언한 변수도 전역 객체의 프로퍼티에 등록되지 않고 글로벌 스코프 내의 변수로 선언됩니다.

 

 

 

---

5. 선언시 값을 할당해야 함  let과 다름 

const 키워드로 선언한 변수는 반드시 선언과 동시에 값을 할당해주어야 합니다. 선언을 할 때 초기화와 값 할당이 진행되어야 합니다.

SyntaxError는 문법적으로 유효하지 않은 코드를 해석하려고 시도할 때 발생하는 오류를 뜻합니다.

const 선언시에는 var와 let과 달리 값을 지정해야 하도록 제약되어 있습니다.

 

 

 

6. 재할당 금지. (단, 불변객체가 되는 것은 아니다!)  let과 다름

const은 선언 이후 재할당할 수 없습니다. 1번 항목의 변수 중복 선언과 다르게 변수에 값을 재할당할 수 없음을 의미합니다.

const x = "오렌지꿀주먹";
x = "허니파워";

상수 변수에 할당되어 있다고 TypeError메세지가 출력됩니다. 그러나 값이 변경되지 않는다는 것이 즉 const 키워드로 선언된 모든 데이터가 불변값이 되는 것은 아닙니다. 배열이나 객체의 경우 배열, 객체의 항목은 바뀔 수 있습니다. 

 

 

 

 

💡 const의 비밀.

"변치 않는 값" 상수를 뜻하는 const이지만, 모든 데이터를 불변값, 불변객체로 만드는 것이 아닙니다.

 

 

 

 

배열이나 객체의 경우, 해당 데이터가 저장된 힙주소가 스택 영역에 저장되게 됩니다.

 

const로 선언할 경우 스택영역의 값(원시값이 경우 해당 값, 배열이나 객체, 함수 등의 경우 저장외 되어있는 힙주소)이 저장되게 됩니다.

 

힙 영역에 저장된 데이터, 객체 리터럴은 변경이 가능하게 됩니다. 

 

스택 영역에 저장되어지는 새로운 객체의 참조값으로 재할당은 할 수 없습니다. 

 

 

 

---

const  언제 사용하며 좋을까요? 

1. 변치 않는 원시타입의 상수

const 키워드로 선언한 원시값은 선언 시 값을 할당해야하고 이후 재할당할 수 없습니다. 

몇백줄의 코드가 진행이 되면서도 "변하지 않는 값"이어야할 때 const 키워드로 선언해주면, 미래의 내가 혹은 함께 작업하는 사람이 몇백줄 뒤에서도 안심하고 사용할 수 있습니다. 

 

2. 재할당되어야하는 변수가 아닌 경우!

const는 let보다 제약사항이 더 많습니다. 재할당도 불가하며, let보다 더 까다롭게 사용할 수 있습니다. 문맥상 반드시 재할당해야만 하는 변수가 아니라면 const를 사용하는 것이 안전합니다.

 

 

---

const의 비밀. 알고 계셨나요? 모두가 알고 계셨을 것이라 믿습니다..

혹여 입문이신 경우 예시들이 도움이 되셨기를 바랍니다.

스터디를 통해 한줄로 설명듣고 끝이 아니라, 작성하고 또 예시들을 만들어보면서 더 깊게 공부하게 됩니다. :) (이제 쉬운 부분 끝났네요..) 

책을 사면 초반을 열심히 읽고 점점 이해맑고 완독에 의미를 두고 읽어서.. 앞으로는 새로 배우는게 훨씬 더 많을 예정입니다..ㅎㅎ  스터디할 때 정신 똑바로 차려야겠다! 생각이 듭니다. 

즐거운 코딩라이프되세요! 감사합니다!

 

JavaScript 스터디 팀 러버덕과 함께 합니다.