[자바스크립트] 변수 선언과 할당 (var, let, const의 차이, 변수명 규칙)

1. 변수(variable)

변수키워드 변수명 = 데이터;
const myName = 'maple';

• 데이터를 저장하고 참조(사용)하는 데이터의 이름
• 컴퓨터가 데이터를 담아 두기 위해서 사용하는 공간
• 계속 변하는 값이면서, 그 값을 저장하는 공간
• 변수에 데이터를 할당할 때는 '='이라는 기호를 사용
• 수학의 '같다'의 의미와는 다르게 기호 왼쪽(변수이름)에 오른쪽의 정보(내용)을 넣는다는 의미

 

2. 변수 선언과 할당

변수선언

변수키워드 변수명;
var age;

변수할당

변수 선언이 미리 되어있어야 한다.

변수명 = 값;
age = 10;

변수 선언과 할당 동시에 하기

변수키워드 변수명 = 값;
var age = 10;

 

3. 변수명 규칙

1. 변수명 첫글자로 숫자가 올 수 없다

2. 변수명 첫글자로 언더바(_), $ 등의 문자는 올 수 있다

3. 변수명은 대문자와 소문자를 구분한다 예) myName과 myname은 다른 변수다

4. 변수명은 예약어와 같을 수 없다 예) if, new, typeof

* 예약어(reserved word): 자바스크립트에서 이미 변수명으로 설정된 단어

5. 변수명에는 언더바(_)는 올 수 있지만 하이픈(-)은 올 수 없다

 

4. 컴퓨터가 변수에 저장된 데이터를 기억하는 방법

컴퓨터의 메모리에 데이터를 저장해놓고 변수가 해당하는 메모리 주소를 가리키게 한다

예시

1. 변수 a에 숫자형 데이터 1이 할당되었다

메모리 주소 M1에 숫자형 데이터 1이 저장되고 변수 a는 메모리 주소 M1을 가리킨다

2. 변수 b에 변수 a를 할당하였다

변수 a가 가리키는 메모리 주소를 변수 b도 가리키게된다

결과적으로 변수 b에는 숫자형 데이터 1이 할당된다

3. 변수 b에 새로운 값 7을 다시할당하였다

메모리 주소 M2에 숫자형 데이터 7이 저장되고 변수 b는 메모리 주소 M2을 가리킨다

 

5. 변수를 선언할 때 사용되는 3가지 키워드

1. var

• 재선언, 재할당 가능
• 함수 레벨 스코프: 함수 밖에서 사용 불가 (var가 유일하게 벗어날 수 없는 스코프가 함수)

var a = 10;

// 재선언 가능
var a = 20;

// 재할당 가능
a = 30

var의 단점

1) var hoisting: 변수 선언이 코드 최상단으로 올라가는것

일반적인 프로그래밍 언어는 1. 변수 선언 2. 변수에 값을 할당 3. 변수값을 출력의 순서로 이루어진다. 자바스크립트에서 var 키워드를 사용해 데이터를 할당하면 호이스팅이 가능해 다음과 같은 문제점이 생긴다.

// var
console.log(age); // 변수값을 할당하기 전에 출력이 가능하다
age = 24; // 변수선언을 하기 전에 값을 할당 할수 있다
var age;

// let
console.log(job); // Error
job = "programmer";
let job;

2) block scope 불가: var는 블럭코드안에서 변수를 선언했음에도 불구하고 block 밖에서 출력이 가능하다

블록 레벨 스코프: 함수, if문, for문, while문, try/catch문 등

// var
{
    var color = "blue"; 
}
console.log(color); // blue 출력

// let
{
    let fruit = "apple"; 
}
console.log(fruit); // Error: fruit is not defined

2. let

• ES6에 새로 소개된 변수 키워드
• 재선언 불가, 재할당 가능
• 블록 레벨 스코프

let a = 10;

// 재선언 불가능
// 에러발생
let a = 20;

// 재할당 가능
a = 30

3. const

• ES6에 새로 소개된 변수 키워드
• 변수가 아니라 절대 변하지 않는 값 상수다
• 재선언, 재할당 불가
• 블록 레벨 스코프

재선언, 재할당 불가

const로 변수를 선언하면 값을 다시 할당할 수가 없다. const 변수를 다른 값으로 다시 할당하려고 하면 TypeError가 발생한다.

변수명을 선언할 때 값도 함께 할당해야 한다. 값 없이 변수를 선언하려고 하면 SyntaxError가 발생한다.

const a = 10;

// 재선언 불가능
// 에러발생
const a = 20;

// 재할당 불가능
// 에러발생
a = 30

→  변수를 선언할 때는 나중에 그 변수에 값을 다시 할당할 일이 있는지 고려해야 한다. 변수에 값을 다시 할당해야 할 경우 let을 사용하고, 고정된 값을 할당하려면 const를 사용하자.

 

6. 함수 레벨 스코프 vs 블록 레벨 스코프

블록 레벨 스코프 (let, const)

• 같은 블록 { … }내에서 유효한 스코프를 의미한다. 여기서 “유효하다”라는 것은 “참조(접근)할 수 있다”라는 뜻이다 (블록 밖에서 사용 불가)
• 블록 레벨 스코프인 const, let으로 정의된 값은 같은 블록안에서만 접근할 수 있다
• 블록 레벨 스코프: 함수, if문, for문, while문, try/catch문 등

함수 레벨 스코프 (var)

• 같은 함수내에서 유효한 스코프를 의미한다 (함수 밖에서 사용 불가)
• 함수 레벨 스코프인 var로 정의된 값은 같은 함수안에서 접근할 수 있다

예제

function scope() {
  var a = 0;
  let b = 0;
  const c = 0;
  console.log(a, b, c);
  // 0, 0, 0
  if(a === 0) {
    var a = 1;
    let b = 1;
    const c = 1;
      console.log(a, b, c);
      // 1, 1, 1 
  }
  console.log(a, b, c);
  // 1, 0, 0
}

// 함수실행
scope();

코드해석

• 블록 레벨 속성인 let, const로 선언한 변수 b, c는 다른 블록에 있으면 새로운 값이다
• 즉 scope 함수에 선언된 b, c와 if문에 있는 b, c는 다른 블록에 선언된 값이므로 각기 다른 변수다
• 함수 레벨 속성인 var로 선언한 변수 a는 같은 함수 내에서 선언되면 같은 변수다
• 즉 scope 함수에 선언된 a와 if문에 있는 a는 같은 함수에 선언된 값이므로 같은 변수다

 

자바스크립트에서 변수를 선언할 때 2가지 데이터 타입

1. Mutable data type: 값이 계속 변경될 수 있는 데이터 타입 i.e.) let keyword를 사용한 변수
2. Immutable data type: 값이 변경될 수 없는 데이터 타입 i.e.) const keyword를 사용한 변수