
자바스크립트에서 변수를 선언할 때, const, let, var 중 하나로 선언할 수 있습니다.
그렇다면 const, lat, var의 차이점은 뭘까요? 함께 알아봅시다🥳
📚 변수를 선언하는 이유
차이점을 알아보기 전에, 왜 변수를 선언하는지 부터 알아봅시다🙌
만약 변수 선언 없이 3과8을 계산값을 보여달라는 요청을 받으면 다음과 같이 작성해야 합니다👇
console.log(3 + 8);
console.log(3 - 8);
console.log(3 * 8);
console.log(3 / 8);
그런데 갑자기 3과 8이 아니라 2와 5를 계산해달라고 합니다.🤮
그럼 우리는 총 8번을 수정해야하는데.. 이 얼마나 귀찮은 일인가요!
이때, 만약 변수를 선언했다면?
const a = 3;
const b = 8;
console.log(a + b);
console.log(a - b);
console.log(a * b);
console.log(a / b);
a와 b에 해당하는 숫자만 바꿔주면 2번의 수정으로 요청을 완료할 수 있습니다!
간단한 사칙연산이 아니라, 더 많은 연산이 들어갔다면 더욱 수월해지겠죠!
변수를 선언해야하는 이유가 납득이 가셨다면, 변수 선언 방식에 대해 알아봅시다🥳
🔎 const, let, var의 차이점
1️⃣ var
예전에는 var 하나만 가지고 변수를 선언했다고 합니다.
일단 var을 이용해 변수를 선언해봅시다.
var myName = "JOY";
var major = "Computer Science";
console.log(myName);
console.log(major);

결과값을 보면 두 변수 모두 문제없이 출력되는 것을 확인할 수 있습니다.
하지만 var에는 치명적인 단점이 있습니다.
var myName = "JOY";
console.log(myName);
var myName = "Ash";
console.log(myName);

이렇게 변수를 재선언하더라도 에러가 발생하지 않고 각각 다른 값으로 출력됩니다.
간단한 테스트시에 편리할 수 있겠지만 코드가 길어지고 복잡해진다면
어디에서 선언되었는지 알기 힘들고, 의도와 다르게 값이 바뀌는 경우가 생길수도 있습니다.😭😭
그래서 추가된 변수 선언 방식이 const와 let 입니다!
2️⃣ const와 let의 비교
const는 가장 많이 사용되는 변수 선언 방식입니다.
위와 같은 코드에서 변수 선언 방식만 바꿔보겠습니다.
const myName = "JOY";
console.log(myName);
const myName = "Ash";
console.log(myName);

(let으로 선언해도 동일한 결과를 얻을 수 있습니다!)
const와 let은 변수 재선언이 불가능하기 때문에,
실행 결과를 보면 myName이 이미 선언되었다는 에러 메세지가 나옵니다.(let도 마찬가지)
따라서 const, let으로 선언된 변수는 보기만 해도 바로 재선언이 불가능한 변수라는 것을 알수 있습니다.
그렇다면 둘의 차이점은 무엇일까요?
바로 let은 const와 달리 재할당이 가능하다는 것 입니다.
다음 코드를 봅시다👇
const myName = "JOY";
console.log(myName);
myName = "Ash";
console.log(myName);

다음과 같이 const로 선언된 변수의 값을 재할당 하게되면 에러가 발생하지만
let myName = "JOY";
console.log(myName);
myName = "Ash";
console.log(myName);

let으로 선언된 변수는 재할당된 값이 정상적으로 출력되는 것을 볼 수 있습니다!
📚 결론
- var: 재선언, 재할당 모두 가능(사용하지 않는것 추천)
- const: 재선언, 재할당 모두 불가능(오류 발생률이 가장 낮기 때문에 가장 많이 사용)
- let: 재선언 불가능, 재할당 가능(값을 업데이트해야하는 변수일 경우 사용)
지금까지 변수를 선언해야하는 이유와 변수 선언 방식에 대해 알아보았습니다.
여러분이 자바스크립트와 함께 떠나는 여정에 도움이 되었길 바라며 앞으로 공부하며 더 좋은 정보 가져오도록 하겠습니다🥕
(혹시 틀린정보가 있거나 궁금하신점 있으시면 댓글 남겨주세요 공부하는 개발자 꿈나무에게 큰 도움이 됩니다🤍)
JS시리즈는 본 강의의 내용을 바탕으로 작성되었습니다. (니꼬쌤 사랑해요🌹)
https://nomadcoders.co/javascript-for-beginners/lobby
Watch Now – 노마드 코더 Nomad Coders
nomadcoders.co
'JavaScript' 카테고리의 다른 글
| [JS] 데이터 정리하는 방법(Array) (0) | 2021.11.20 |
|---|---|
| [JS] Data Type(null과 undefined) (0) | 2021.11.02 |