회피형 인간의 const 사용하기

binary·2022년 5월 11일
2
post-thumbnail

회피형 인간의 const 사용하기

오늘은 codestates에서 배열과 객체에 대해 배웠다.
배열과 객체를 조금씩 알게 되면서 const 라는 예약어와 조금 친해질 수 있었는데 한 번 그 과정들을 정리하면 좋을 것 같아서 글을 써 본다.

회피형과 불안형이 뒤섞인 사람인 나는, 변수를 선언할 때 let 이라는 예약어를 사용했다.
값이 재할당되지 않을 거라고 생각되는 변수들도 모두 let 으로 선언했다.

에러가 무섭고 회피하고 싶어서 안전하게 let 으로 모든 변수를 선언하고 코드를 작성하기 시작하면 에러를 덜 보겠구나 싶어서... 그런 멍청한 선택을 했다.

그런데 공부를 시작하고 에러는 나와 떼려야 뗄 수 없는 존재가 되었다.

이제는 안 되면 에러 메시지부터 확인하는 것이 습관이 되었고, 메시지를 중심으로 잘못된 것을 하나씩 고쳐나가기 시작하면서 내가 처음 가져버린 여기저기 let 쓰는 나쁜 습관을 고쳐야 겠다는 생각이 문득 들었다.

겨우 const 로 변수를 선언하는 것에 겁먹었던 과거의 나를 떠올리며 const 를 정리해보려고 한다.

앞서 과거의 내가 안전하게 코드를 작성하고자 let을 사용했다고 했는데, 오히려 let 을 사용하는 것이 예상할 수 없는 런타임 오류가 발생할 수 있어 위험하다. const 를 사용할 때 오류가 나는 건 나를 지켜주는 메시지였다.

const는 언제 사용할까 ❓

상수를 선언할 때 const를 사용한다고 보통 알려져있다.

그냥 웬만하면 상수를 사용하면서 거기에 const 예약어를 쓰자.
TypeError: Assignment to constant variable.
위 같은 에러가 뜨면 그 변수의 예약어만 let 으로 바꿔준다.
그렇게 되면 let 으로 선언된 변수들은 자동적으로 재활당되는 변수겠다, 생각할 수 있어 변수들을 파악하기 쉽다.

type이 object인 값을 변수에 할당할 때 쓰는 예약어❓

내가 정말 const 를 무서워하고 회피하게 된 계기가 object 때문이었다.

공식 문서를 보면 보통 객체와 배열을 const 로 선언한다. 그리고 const 로 선언된 객체와 배열에 요소를 추가한다거나 삭제하는 등 객체와 배열을 수정한다.

아니 const 는 상수에만 쓴다며? 저렇게 수정되는 배열과 객체를 const 로 선언해도 오류가 안 나는 거야?
초보자인 내가 보기에 const 는 지 멋대로 였다. 그런데 사실 배열과 객체가 가진 특징 때문에 const 로 선언할 수 있었던 거였다. const 는 죄가 없었다 ... 멍청한 내가 잘못했지 ...

배열과 객체를 const로 선언할 수 있는 이유❓

{} === {}[] === [] 의 결과는 모두 false 이다.
모양이 똑같지만 각기 다른 주소 값을 가졌기 때문에 거짓을 반환을 하는 것인데 이 주소 값은 불변이며 상수이다.

const pongdang = {
  age : 23,
  favorite : "고양이"
}

pongdang 이라는 변수에 객체를 할당해주었다.

정확히는 객체 자체가 pongdang 이라는 변수에 할당이 되는 것이 아니라 객체의 주소 값이 할당이 된다.
그리고 객체에 어떠한 key-value 를 추가해도 객체의 주소 값은 바뀌지 않는다.

| 정리

  1. const 의 변수에는 객체와 객체의 내용이 할당된 것이 아니라 객체의 주소값이 할당되었음.
  2. 객체의 주소값은 불변하여 객체의 멤버가 아무리 수정되어도 변하지 않음.
  3. 그래서 const 로 객체를 선언해도 문제 없음.

배열도 마찬가지로 변수에 주소값이 할당이 되기 때문에 const 로 선언하고 배열이 변경되어도 문제가 생기지 않는다. +추가) 함수도 !

| 추가

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

arr = [1, 2, 3, 4, 5, 6];

const obj = {
  age : 99,
  like : true,
}

obj = {
  age : 100,
  like : true,
}

배열이 변경이 되어도 문제가 생기지 않는다는 말이 조금 부정확한 것 같아 덧붙이는데 위와 같이 재할당을 하게 되면 당연히 에러가 난다.

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

arr.push(6);

// (6) [1, 2, 3, 4, 5, 6]
console.log(arr);


const obj = {
  age : 99,
  like : true,
}

obj.age = 100;

// {age: 100, like: true}
console.log(obj);

이런 식으로 요소를 추가하거나 키의 값을 변경하는 것은 가능하다!


📚 참고한 글
👉 MDN : const
👉 const에 대한 오해


2022.5.11 ❤️‍🔥

const 로 선언한 변수의 값을 다른 값으로 재할당하면 보는 에러는 겨우 TypeError: Assignment to constant variable. 이런 건데...
왜 무서워서 let 을 썼는지 지금의 나로서는 잘 이해가 안 되지만, 앞으로 이런 식으로 정리하면서 나쁜 습관들을 고쳐나가보려고 한다.

돌파형? 인간이 될 때까지 아자아자! 🔥

이건 그냥 뿌듯해서 캡쳐했다.


혹시나 잘못된 정보가 있다면 댓글로 알려주세요 ! 저의 성장의 큰 도움이 될 것 같습니다.🌱

0개의 댓글