JavaScript_const, 변수와 상수 사이

📚 const (상수 만들 때 사용)

"변수를 const로 선언하세요."
항상 상과 셈 수라는 한자로 만들어진 상수 const 키워드를 가지고 변수를 만드는 이유는 무엇일까?

검색기능을 개발할 때 검색창에 키워드를 입력받으면 키워드 부분은 변수이다. 그러나 검색 버튼을 눌러 검색을 할 때는 중간에 키워드가 변할 일이 없고, 변해서도 안된다. 왜냐하면 이 키워드를 기준으로 필요한 정보를 찾아야 하기 때문이다. 그래서 검색기능이 동작하는 시점에서는 키워드를 상수로 볼 수 있다.

많은 프로그램에서 변수가 동작하는 시점에서는 상수로 쓰이는 경우가 많다.

우리가 작성하는 코드 속에 변하게 되는 값이 많을 수록 코드의 일관성을 유지하기가 어렵다. 변수의 값이 재할당되면 재할당 되기 이전의 변수값과 이후의 변수값이 서로 다르기 때문에 코드의 전체적인 흐름에도 영향을 미치게 된다. 또한 코드를 읽는 사람 입장에서도 변수가 언제 바뀔지 모른다는 불안함을 줄 수도 있기에 코드를 일관되고 안전하게 작성하기 위해 const 키워드로 변수를 작성하기 시작했다.

📚 let과 const의 차이?

const는 재할당이 불가능하다. 이러한 특성 때문에 PI와 같이 변하지 않는 고정된 값에 상수(constant)를 만든다.

let x = 1;
console.log(x); // 1
x = 2;
console.log(x); // 2

const y = 3;
console.log(y);
y = 4;  // 오류 발생
console.log(y);

📚변수와 상수 구별

let	const
변수	상수
(variable)	(constant)
myName (소문자 & camel case)	MY_NAME (대문자 & snake case)

📌주의사항

할당연산자로 값을 변경하면 값을 재할당하는 것처럼 오해할 수 있다. 그러나 객체의 property나 배열의 요소들이 변경되면 변수가 가진 주소값을 변경하는게 아니기때문에 const 키워드로 변수를 선언했다고 하더라고 변수의 값이 충분히 변할 수도 있다.

📚문제 풀이

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

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

console.log(team1); // [ 'Drum', 'Bass', 'Piano' ]
console.log(team2); // [ 'Drum', 'Bass', 'Piano' ]

1번 줄에서 let 키워드로 변수 team1을 선언하고, 배열 하나를 할당해줬다. 그리고 2번 줄에서 const 키워드로 변수 team2를 선언하고, team1을 할당했다. 배열은 참조형 값이기 때문에, 이때 주소 값이 복사되어서 일단 team1과 team2는 서로 같은 배열을 가리키게 된다.

4번 줄에서 splice 메소드를 통해 team1의 값을 변경하고 있는데, 2번 인덱스에 있는 값을 'Trumpet' 으로 수정했다. 그러면 현재까지, team1과 team2가 함께 가리키는 배열의 모습은 [ 'Drum', 'Bass', 'Trumpet' ]이 된다.

다음으로 5번 줄에서는 const 키워드로 선언한 변수 team2의 값을 변경한다. const 키워드로 변수를 선언하게 되면 값을 재할당할 수 없지만, 할당된 값이 객체나 배열일 경우 메소드를 통해서 그 값을 변경할 수가 있다. 때문에 제시된 코드는 아무런 Error 없이 실행되서, 2번 인덱스 값이 'Piano'로 변경된다.

team1, team2가 같은 배열을 가리키고 있기 때문에, 결과적으로 두 변수가 가리키는 배열의 모습은 [ 'Drum', 'Bass', 'Piano' ]이 된다.