const, let, var의 차이

최근에 웹 개발 프로젝트를 진행하면서 전에 대학에서 들은 웹개발 수업의 자료들을 다시 복습했다

복습한 내용을 하나하나 다시 정리해보려 한다

오늘은 JavaScript의 const, let, var에 대해서 적어보려 한다

const

1. const는 상수를 선언할 때 사용한다.

2. 선언하고 한 번 할당된 값은 재할당(reassign)할 수 없다.

const x = 10;
x = 20; // 에러: x에 다른 값을 할당할 수 없음

const x = 10;
x = x + 10; // 이것도 불가능

하지만 변수가 다른 값을 참조할 수 없도록 하는 것이지,  변수가 가리키는 값 자체가 항상 변하지 않는다는 것은 아니다

한마디로 modification은 가능하지만 reassingment는 불가능하다

 

const x = {
   message: "Hello, World!",
   number: 11
}

x.number = 7 // 가능

 

이번에 Yootion(Notion 클론 코딩)을 만들면서 작성한 코드 중에 이런 코드가 있다

const [isResetting, setIsResetting] = useState(false);

여기서 const는 변수의 이름 isRestting와 setIsResetting이 다른 값으로 재할당 되지 않도록 만든다.

무슨 말이냐면 여기에 다른 값을 대입하는 것이 금지된다는 말이다.

 

여기서 React의 useState은 두 가지 값을 반환한다.

첫 번째는 현재 상태값, 두 번째는 상태를 변경하는 함수이다

 

여기서 isRestting은 현재 상태값이고

setIsRestting은 상태를 변경하는 함수다

 

setIsRestting 함수를 호출하면 isRestting 변수가 가리키는 값을 변경할 수 있다.

이때 const는 변수 이름을 변경하는 건 막지만, 값 자체를 변경하는 것은 허용한다.

그래서 이 코드를 실행하면 현재 상태값을 변경할 수 있다

setIsResetting(true);

 

let

let은 변수의 값을 언제든지 변경할 수 있게 해 준다.

하지만 block scope이기에 {} 외부에서는 접근할 수 없다.

if (true) {
  let x = 10;
  console.log(x); // 10이 나옴
}

console.log(x); // 에러: x는 정의되지 않음

 

변수의 값을 동적으로 변경할 때

let counter = 0;

function incrementCounter() {
  let counter = 0; // 이 변수는 함수 내부에서만 유효한 블록 스코프를 가짐
  counter++;
  console.log("Local Counter:", counter);
}

incrementCounter(); // Local Counter: 1
console.log("Global Counter:", counter); // Global Counter: 0

var

학교에서 교수님은 var을 사용하는 것을 지양하셨는데, 과제에서 var을 사용하면 점수를 깎으셨다

그 이유는 hoisting 때문인데 당시에는 이해가 쉽게 되지는 않아서 그냥 노트에만 적어놨는데 이번 기회에 정확하게 이해했다

hoisting이란 변수나 함수를 스코프의 상단으로 끌어올리는 것을 말한다.

(좀 더 정확하게 이해하고 싶다면 밑에 링크를 참고하면 좋을 것 같다)

https://www.w3schools.com/js/js_hoisting.asp

JavaScript Hoisting

사실 const, let, var 호이스팅이 되는 건 똑같다

근데 이게 왜 문제냐?

console.log(a); // undefined
var a = 5;

console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 10;

console.log(c); // ReferenceError: Cannot access 'c' before initialization
const c = 15;

이렇게 되는데 var을 사용하면 에러가 뜨지 않아 코드를 예측하기가 어렵다는 단점이 있다.

또한

var a = "Hello, World";
var b = 3;
if (b > 1) {
   var a = "Hi";
}
console.log(a) // Hi가 출력됨

만약에 다른 부분에서 a를 사용한다면 어떤 부분에서 값이 변경되고 문제가 나오는지 모르기에 내가 예상한 출력과 다르게 나올 수 있다. 

 

정리

일단 var은 사용하지 않는 것으로 하고

const는 값이 변경되지 않아야 하는 경우에 사용

let은 값이 동적으로 변경되어야 하는 상황에서 사용

 

참고하면 좋은 사이트

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const

const - JavaScript | MDN

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let

let - JavaScript | MDN

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var

var - JavaScript | MDN