[Javascript] 변수 (let, const)

 

⁂ 코딩앙마 자바스크립트 기초 강좌 정리 ⁂

 

 

 

 

 

💡 변수 (Variable)

자바스크립트에서 변수는 어떤 값을 저장하기 위한 이름을 가진 공간이다.

쉽게 비유하면 '라벨이 붙은 상자'라고 생각하면 된다.

• 상자 안에는 숫자, 글자, 불린값(true/false) 같은 데이터(값)를 넣을 수 있고,
• 그 상자를 꺼내 쓸 때는 라벨(변수명)로 부른다.

---

 

변수는 아래와 같이 어떤 정보에 이름을 붙여서 저장하고 싶을 때 사용한다.

name = "Jenny;
age = 30;

 

Jenny는 따옴표로 감싸져 있다. 자바스크립트에서 문자열(String)은 항상 따옴표로 감싸줘야 한다. ' ' (작은따옴표), " " (큰따옴표) 다 상관없지만 따옴표로 감싸주지 않는다면 에러가 발생한다. 그리고 가끔 변수를 선언하다 보면 원인을 알 수 없는 에러가 발생하는 경우가 있다.

class = "수업"   // 에러!❌

 

이유는, class는 Javascript에서 이미 사용하는 단어이기 때문에 변수명으로 사용할 수 없다. 이런 단어들을 예약어라고 한다.

자바스크립트 예약어는 언어에서 특별한 의미를 가지도록 미리 예약된 단어로, 변수, 함수, 또는 레이블 이름으로 사용할 수 없다.

( 자바스크립트 예약어 - https://www.w3schools.com/js/js_reserved.asp )

 

 

아래처럼 변수를 선언하고 콘손을 찍어보면 출력은 잘 된다.

name = "Jenny;
age = 30;
console.log(name)   // Jenny

 

그런데 사실 이렇게 변수를 선언하는 것은 상당히 위험하다.

name과 age 이 변수명이 유일하다는 보장이 없기 때문이다. 혼자 작업하는 작은 프로젝트라면 괜찮다.

하지만 여러 개발자들이 만드는 큰 프로젝트일 때 다른 개발자가 나와 같이 name 변수명을 사용한다면?

마지막으로 선언된 name으로 덮어 써지게 된다.

 

이를 방지하기 위해 두 가지 키워드가 존재한다.

let과 const이다.

 

위의 상황을 let을 이용해 선언을 해보겠다.

let name = "Jenny";
let name = "Hanni";

🔺 Uncaught SyntaxError: Identifier 'name' has already been declared 🔺

이미 'name'은 선언되어 있다고 구문오류가 뜬다. 그럼 다른 개발자가 이미 사용된 변수명이란 것을 알고 사용하지 않을 것이다.

 

사실 let은 한 번 선언 후에 다른 값으로 바꿀 수 있다. 아래처럼 말이다. 최초로 선언하는 모든 변수에 let을 붙인다면,

이미 사용하고 있을 때 에러를 통해 알 수 있다.

let grage = "F";
grage = "A+";

 

---

 

const는 절대로 바뀌지 않는 상수를  입력할 때 사용한다. const로 선언된 변수를 바꾸려고 하면 에러가 발생한다.

그래서 보통 '파이( π ), 최댓값, 생일'등 바뀌지 않는 값을 입력할 때 사용하고 대문자로 선언하는 게 좋다. (다른 개발자에게 상수라는 것을 알리기 위해)

const PI = 3.14;
const SPEED_LIMIT = 50;
const BIRTH_DAY = '2025-09-16';

 

 

---

 

 

⚫ 마무리

Javascript에서 변수를 선언할 때는.

변하지 않는 값은 const, 변할 수 있는 값은 let으로 선언한다. 

• 변수는 문자와 숫자, '$'와 '_ (언더스코어)' 만 사용한다.
  ex)
  const RESULT_SCORE = "···";
  let _ = 1;
  let $ = 3;
  
• 첫 글자는 숫자가 될 수 없다.
  ex) let 1stGrage = 'A+'; ❌
• 예약어는 사용할 수 없다.
  ex) let let = 100;
• 가급적 상수는 대문자로 사용한다.
  ex) const MAX_SIZE = 99;
• 변수명은 읽기 쉽고 이해할 수 있게 선언하는 게 좋다.
  ex) let a = 1; ❌   let userNumber = 3; ⭕

 

 

🟡 TIP

우선 const로 모든 변수를 선언하고, 나중에 변할 수 있는 상수만 let으로 다시 바꿔준다.