프론트엔드 학습 일지 Day 4 - const 탐구하기

 

오늘은 const에 대해 학습해볼 것이다.

 

자바스크립트로 개발을 하다보면 변수 선언을 const로 자주 사용하는데,

 

상수는 안변하고 잘 버티는데 객체는 값이 변경되는 것을 경험한 적이 있다. 이 부분에 대해 학습해보자!

 

 

---

 

1. 변수와 재할당

 

자바스크립트에서는 주로 let과 const로 변수를 선언한다. 변수에 대한 설명은 굳이 적지 않겠다.

 

let 키워드를 사용하여 변수를 선언하면, 변수 안에 들어있는 값 (참조한 글을 봤을 땐 변수가 가리키는 데이터라고 표현하는 것이 더 정확할 듯)이 변할 수 있다. 사실상 "변수"라는 단어 표현에 맞게 변할 수 있는 것이다.

 

반면, const 키워드를 사용하여 변수를 선언하면, 변수 안에 들어있는 값은 변할 수 없다. 우리는 그래도 "변수"라고 표현하고 있지만...

 

더 정확하게 표현한다면, let은 변수와 가리키는 값 사이의 연결이 파괴될 수 있지만 (다른 것으로 연결이 변경될 수 있지만)

const는 변수와 가리키는 값 사이의 연결이 파괴될 수 없다고 한다.

 

let brick = "다른 값으로 연결(변경) 가능"
const brick = "다른 값으로 연결(변경) 불가"

 

 

 

2. 변수와 뮤테이션

 

배열이나 객체는 어떨까?

 

신기하게도 const는 변수와 데이터 사이의 연결을 유지시킬 뿐, 연결이 유지되면서 데이터의 값을 변경하는 것은 가능하다는 것이다...!

 

위 문장이 해당하는 배열에 대해 살펴보자.

예를 들어, const로 선언된 배열이 아래와 같이 있다.

 

 

const house = ["연결된", "데이터가", "변할 수"]
house.push("있어")

// house는 ["연결된", "데이터가", "변할 수", "있어"] 가 될 것이다.

 

위 예시에서 보이듯이 const로 선언된 배열에 값을 추가하거나 제거하는 것이 가능하다.

이 것을 뮤테이션이라고 부른다. (이 용어에 대해선 처음 알았다 🫢)

 

마찬가지로, 객체에서도 동일하게 변경이 가능하다!

 

 

const blog = {
  title: 'brick',
  writer: 'dog bro'
}
blog.title = 'brick house'

// blog 객체의 title 값은 문제 없이 변할 것이다.

 

 

3. 재할당 vs 뮤테이션

 

🤭 자, 위에 내용을 정리하면 let으로 지정해서 변수 값을 변화시키는건 재할당, const로 연결된 배열이나 객체의 값을 변경하는건 뮤테이션이라고 부른다는 것이다.

 

결국 const는 재할당은 완전 불가, 뮤테이션은 완전 가능인 것이며 const로 선언했을 때 뮤테이션을 막는 방법이 없다는 것이다.

 

하지만 분명 막는 방법은 존재한다. 역시 그랬고 참조한 글을 통해 Object.freeze()라는 방법이 있다는 것을 알게 되었다.

(난 타입스크립트를 주로 사용하기 때문에 const 선언 뒤에 as const를 붙여 뮤테이션을 막긴 했었다)

 

const blog = Object.freeze(['brick', 'house']);
blog.push('good!');
// blog의 결과는 여전히 ['brick', 'house'] 이다.

 

 

이번에 학습하면서 알게 된 사실은 as const는 결국 타입스크립트 언어이므로 자바스크립트로 컴파일된 뒤에는 사라지기 때문에 Object.freeze와 동일한 보호기능을 가지진 못한다는 것이다 🤔

웬만한건 다 커버할 수 있을 거 같긴 하지만...

 

 

4. 원시 타입 Primitive Type

 

위에서 계속 예제를 들었던 참조 타입 (Reference Type)인 배열, 객체와는 다르게 숫자, 문자열, 불리안 타입은 원시 타입이라고 한다.

 

이들은 뮤테이션이 불가능하고 재할당은 가능한데,

 

오해할만한 내용은 원시타입 변수는 재할당은 가능하지만 숫자, 문자열, 불리안 그 값 자체를 수정하지는 않는다는 것이다.

 

let primitiveValue = 10
primitiveValue = 20
// primitiveValue 변수를 20으로 재할당. 10이라는 데이터를 20로 변경시킨 것은 아니다.

10 = 20
console.log(10) // result: 20
// 10이라는 데이터를 20로 변경시킨 것은 위와 같은 것이다. 
// 위 코드가 사용된 블록 내에서 다시는 10이라는 숫자를 보지 못할 것이다. 10을 쓰면 20이 나올테니...

 

 

위 코드를 보면 이해가 쉽게 될 것이다.

 

 

 

 

 

오늘은 const와 let에 대한 탐구를 해봤다.

역시나 좋은 글을 제공해주신 분들께 감사하다.

다음 DAY5도 꼭 성공해보자!!

 

https://velog.io/@lky5697/the-const-deception
https://www.joshwcomeau.com/javascript/the-const-deception/