[JavaScript ES6] 변수(variable)

✨변수란?

말 그대로 변수란 변하는 수입니다.

뭐가 변하냐면, 데이터가 변합니다. 데이터는 프로그래밍에서 기본입니다.

어떠한 정보든지 다 데이터(유저의 정보, 포스트, 댓글 등등)입니다.

이렇듯 수많은 데이터를 처리하기 위해서는 데이터를 저장하는 공간이 있어야 합니다.

이 공간은 메모리에 마련되고 이  공간이 바로 변수입니다.

⚙정리⚙

1. 변수는 변하는 수라는 말이다. (변하는 값은 Data)

2. 데이터 보관함 같은 것이다. (메모리에 Data 저장)

3. 보관함의 크기는 모두 동일하다.

4. 각 보관함의 이름이 변수명이다. (메모리 위치에 대한 레이블)

5. 이름을 통해 데이터 사용할 수 있다. (재활용, 재할당 등을 통해 재활용성을 높일 수 있다.)

---

🟠 변수의 기본적인 사용법

var a=1;
console.log(a);
a=10
console.log(a);//a는 어떠한 값을 담는 그릇이다.
//처음 변수 선언시 var을 선언하지만 그 후에는 변수 선언이 완료된 상태이기에 var선언을 생략해줘도된다.
a=1;
b=2;
console.log(a+b);

var first = "coding";
console.log(first+ "practice");
first = "코딩"
console.log(first+ "practice");

var a = "coding", b="every body";
console.log(a+b);

🙋‍♂️ Q.그럼 변수는 왜 사용하는 것일까?

👨‍🏫 A. 변수의 큰 장점은 바로 코드의 재활용성을 높여 주기 때문이다.

🟠변수의 효용성

var a = 100; :
//(상단)변수에서 변할 수 있는 영역

//(하단)변수에서 변하지 않는 영역
a= a + 10;
console.log(a);

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

a= a - 10;
console.log(a);

a= a * 10;
console.log(a);

---

❗ Javascript 변수 선언

변수의 선언은 var, const, let 키워드로 가능하며 ES6에서 const와 let이 추가되었다.

자바스크립트에서 변수 선언은 선언 → 초기화 단계를 거쳐 수행된다.

• 선언 단계: 변수명을 등록하여 자바스크립트 엔진에 변수의 존재를 알린다.
• 초기화 단계: 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화한다.

var 키워드를 이용한 변수 선언은 선언 단계와 초기화 단계가 동시에 진행되어,

변수 name에 암묵적으로 undefined를 할당해 초기화한다.

var kmj
console.log(kmj) // output: undefined
//반대로, console을 먼저 찍어도 반환 값이 undefined로 나온다.
console.log(kmj) // output: undefined
var kmj

이는 변수 선언이 런타임 시점에서 이뤄지는 것이 아니라 이전 단계에서 먼저 실행되기 때문이다.

자바스크립트 엔진은 소스코드를 한 줄씩 순차적으로 실행하기에 앞서,

변수 선언을 포함한 모든 선언문(ex. 변수 선언문, 함수 선언문 등)을 찾아내 먼저 실행한다.

 

즉, 변수 선언이 어디에 있든 상관없이 다른 코드보다 먼저 실행되는 특징을 호이스팅(hoisting)이라 한다.

변수 선언 뿐만 아니라, var, let, const, function, function*, class 키워드를 사용해

선언한 모든 식별자(변수, 함수, 클래스 등)는 호이스팅이 된다.

(이해가 안될 것이다. 자세한 내용은 글 하단부에서 천천히 다루도록 하겠다.)

 

📢변수선언3 가지 방법

자바스크립트에서는 var, let, const이 3가지 키워드로 변수 선언이 가능하다.
ES6에서 let, const 키워드가 도입되기 전에는 var 키워드가 유일한 변수 선언 방법이었다.

 

👀let 과 var

let형과  var형은 공통된 선언 특징을 가진다. 즉, var자리에 let을 치환해도 동일하게 작동한다.

🤔Q.그렇다면 이 둘의 차이점은 뭘까?

A.

var : 변수 중복 선언 허용(에러 발생 X), 함수 레벨 스코프, 변수 Hoisting
let : 변수 중복선언 금지, 블록 레벨 스코프, 변수 Hoisting이 발생하지 않는 것처럼 동작

둘의 차이점은 변수 중복선언, 스코프, Hoisiting에서 온다.

이제는 var을 사용하지 않고 let을 사용하는데 그 이유를 천천히 알아보자.

1. var (function scope)

