들어가며

자바스크립트의 변수에 대해서 알아보자! ES6에서 새롭게 등장한 let과 const와 기존에 사용되었던 var에 대해서도 알아보자!

📕변수란?

• 변하는 값을 저장하는 공간(데이터 공간)
• 값을 위치를 가리키는 상징적인 이름
• 메모리 공간 식별
  
  

더 이야기하자면....

• 변수를 통해서 안전하게 값에 접근
• 중복을 줄이려고 사용(변수만 수정)
• 프로그램 실행 도중에 계속해서 바뀔 수 있는 이름 붙은 저장소
• 변수를 사용하려면 반드시 선언
  
  

프로그래밍 언어는 기억하고 싶은 값을 메모리에 저장하고, 저장된 값을 읽어 들여 재사용하기 위해 변수 메커니즘을 제공한다. 즉 변수는 값을 저장하고, 참조하고, 값의 위치를 가리킨다.

2가지 종류의 변수

변수를 선언하고 사용할 때 변수가 적용되는 범위(스코프)가 다르다. 자바스크립트 함수에서 변수를 사용할 때는 이영역에 주의해야 한다.

전역변수

• 애플리케이션 어디에서도 값을 불러올 수 있는 변수
• 적용 범위를 제한하지 않고 스크립트 전체에서 사용 가능
• 블록 밖에서 사용
• 전역변수는 최소한으로 사용하는 것이 좋다. 왜냐하면 프로그램 어디서든 접근할 수 있기 때문에 예상치 못한 곳에서 값이 바뀌기 때문이다.

지역변수

• 블록 안에서만 유효한 변수
• 외부에서 참조 불가능
• 블록 안에서만 선언하고, 블록 안에서만 사용
• 블록 밖에서 사용하면 오류 발생

변수에 여러 개의 값을 저장하는 방법?

• 여러 개의 값을 저장하려면 여러 개의 변수를 사용 해야 한다.
• 배열이나 객체 같은 자료구조를 사용하면 관련 있는 여러 개의 값을 그룹화해서 하나의 값처럼 사용할 수 있다.

let userId = 1;
let userName = 'Lee';
// 배열, 객체로 그룹화
let user1 = { id: 1, name: 'Lee' };
let users = [
  { id: 1, name: 'Lee' },
  { id: 2, name: 'Kim' }
];

식별자

• 값을 구별해서 식별할 수 있는 고유한 이름
• 식별자는 값이 아니라 메모리 주소를 기억
• 선언에 의해 자바스크립트 엔진에 식별자 존재를 알린다.

식별자 네이밍 규칙

• 특수문자 X (_, $ 사용가능)
• 대소문자 구별
• 문자, 숫자
• 숫자 시작 X
• 예약어 X
• camelCase 사용
• 쉽게 이해할 수 있도록 의미를 명확히 표현

📕변수 생성 단계

1. 선언 단계
2. 초기화 단계
3. 할당 단계

변수 선언

변수 선언이란 변수를 생성하는 것을 말한다. 값을 저장하기 위한 메모리 공간을 확보하고, 변수 이름과 확보된 메모리 공간의 주소를 연결해서 값을 저장할 수 있게 해준다. 변수를 사용하려면 반드시 선언이 필요하다. 변수를 선언할 때는 let과 const 키워드를 사용한다.

변수 선언 2단계

1. 선언 단계: 변수 이름을 등록해서 자바스크립트 엔진에 변수의 존재 알림
2. 초기화 단계: 초기화란 변수가 선언된 이루 최초로 할당하는 것을 말한다. 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화한다.

let user

• 변수를 선언하고 값을 할당하지 않았다. 따라서 변수 선언에 의해 확보된 메모리 공간은 비어있을 것으로 추측할 수 있다. 하지만 메모리 공간에는 자바스크립트 엔진에 의해 undefined라는 것을 암묵적으로 할당되어 초기화된다. 이것은 자바스크립트으 독특한 특징이다.
  
• 변수를 사용하려면 반드시 선언이 필요하다. 선언하지 않은 식별자에 접근하면 ReferenceError(참조 에러)가 발생한다. 자바스크립트 엔진이 등록된 식별자를 찾을 수 없을 때 발생하는 에러다.
  
  

