자바스크립트 const로 array 선언하면 일어나는 일

1. 현재의 무드: 붙캠 점심시간을 틈타 스터디 디코에서 논의한 것을 정리하는 중임다. 기분이 째집니다. 

2. 오늘 학습한 내용 중 키워드: const, array, 재할당, 변수 선언 시 일어나는 일 (메모리) 

3. 오늘 학습한 내용 요약:

 

제가 한 질문은 아니지만, 스터디 디코에서 다른 스터디원분이 질문해주신 게 내용이 넘 좋아서 해당 논의하며 배운 것을 정리해봅니다!

 

var // 재선언, 재할당 모두 가능
const // 재할당 불가능
let // 재할당 가능


var name = 'babo'
console.log(name) // 'babo'
var name = 'genious' 
console.log(name) // 'genious'  // 재선언, 재할당이 모두 되었음

const name = 'babo'
console.log(name) // 'babo'
name = 'genious' // TypeError: Assignment to constant variable.  // 재할당 불가능

let name = 'babo'
name = 'genious' 
console.log(name) // 'genious' // 재할당 가능

 

자바스크립트는 크게 위의 3가지 방법으로 변수를 선언합니다. 

그 중, const는 재선언과 재할당이 불가능합니다. 

 

그런데, array에서는 어떨까요? 

const arr = [1, 2, 3, 4];

arr.pop() 
console.log(arr) // [1, 2, 3] // 마지막 요소 제거 가능

arr.push(4) 
console.log(arr) // [1, 2, 3, 4] //마지막 요소 추가 가능

 

const는 재할당이 불가능한데, 배열 안의 요소값이 .pop(), .push() 메서드를 썼을 때 정상적으로 제거, 추가가 됩니다. 

왜냐하면, 해당 메서드는 재할당이 아니기 때문입니다. 

 

더 정확히 이해하려면, 변수를 선언했을 때 일어나는 일을 알아야 합니다.

 

let arr = [1, 2, 3, 4]
const arr = [1, 2, 3, 4]
var arr = [1, 2, 3, 4]

 

이런 식으로 변수를 선언해주면, 해당 변수의 값을 저장하는 메모리 공간을  확보합니다. 이 메모리 공간의 위치를 기억하는 것이 변수의 역할입니다. 

 

그리고 변수에 값이 할당되면, 해당 메모리의 위치에 그 값을 저장해줍니다. 

 

const arr = [1, 2, 3, 4] // 메모리의 위치를 arr가 저장하고, 그 위치에 배열 값을 저장함

arr.pop() // 해당 메모리 위치로 arr를 통해 찾아가고, 그 안에서 배열의 마지막 값을 제거해줌. 
arr.push(5) // 해당 메모리 위치로 arr를 통해 찾아가고, 그 안에서 배열의 마지막 값에 추가해줌.

 

 

즉, 메모리의 위치 (변수명) 은 변하지 않았고, 그 메모리의 내용만 변화시켜 준 것이므로 '재할당' 에 해당하지 않습니다.

그래서 const로 선언한 배열에서 해당 메서드들의 사용이 가능합니다!

 

저는 이걸 이해하고 나서, 그러면 굳이 배열은 const로 선언하지 않겠네요? 라고 생각했는데,

오히려 배열을 const 로 선언하는게 유리할 수 있다는 논의가 이어졌습니다. 

 

const arr = [1, 2, 3, 4]

const arr = [5, 6, 7, 8] // error! already declared

 

이므로, 잘못된 재할당을 막고 그 안에서 메서드를 사용한 값 변환만 가능하게 만들어주기 때문입니다. 

역시 의문이 생기면 콘솔에 찍어보고 하나씩 이해하려고 시도해보는 것이 중요하네요! 

 

저는 의문이 생기지 않는...타입이라 (그렇구나..ㅇㅅㅇ 하고 넘어갑니다ㅠ) 이렇게 스터디원분의 질문 덕에 변수 선언에 대한 이해를 높일 수 있었습니다.