[Javascript] 변수선언 - var / let / const 차이점

seoyeon·2022년 12월 15일
2

Javascript 공부하기

목록 보기
1/20

1. 변수란?

데이터를 담아두고 꺼내 쓰는 상자 라고 생각하면 됩니다.
데이터를 담을때 상자에 이름을 붙여야 하는데 그것을 변수 선언 이라고 하죠!

2. 변수 선언 키워드

이름을 붙여주기 위해선 var , let , contst 이 3가지 키워드로 선언이 가능합니다.

var name;
let age;
const gender
console.log(gender) // undefinde

이렇게 키워드 변수이름 으로 선언할 수 있습니다.
위와 같이 값을 지정하지 않으면 변수에는 기본적으로 undefinde 값이 들어가게 됩니다.
그럼 3가지 키워드의 차이점은 무엇일지 지금부터 알아보겠습니다!

❗ 들어가기전에!

할당에 대해 간략하게 설명하자면

var name;
name = "Jane";

만들어 놓은 변수에 Jane 이라는 값을 집어넣는것을 변수에 값을 할당한다고 합니다.

할당과 선언을 동시에 할 수도 있습니다.

var name = "Jane";

이렇게 하면 변수를 선언함과 동시에 값도 할당하게 됩니다.

이제 진짜 3가지 키워드들을 만나러 갑시다! 🛵

1) var : 재할당, 재선언이 가능

var a 
a = 10;
console.log(a); // 10

a = 20;
console.log(a); // 20

→ 재할당 ⭕

var a = 20;
console.log(a); // 20

var a = 50;
console.log(a); // 50

→ 재선언 ⭕

  • var 로 선언한 변수는 동일한 이름으로 여러번 중복해서 할당 또는 선언이 가능합니다.
  • 데이터를 명확하게 구분하기 위해 변수를 사용하는데 이와 같은 특징은 에러를 발생시킬 가능성이 높습니다.
  • 이를 보완하기 위해 ES6부터 letconst 키워드가 추가되었습니다.

2) let : 재할당 가능, 재선언 불가능

let a
a = 10;
console.log(a); // 10

a = 20;
console.log(a); // 20

→ 재할당 ⭕

let a = 50;
console.log(a);
// Uncaught SyntaxError: Identifier 'a' has already been declared

→ 재선언 ❌

  • var 와 다르게 let 은 해당 변수가 이미 선언되었다는 에러 메시지를 출력합니다.
  • 이처럼 재할당은 가능하지만 재선언은 불가능합니다.

3) const : 재할당, 재선언 불가능

const a
a = 10;
console.log(a);
// Uncaught SyntaxError: Missing initializer in const declaration

❗const는 반드시 선언과 할당이 동시에 이루어져야 합니다!

const a = 10;
console.log(a); // 10

a = 20;
console.log(a);
// Uncaught TypeError: Assignment to constant variable.

→ 재할당 ❌

const a = 10;
console.log(a); // 10

const a = 20;
console.log(a);
// Uncaught SyntaxError: Identifier 'a' has already been declared

→ 재선언 ❌

  • const 는 constant(상수)의 약자로 바뀌지 않는 일정한 값을 뜻합니다.
  • 불변의 값으로 재할당도 재선언도 불가능합니다.

3. 변수명 주의사항

  1. 변수명은 동사가 아닌 명사 로 사용합니다.
  2. 첫 글자는 숫자 사용이 불가능 합니다.
  3. 예약어 를 제외한 변수명을 선언해야 합니다.
    ex) class, import, default, return, new 등
  4. 여러 단어가 조합되는 경우 표기법을 통일해서 사용 합니다. 일반적으로 카멜표기법 을 많이 사용합니다.
    1) 카멜표기법(camelCase) : 띄어쓰기 대신 대문자로 구분
    2) 파스칼표기법(PascalCase) : 첫 글자도 대문자로 구분
    3) 스네이크 표기법(snake_case) : 띄어쓰기 대신 언더바로 구분

정리

재할당재선언
varOO
letOX
constXX

원하는 이름으로 변수를 선언하되 규칙은 지키자!
키워드는 var , let , const 3가지이고 차이점을 표로 정리해 봤다.
평소에는 var를 자주 썼는데 최근부터 let 또는 const로 쓰는 습관을 들이는 중이다.
기초적인 거라도 차근차근 쌓아가야지! 빠샤 👊👊


📄 참고자료

0개의 댓글