값의 할당

let score; // 변수 선언
score = 80; // 값의 할당

let score = 80; // 변수 선언과 값의 할당 - 문으로 단축 표현

• 변수 선언은 런타임 이전에 먼저 실행되지만, 값의 할당은 소스코드가 순차적으로 실행되는 시점인 런타임에 실행된다.
• 변수의 선언과 값의 할당을 2개의 문으로 나누어 각각 실행한다. 따라서 변수에 undefined가 할당되어 초기화되는 것은 변함이 없다. 변수에 값을 할당할 때는 이전 값 undefined가 저장되어 있던 메모리 공간을 지우고, 그 메모리 공간에 할당 값을 새롭게 저장하는 것이 아니라 새로운 메모리 공간을 확보하고 그곳에 할당 값을 저장한다는 점 을 주의하자.

값의 재할당

재할당이란?

• 이미 값이 할당되어 있는 변수에 새로운 값을 또다시 할당하는 것을 말한다.
• 변수에 저장된 값을 다른 값으로 변경한다.

let score = 80; 
score = 90; // 값의 재할당

📕const, let, var

💡 ES6에서 let과 const 키워드를 도입한 이유는 var 키워드의 여러 단점을 보완하기 위해서다. 어떻게 다른지 살펴보자!

const

• 상수 선언
• 재할당 불가능 ❌
• 중복 선언 불가능 ❌
• 블록 레벨 스코프
• 선언 이후에 값을 바꿀 수 없기 때문에 선언과 초기화를 같이 해야한다.
• 항상 대문자로 표현하고, 단어와 단어 사이는 (_)로 분리한다.
• 재할당이 필요 없는 경우 안전하게 const를 사용하는 것이 좋다.
  
  

let

• 변수 선언
• 재할당 가능 ⭕
• 중복 선언 불가능 ❌
• 블록 레벨 스코프
• 선언 이후에 재할당 가능하기 때문에 선언과 초기화 따로 가능
• 재할당이 필요한 경우 let을 사용한다.
  
  

var

• 재할당 가능 ⭕
• 중복 선언 가능 ⭕
• 함수 레벨 스코프
• 블록의 영향을 받지 않고 전역에서 참조 가능
• 하지만 함수 안에 선언하면 함수 내에서만 유효

const로 선언된 Object 값 변경

Q. const로 선언된 Object의 값 변경은 어떻게 하는 걸까?

위에 내용에 의하면 const는 재할당하지 못하는 상수다. 하지만 값 변경은 가능하다. 자체 레퍼런스 변경은 불가능하지만 레퍼런스가 가리키고 있는 오브젝트 내부 내용은 변경 가능하다.

const dog = {
	name: ‘kongduboo’,
	age: 7,
}

dog.name = "Kongbeezy"
age: 9,
console.log(dog); // { name: "kongbeezy, age: 9 }

📌 차이점 정리

• var는 함수 레벨 스코프를 가지고, 재할당과 중복 선언 모두 가능
• let은 블록 레벨 스코프를 가지고, 재할당 가능, 중복 선언 불가능
• const는 블록 레벨 스코프를 가지고, 재할당과 중복 선언 모두 불가능
• 함수 레벨 스코프의 경우 함수 내부에서 선언한 변수만 지역 변수가 되고 함수 외부에 선언하면 전역 변수가 된다. 전역 변수를 남발할 가능성이 있고, 의도하지 않은 재할당이 발생할 위험이 있기 때문에 사용하지 않는 것이 좋다.
• 블록 레벨 스코프의 경우 블록 내부에 선언한 변수는 블록 내부에서만 참조 가능하고, 외부에서는 참조할 수 없다.
• 재할당이 필요 없는 경우 안전하게 const를 사용하는 것이 좋다.
• 재할당이 필요한 경우 let을 사용한다.

📌 용어

• 변수 이름(식별자): 메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름
• 변수값: 변수에 저장된 값
• 할당(대입, 저장): 변수에 값을 저장하는 것
• 참조(레퍼런스): 변수에 저장된 값을 읽어 들이는 것

참고

자바스크립트 딥 다이브 (이웅모)