[JavaScript] 변수 & 데이터 타입

변수 (Variable)

변수(Variable)의 주요 개념
- 변수 선언(Declaration) : 자바스크립트 엔진에 변수 객체를 등록하는 것
- 변수 초기화(Initiailization) : 변수에 메모리 공간을 할당하는 것
- 변수 할당(Assignment) : 변수에 값을 저장하는 것 
- 변수 참조(Reference) : 변수에 할당된 값을 읽어오는 것

 

변수의 선언과 할당

let a;			// 변수 선언
a = "hello";		// 변수 할당

let a = "hello";	// 변수 초기화(=선언&할당)

 

변수 선언 키워드

	var	let	const
단순 선언	가능	가능	불가능
동일 이름 재선언	가능	불가능	불가능
변수 재할당 (덮어쓰기)	가능	가능	눌가능

 

// var
var myVar;			// 단순 선언 가능
myVar = "hi";
console.log(myVar);		// hi
var myVar = "hello";		// 동일 이름 재선언 가능
console.log(myVar);		// hello
myVar = "goodbye";		// 변수 재할당 가능
console.log(myVar);		// goodbye

// let
let myLet;			// 단순 선언 가능
myLet = "hi";
console.log(myLet);		// hi
let myLet = "hello";		// 동일 이름 재선언 불가능
console.log(myLet);		// 에러: SyntaxError
myLet = "goodbye";		// 변수 재할당 가능
console.log(myLet);		// goodbye

// const
const myConst;			// 단순 선언 불가능
myConst = "hi";
console.log(myConst);		// 에러: SyntaxError
const myConst = "hello";	// 동일 이름 재선언 불가능
console.log(myConst);		// 에러: SyntaxError
myConst = "goodbye";		// 변수 재할당 불가능
console.log(myConst);		// 에러: TypeError

 

---

자바스크립트의 데이터의 구조

let a = "hi";
// 식별자 : a
// 데이터 : hi

 

변수는 메모리에 변수 영역과 데이터 영역으로 나뉘어 저장된다.

• 변수 영역 : 식별자의 정보와 실제 데이터 값의 주소를 가짐
• 데이터 영역 : 실제 데이터 값의 정보를 가짐

변수 영역의 메모리 변경 가능 여부		데이터 영역의 메모리 변경 가능 여부
변수	상수	가변성	불변성
가능	불가능	가능	불가능

 

데이터 타입 (Data Type)

원시 타입 (Primitive Type)	변수 영역과 데이터 영역을 가짐
	String(문자열), Number(숫자), BigInt, Boolean Null, Undefined, Symbol
참조 타입 (Reference Type)	변수 영역과 데이터 영역, 해당 식별자의 데이터 영역을 가짐
	Object(객체), Array(배열)

변수의 복사

• 변수 선언

let a = "hi";				// 원시 타입
let obj1 = {c: "hi", d: "hello"};	// 참조 타입

변수 영역	주소	1001	1002	1003	1004	...
	데이터	a/@5001	obj1/@7103~
식별자(obj1)의 데이터 영역	주소	7103		7104		...
	데이터	c/@5001		d/@5002
데이터 영역	주소	5001	5002	5003	5004	...
	데이터	"hi"	"hello"

• 변수 복사

let b = a;		// 원시 타입
let obj2 = obj1;	// 참조 타입

변수 영역	주소	1001	1002	1003	1004	...
	데이터	a/@5001	obj1/@7103~	b/@5001	obj2/@7103~
obj1의 데이터 영역	주소	7103		7104		...
	데이터	c/@5001		d/@5002
데이터 영역	주소	5001	5002	5003	5004	...
	데이터	"hi"	"hello"

• 복사한 변수의 값 변경

b = "bye";		// 원시 타입
obj2.c = "bye";		// 참조 타입

변수 영역	주소	1001	1002	1003	1004	...
	데이터	a/@5001	obj1/@7103~	b/@5003	obj2/@8204~
obj1의 데이터 영역	주소	7103		7104		...
	데이터	c/@5003		d/@5002
obj2의 데이터 영역	주소	8204		8205		...
	데이터	c/@5003		d/@5002
데이터 영역	주소	5001	5002	5003	5004	...
	데이터	"hi"	"hello"	"bye"

 

원시 타입은 변수의 값을 직접 복사한다.

따라서, 복사된 변수는 원본 변수와 독립적인 별도의 메모리 공간에 저장된다.

 

참조 타입은 변수의 값이 저장된 메모리 주소를 복사한다.(=얕은 복사)

따라서, 복사된 변수는 원본 변수와 메모리 공간을 공유한다.

 

따라서, 복사된 변수의 값을 변경했을 때,

원시 타입은 원본 변수의 값이 변경되지 않지만, 참조 타입은 원본 변수의 값이 같이 변경된다.

(a === b);		// false
(obj1 === obj2);	// true

참조 타입 변수를 독립적으로 복사하는 방법(=깊은 복사)
: JSON을 활용하여 문자열화(stringify)한 뒤, 다시 JSON화(parse) 한다.

let obj3 = JSON.parse(JSON.stringify(obj1));

 

데이터 타입의 형 변환(Type Conversion)

암시적 형 변환

• 문자열을 포함하여 + 연산자를 사용하면 결과값은 항상 String 타입이 된다.

("1" + 2)		// 12 (String + Number)
("true & " + false)	// true & false (String + Boolean)
("null" + null)		// nullnull (String + null)
("not " + undefined)	// not undefined (String + undefined)

• +을 제외한 연산자(-, *, /, % 등)을 사용하면 결과값은 항상 Number 타입이 된다.
  • 이 때, 빈 문자열("") 또는 공백 문자열("  ")은 0으로 변환된다.

(1 - "2")	// -1 (Number - String)
("2" * 3)	// 6 (String * String)
(true / 2)	// 0.5 (Boolean / Number)
(" " - 2)	// -2 ("" - Number);

 

명시적 형 변환

• String 함수를 사용하면 결과값을 String 타입으로 변환한다.

String(123)		// 123
String(true)		// true
String(false)		// false
String(null)		// null
String(undefined)	// undefined
String(NaN)		// NaN (Not a Number)
String({})		// [Object Object]

• Number 함수를 사용하면 결과값을 Number 타입으로 변환한다.

Number(" 123 ")		// 123 (공백이 제거됨)
Number("100점")		// NaN (숫자 외의 문자)
Number(true)		// 1 (true = 1)
Number(false)		// 0 (false = 0)
Number("")		// 0 (빈 문자열 = 0)
Number("  ")		// 0 (공백 문자열 = 0)
Number(null)		// 0 (null = 0)
Number(undefined)	// NaN (Not a Number)
Number(NaN)		// NaN (Not a Number)
Number({})		// NaN (Not a Number)

• Boolean 함수를 사용하면 결과값을 Boolean 타입으로 변환한다.

Boolean("123")		// true
Boolean("")		// false (빈 문자열 = false)
Boolean("  ")		// true (공백 문자열 = true)
Boolean(null)		// false (null = false)
Boolean(undefined)	// false (undefined = false)
Boolean(NaN)		// false (NaN = false)
Boolean({})		// true (Object = true)