[자바스크립트 문법] 자바스크립트 변수, 변수 선언 및 사용

안녕하세요~  이번에는 자바스크립트 기초 문법에 대한 변수 선언과 변수 사용에 대해 알아보겠습니다. 

서론

오늘 알아볼 내용은 변수입니다. 자바스크립트에서 변수란 무엇인지, 그리고 변수를 선언하는 방식과 변수를 사용하는 방법을 예시코드로 작성하면서 설명해드리겠습니다. 

목차

1. 변수란?

2. 변수 선언 ( var, let , const )
2-1 변수 선언 ( var 예약어 사용 )
2-2 변수 선언 ( let 예약어 사용 )

2-3 변수 선언 ( const 예약어 사용 )
2-4 예약어 var, let , const 차이점 

3. 변수 사용 

본론

1. 변수란?

자바스크립트에서 변수는 프로그램 실행 중에 값을 저장하는 데 사용되는 공간이라고 생각하면 됩니다.  즉, 데이터를 담는
상자 라고 이해하시면 더 편합니다. 

2. 변수 선언 

자바스크립트에서 변수를 선언하는 방법은  세 가지 예악어인 (var, let ,const) 로 선언할 수 있습니다.
먼저 var 예약어를 사용한 변수 선언입니다.


2-1 변수 선언 (var 예약어 사용)
var 예약어

 

var 예약어는 다음과 같은 특징이 있습니다. 

 

• 함수 레벨 스코프를 가집니다. 즉, 함수 내부에서 선언된 변수는 해당 함수 내에서만 유효합니다.
• ES5 이전부터 사용된 가장 오래된 키워드입니다.
• 변수 재선언 및 재할당이 가능합니다.
• 호이스팅이 발생하여, 변수 선언이 코드의 가장 위로 이동된 것처럼 동작합니다.

var 예약어를 사용한 예시 코드  입니다.

// var 재할당 O 재선언 O
var number = 10; 
var number = 20;

 

 

 

이렇게 number라는 변수를 선언하고  var 예약어를 사용했습니다.  위에 코드처럼 number라는 변수를 다시 재선언할 수 있고 다시 number라는 변수에 값을 재할당 할 수 있습니다. 

 

2-2 변수 선언 (let 예약어 사용)
let 예약어

let 예약어는 다음과 같은 특징이 있습니다. 

• ES6에서 도입된 키워드입니다.
• 블록 레벨 스코프를 가집니다. 즉, { } 블록 내에서 선언된 변수는 해당 블록 내에서만 유효합니다.
• 변수 재할당은 가능하지만, 재선언은 불가능합니다.
• 호이스팅이 발생하지만, Temporal Dead Zone (TDZ)이라는 개념이 있어 변수 선언 전에 사용하면 에러가 발생합니다.

let 예약어를 사용한 예시 코드입니다.

 

let num1 = 20; // num1 변수를 선언하고 20을 할당
let num1 = 30; // 재선언은 불가 

num1 = 50; // 하지만 재할당은 가능하다

이렇게 블록 레벨 범위(스코프)를 가지는 것을 보실 수 있습니다.  let 은 변수에 재할당은 가능하지만, 변수를 다시 재선언하는 것은 안됩니다. 

2-3 변수 선언 (const 예약어 사용)
const 예약어

const 예약어는 다음과 같은 특징이 있습니다. 

 

• ES6에서 도입된 키워드입니다.
• 블록 레벨 스코프를 가집니다.
• 변수 재할당이 불가능한 상수입니다. 즉, 한 번 값을 할당하면 변경할 수 없습니다.
• 호이스팅이 발생하지만, TDZ가 적용됩니다.
  
  

const 예약어를 사용한 예시 코드입니다.

// const -> 재할당 X , 재선언 X
const title = "mytitle"; // 상수 값을 다룰 때 변할 필요가 없는 값을 다룰때
// 여러곳에서 사용되는데 값을 바꿀 필요가 없는 값;
title = "mytitle2"; // X

const 는 재할당, 재선언이 모두 안됩니다. const 예약어는 자바스크립트에서 변수의 값을 한 번 할당하면 변경할 수 없도록 만들 때 사용합니다. 즉, 상수를 선언할 때 사용하는 것이 가장 일반적입니다.

 

2-4   var, let , const 차이점 
var, let, const의 차이점을 테이블로 나타냈습니다. 

키워드	스코프	재선언	재할당	호이스팅	TDZ
var	함수 레벨	가능	가능	발생	없음
let	블록 레벨	불가능	가능	발생	있음
const	블록 레벨	불가능	불가능	발생	있음

 

 

3. var, let , const 를 사용한 변수 사용

var a = 10;
let age = 30;
const PI = 3.14159;

 

결론

var 예약어는 오래된 방식이며 호이스팅이 발생하고 함수 레벨 스코프를 가집니다.  let 예약어는 블록 레벨 스코프를 가지고 재선언이 안되지만 재할당이 가능하고 호이스팅이 발생합니다. const 예약어는  블록 레벨 스코프를 가지고 재할당, 재선언이 모두 불가능하기 때문에 상수에서 쓰입니다.