(40) JavaScript - 자료형(심화) / const, 변수&상수 간단이론

다른 사람들이 작성한 코드를 보면 대부분 변수 선언을 const로 사용하는데,

애초에 자바스크립트에서 변수 선언은 const로 선언하라고 권장하고 있다.

분명 상수를 만들 때 사용한다고 했었는데

왜 갑자기 변수 선언에 let 이 아니라 const를 사용하라고 하는 걸까?

 

일단 const와 let의 큰 차이점은 재할당이 불가능하다는 점이다.

▲ let으로 선언한 변수는 재할당이 가능해서 계속 값을 바꿀 수 있지만

const로 선언한 다음에 새로운 값을 할당하려고 하면 오류가 발생하는 것을 볼 수 있다.

일단 이 오류는 넘어가고..

---

평소 작성하는 코드 속에 변하게되는 값이 많을수록

코드의 일관성을 유지하기가 어렵다.

위와 같이 변수에 값들이 재할당되면, 그 시점 기준으로

재할당 이전의 변수와 이후의 변수의 값이 서로 다르기 때문에

코드의 전체적인 흐름에도 영향을 미치게된다.

짧으면 그나마 볼만하지만 코드가 길면 나중에 각 변수들이 어떤 값을 가지고 있을지 추적하기 매우 힘들다.

그 뿐만 아니라 실제로 값이 변하지 않더라도 언젠가 변할 수 있다는 가능성 또한 존재한다.

 

그렇기 때문에 코드를 좀 더 일관되고 안전하게 작성하고자 하는 취지에서 

const 키워드로 변수를 사용하기 시작한 것이다. 

 

그렇다면 진짜 상수와 변수는 어떻게 구분할까 싶은데

변수와 상수는 키워드 뿐만 아니라 이름을 짓는 방식으로도 구분할 수 있다.

변수이름은 기분적으로 영어 소문자로 작성하고(ex:name)
여러 단어들이 조합될 때 두 번째로 오는 단어부터는
각 단어의 첫 문자를 대문자로 표기하는 방식으로(ex: myName)

상수 이름은 기본적으로 영어 대문자로 작성하고 (ex: NAME)
여러 단어들이 조합될 때는 밑줄로 단어들을 구분한다. (ex:MY_NAME)

 

실제로 일관된 값으로 상수가 필요할 때에는 이름을 명확하게 상수로 표현해 주는 것이 좋은 습관이다.

---

 const x = {
    name : '섭이'}
    x.year = 2024;

 

마지막으로, 객체는 변수의 주소값이 저장된다고 했을 때

할당 연산자로 값을 변경하면 값을 재할당 하는 것처럼 잘못 알 수도 있다.

 

하지만 객체 프로퍼티나 배열의 요소들이 변경되는 경우는  

변수가 가진 주소값을 변경하는게 아니기 때문에 

 

const 키워드로 변수를 선언했다고 하더라도 

변수의 값이 충분히 변할 수 있다는 점을 꼭 알고 있어야 한다.

 

이해했는지 다시 한번 돌아보자

---

▼ 아래의 코드 결과 맞추기

let x = 1;

x = 4;

const y = x;

y = 3;
x = 2;

console.log(x);

 

▷ 정답 맞추기

const 키워드로 선언한 변수는 재할당을 할 수가 없다.

y = 3에서 값을 재할당하려는 순간 에러가 발생하기 때문에TypeError가 발생한다.

---

▼ 아래의 코드 결과 맞추기

let team1 = ['Drum', 'Bass', 'Saxophone'];
const team2 = team1;

team1.splice(2, 1, 'Trumpet');
team2.splice(2, 1, 'Piano');

console.log(team1);
console.log(team2);

 

▷ 정답 맞추기

let 키워드로 변수 team1을 선언하고, 배열하나를 할당했다

그리고 const 키워드로  변수 team2를 선언하고, team1을 할당했고

배열은 참조형 값이기 때문에, 이때 주소 값이 복사되어서

일단 team1과 team2는 서로 같은 배열을 가리킨다.

 

그다음 splice 메소드를 통해 team1의 값을 변경하고 있는데,

2번 인덱스에 있는 값을 'Trumpet' 으로 수정하고 

team1과 team2가 함께 가리키는 배열의 모습은 [ 'Drum', 'Bass', 'Trumpet' ]이다.

 

다음으로 const 키워드로 선언한 변수 team2의 값을 변경하고 있는데,

const 키워드로 변수를 선언하게 되면 값을 재할당할 수 없지만,

할당된 값이 객체나 배열일 경우 메소드를 통해서 그 값을 변경할 수가 있다.

 

그렇기 때문에 문제 없이 실행되어,

2번 인덱스 값이 'Piano'로 변경이 되고.

team1, team2가 같은 배열을 가리키고 있기 때문에,

결과적으로 두 변수가 가리키는 배열의 모습은 [ 'Drum', 'Bass', 'Piano' ]이 된다.