var i;  // 선언, "undefined"이 저장됨
var sum = 0;  // 선언과 초기화
var i, sum; // 한 번에 여러 개의 변수를 함께 선언할 수 있음
var i=0, sum=10, message=”Hello”;  // 선언과 초기화를 동시에 해줄 수 있음
name = "javascript";  // 선언되지 않은 변수는 전역 변수가 됨

 

앞에서 발견한 var 키워드의 문제점은 크게 세 가지가 존재한다.

• 변수 중복 선언 가능하여, 예기치 못한 값을 반환할 수 있다.
• 함수 레벨 스코프로 인해 함수 외부에서 선언한 변수는 모두 전역 변수로 된다.
• 변수 선언문 이전에 변수를 참조하면 언제나 undefined를 반환한다.
• 이러한 문제점을 ES6에서 let과 const를 통해 해결했다.

⭐ 2. let (block scope)

lert은 키워드로 변수 중복 선언이 불가능하다. 그러나 재할당은 가능하다는 특징이 있다.

let name = 'yoon'
console.log(name) //출력:yoon

let name = 'min' //출력: Uncaught SyntaxError: Identifier 'name' has already been declared

name = 'min'
console.log(name) //출력: min

⭐ 3. const (block scope)

const와 let의 다른점은, const는 반드시 선언과 초기화가 동시에 진행되어야 한다.

const name; //출력: Uncaught SyntaxError: Missing initializer in const declaration
//선언
const name = 'yoon'
//초기화

const도 let과 마찬가지로 재선언이 불가능하다. 또한 재할당도 불가하다.

재할당의 경우, 원시 값은 불가능하지만, 객체는 가능하다.

const 키워드는 재할당을 불가능할 뿐, 절대 안 변한다는 것을 의미하지 않는다.

// const의 재할당
const name = 'yoon'
name = 'min' //출력: Uncaught TypeError: Assignment to constant variable.

// 객체(object)의 재할당
const name = {
  lastName: 'yoon',
}
name.lastName = 'min'
console.log(name) // output: { lastName: "min" }

---

➕Block level scope

let, const 키워드로 선언한 변수는

모두 코드 블록(함수, if, for, while 문 등)을 지역 스코프로 인정하는 블록 레벨 스코프를 따른다.

var 키워드를  let으로 바꾸면 아래와 같은 결과가 나온다.

var a = 1

if (true) {
  var a = 5
}

console.log(a) // output: 5
//---------------------------
let a = 1//전역 스코프

if (true) {
  let a = 5//지역 스코프
}

console.log(a) // output: 1

var 키워드로 선언한 경우 5가 나왔지만,

let 키워드로 선언한 경우 if 문 안에 있는 것은 지역 스코프를 가져 전역에서 console을 찍었을 경우,

전역에 있는 a가 결과 값으로 출력된다. (const 키워드도 let 키워드와 동일하게 동작한다)

---

🔵Hoisting

자바스크립트에서 함수 안에 있는 모든 변수를 함수의 가장 위로 올려 정의된 후 동작한다.

1. var

console.log(coding); // undefined
var coding;

변수 선언문보다 변수를 출력하는 코드가 앞에 있지만

출력 에러가 발생하지 않고 undefined(정의되지 않음)가 출력된다.

변수 Hoisting이 발생하면 아래의 코드와 같아진다.

var coding;
console.log(coding);

2. let

let 키워드로 선언한 변수는 선언 단계와 초기화 단계가 분리되어 진행된다.

런타임 이전에 자바스크립트 엔진으로 선언 단계가 먼저 실행된다.

초기화 단계가 실행되지 않았을 때 해당 변수에 접근하려고 하면 출력 오류가 나온다.

console.log(name) //출력: Uncaught ReferenceError: name is not defined

let name = 'yoon'

let 키워드로 선언한 경우, 런타임 이전에 선언되어

자바스크립트 엔진에 이미 존재하지만 초기화가 되지 않았기 때문에 name is not defined라는 문구를 출력한다.

3. const

const 키워드는 선언 단계와 초기화 단계가 동시에 진행된다.

console.log(name) //출력: Uncaught ReferenceError: Cannot access 'name' before initialization

const name = 'yoon'

const 키워드로 선언한 경우, 선언과 초기화가 동시에 이루어져야 하기 때문에 런타임 이전에는 실행될 수 없다.

따라서 초기화가 진행되지 않은 상태이기 때문에  Cannot access 'name' before initialization 에러 문구가 뜬다.

 

 🌟ES6에서 도입된 let, const, class는 변수 Hoisting이 발생하지 않는 것처럼 동작함

 

 

 

참고: 모던 자바스크립트 Deep Dive, 이웅모(2020)