[JavaScript] 변수와 상수 var, let, const

 

목차

• 변수
• 바람직한 변수명

 

 

 

 

모던 자바스크립트 기초 다지기를 위한 공부입니다. let, var, const 구분이 아직도 잘 안되고, 엉터리로 되어 있는 코드 처음부터 잘 만들고 싶어 짚어 넘어가 보려 합니다.  

 

 

 

변수

var

오래된 변수 선언 키워드로 현재는 잘 사용하지 않는 키워드이다. 예전에는 자바스크립트의 변수 선인이 var 로만 가능했었다.

var 로 변수 선언을 할 경우 가장 큰 특징은 중복 선언이 가능하다는 점이다.

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

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

var a = 30; 
console.log(a) // 결과 30

var 를 사용하면 중복으로 같은 변수명을 계속 선언하고 값을 넣어도 에러가 나지 않으며, 가장 마지막에 넣은 값으로 저장된다.

이처럼 중복 선언의 위험이 크기 때문에 단점으로 여겨져, ES6 이후 이 문제를 보완하기 위해 let 과 const 가 추가되었다. 

 

 

let

모던한 자바스크립트에서는 let 키워드를 사용하여 변수를 생성한다. let 은 블록 스코프의 범위를 가지는 지역 변수를 선언하며, 선언과 동시에 임의의 값으로 초기화할 수 있다. 

 

let 은 변수명을 중복으로 선언하면 아래와 같이 에러가 발생한다. 하지만 값을 재할당 하는 것은 가능하다. 

let a = 10; 
consolel.log(a) // 결과 10

// 중복 선언 불가 
let a = 20; 
console.log(a) // SyntaxError: Identifier 'a' has already been declared 

// 값을 재할당 하는 것은 가능
a = 30; 
consolel.log(a) // 결과 30

 

let 을 사용하면 블록 명령문이나 let 을 사용한 표현식 내로 범위가 제한되는 변수를 선언할 수 있다.

이는 let 이 var 키워드와 다른 점으로, var 는 변수를 블록을 고려하지 않고 현재 함수 (또는 전역 스코프) 어디에서나 접근할 수 있는 변수를 선언한다. 

function varTest() {
  var x = 1;
  if (true) {
    var x = 2; // 같은 변수!
    console.log(x); // 2
  }
  console.log(x); // 2
}

function letTest() {
  let x = 1;
  if (true) {
    let x = 2; // 다른 변수
    console.log(x); // 2
  }
  console.log(x); // 1
}

프로그램 최상위에서 사용할 경우 var 는 전역 객체에 속성을 추가하지만, let 은 추가하지 않는다.

var x = 'global';
let y = 'global';
console.log(this.x); // "global"
console.log(this.y); // undefined

 

 

const

변하지 않는 변수를 선언할 땐, let 대신 const를 사용한다. 상수는 재할당할 수 없으므로, 상수를 변경하려고 하면 에러가 발생한다. 

const myBirthday = '2022.05.24';
myBirthday = '2001.01.01'; // error, can't reassign the constant!

만약 변수 값이 절대 변경되지 않을 거라 확신하면, 값이 변경되는 것을 방지하면서 다른 개발자들에게 이 변수는 상수라는 것을 알리기 위해 const 를 사용하여 변수를 선언하면 된다. 

 

상수 중에는 코드가 실행되기 전부터 이미 그 값을 알고 있는 상수도 있고, 런타임 과정에서 계산되지만 최초 할당 이후 값이 변하지 않는 상수도 있다. 이러한 상수를 명명할 때, 구분하기 위해서 일반적인 방식으로 명명하는 것과, 대문자를 사용하여 명명하는 방식이 있다. 

// 일반적인 방식의 변수명 
const pageLoadTime = /* 웹페이지를 로드하는데 걸린 시간 */;

// 대문자 변수명
const COLOR_RED = "#F00";

pageLoadTime의 값은 페이지가 로드되기 전에는 정해지지 않기 때문에 일반적인 방식으로 변수명을 지었다. 하지만 이 값은 최초 할당 이후에 변경되지 않으므로 여전히 상수이다. 

대문자 상수는 '하드 코딩한' 값의 별칭을 만들 때 사용하면 된다. 

 

 

 

✨ 바람직한 변수명

변수명은 간결하고, 명확해야하며, 변수가 담고 있는 것이 무엇인지 잘 설명할 수 있어야 한다. 

 

아래는 변수 명명시에 참고하기 좋은 규칙이다. 

• userName 이나 shoppingCart 처럼 사람이 읽을 수 있는 이름을 사용하자. 
• 무엇을 하고 있는지 명확히 알고 있지 않을 경우 외에는 줄임말이나 a, b, c 와 같은 짧은 이름은 피하도록 하자.
• 최대한 서술적이고 간결하게 명명해야 한다. data와 value는 나쁜 이름의 예시이다. 이런 이름은 아무것도 설명해주지 않는다. 코드 문맥상 변수가 가리키는 데이터나 값이 아주 명확할 때에만 이런 이름을 사용하도록 하자.
• 자신만의 규칙이나 소속된 팀의 규칙을 따르자. 만약 사이트 방문객을 'user'라고 부르기로 했다면, 이와 관련된 변수를 currentVisitor나 newManInTown이 아닌 currentUser 나 nuewUser 라는 이름으로 지어야 한다.

 

 

 

 

 

 

 

 

※ 참고자료

https://ko.javascript.info/

모던 JavaScript 튜토리얼

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference

JavaScript 참고서 - JavaScript | MDN