[JS] 변수(Variable) 이해하기

Javascript에 대한 변수를 이해하여, 필요 상황에 따라 적절하게 사용하는 방법을 익힘

 

 

ES5와 대비하여서 ES6에서는 const, let 변수가 추가 되었으며,var 변수보다는 const, let 변수를 사용하는것을 '지향'한다.

 

1) 변수 설명

변수란? 어떤 문자 혹은 숫자, 진위, 배열 등과 같이 하나의 공간에 담아두었다가, 필요할때 꺼내쓰기 위한것을 의미한다.

 

변수는 문자형, 숫자형, 진위형, 배열형, 객체형 등.. 다양한 변수 공간에 다양한 타입을 넣을 수 있다.

// 문자형 (String) 
var userId = "adjh54"; 
const userId = "adjh54"; 
let userId = "adjh54" 

// 숫자형 (Number) 
var userAge = 20; 
const userAge = 20; 
let userAge = 20; 

// 진위형 (Boolean) 
var isUserMarried = false; 
const isUserMarried = false; 
let isUserMarried = false; 

// 배열형 (Array) 
var userHobby = []; 
const userHobby = []; 
let userHobby = []; 

// 날짜(Date)
var nowDate = new Date();
const nowDate = new Date();
let nowDate = new Date();

// 객체형 (Object) 
var userInfo = { userId: "adjh54", userAge: 20, isUserMarried: false, userHobby: ["netflex", "reading"]} 
const userInfo = { userId: "adjh54", userAge: 20, isUserMarried: false, userHobby: ["netflex", "reading"]} 
let userInfo = { userId: "adjh54", userAge: 20, isUserMarried: false, userHobby: ["netflex", "reading"]} 

// Array Object 
var userObjArr = [ { userId: "adjh54", userAge: 20 }, { userId: "hahahoho", userAge: 21 }, { userId: "green", userAge: 22} ]; 
const userObjArr = [ { userId: "adjh54", userAge: 20 }, { userId: "hahahoho", userAge: 21 }, { userId: "green", userAge: 22} ]; 
let userObjArr = [ { userId: "adjh54", userAge: 20 }, { userId: "hahahoho", userAge: 21 }, { userId: "green", userAge: 22} ];

 

[Tip] 변수의 선언과 초기화
const는 상수로 '선언'과 '초기화'를 함께 사용해야한다. (const는 재 할당이 불가능하기 때문이다.)

// 선언
var number1;
const number2;	// error
let number3;

console.log(number1); // undefined
console.log(number2); // error
console.log(number3); // undefined


// 초기화
var number = 1;
const number = 1;
let number = 1;


// 선언과 초기화 :: const는 선언과 초기화를 동시에 진행을 해야한다.
const number;  // Parsing error: 'Const declarations' require an initialization value.
const number = 1;

 

 

var

변수를 선언하는데 사용하며, 선언 이후에 초기화를 수행할 수 있다.

 

'var' 변수의 사용예제

funtion reallocation(){
	var hellow = "안녕하세요"; 
	
	hellow = "반갑습니다"; 
	console.log(hellow);	// 반갑습니다
    
	hellow = "변수에 대해서 공부중입니다";
	cosnole.log(hellow);	// 변수에 대해서 공부중입니다
}

 

 

const

ES6문법 이후 등장한 변수로써  상수로써 선언을 할 수 있으며, 선언 이후에 재 할당이 불가능하다.
const는 Block Scope의 영역을 가진다.

 

'const' 변수의 사용예제

funtion reallocation(){
	const hellow = "안녕하세요"; 
	hellow = "반갑습니다"; // 'hellow' is constant
}

 

 

[Tip] const의 재할당?
아래 코드와 같이 'const'는 변하지 않는 상수의 값이나, Object 형태일 경우 Object 내에 속성 값을 추가 할 수 있다.!

// Object 객체 초기화 
const userInfo = { userId: "", userAge: 0, userHobby: "" }; 

// Object 값 할당 
userInfo.userId = "adjh54"; 
userInfo.userAge = 20; 
userInfo.userHobby = "netflex"; 

// Object 속성 추가 (가능) 
userInfo.isMarried = false; 
userInfo.gender = "man"; 
console.log(userInfo);

 

let

ES6문법 이후 등장한 변수로써 변수를 선언하는데 사용하며, 선언 이후에 재 할당이 가능하다.
let은 Funtion Scope의 영역을 가진다.

 

'let' 변수의 사용예제

funtion reallocation(){
	let hellow = "안녕하세요"; 
	
	hellow = "반갑습니다"; 
	console.log(hellow);	// 반갑습니다
    
	hellow = "변수에 대해서 공부중입니다";
	cosnole.log(hellow);	// 변수에 대해서 공부중입니다
}

2) 추가 공부하기

---

1. 스코프(Scope)

---

스코프는 변수가 함수 혹은 블록 내에서 접근(호출)이 가능한 범위를 의미한다.

용어	분류
Funtion Scope(함수 스코프)	해당 선언한 변수가 함수내에서 유효함을 의미한다.
Block Scope(블록 스코프)	해당 선언한 변수가 블록(중괄호 내)에서 유효함을 의미한다.

 

참고: 스코프의 사용 예제

// CASE1: 블록스코프 / 함수스코프 
function currentNum(){ 
	// 블록 스코프 
    if(5 > 4){ 
      var num1 = 1; 
      const num2 = 2; 
      let num3 = 3; 
      console.log(num1); // 1 
      console.log(num2); // 2 
      console.log(num3); // 3 
    } 
    console.log(num1); // 1 
    console.log(num2); // 'num2' is not defined 
    console.log(num3); // 'num3' is not defined 
 } 
 
 // CASE2: 전역 변수 
 var num4 = 4; 
 const num5 = 5; 
 let num6 = 6; 
 
 funtion currentNum2(){ 
   console.log(num4); // 4 
   console.log(num5); // 5 
   console.log(num6); // 6 
 }

 

2. 호이스팅(Hoisting)

---

변수와 함수가 메모리 공간을 선언하기 전에 미리 할당이되는 것을 의미한다.
var의 경우 호이스팅 발생시 undefined를 변수로 초기화 하는 반면, let과 const는 변수를 초기화하지 않는다.

/**
* undefined에서 발생하는곳에서 var varName으로 변수 선언이 발생한다.
* 추적할 수 없는 변수로서 사용이 될 수 있는 문제가 발생한다.
*/
console.log(varNum); // undefined
var varNum = 1;
console.log(varNum); // 1

3) 최종 요약

---

참고: 간단 요약

 

변수	호이스팅 문제	변수 재 할당 가능여부	변수의 스코프 영역
var	발생	가능	Function Scope (함수내에서 유효함)
const	미 발생	불가능	Block Scope(중괄호 블록 내에서 유효함)
let	미 발생	가능	Block Scope(중괄호 블록 내에서 유효함)

Refernece

---

참고: var 관련 Document

var - JavaScript | MDN

 

참고: const 관련 Document

const - JavaScript | MDN

 

참고: let 관련 Document

let - JavaScript | MDN

 

참고: Hosting 관련 Document

호이스팅 - 용어 사전 | MDN