자료형(DataType)
자료형은 자바스크립트에서 다룰 수 있는 값의 종류를 의미합니다.
자바스크립트는 크게 기본자료형(primitive datatype)와 참조 자료형(reference datatype)으로 구분하고 각각 세부적으로 기본자료형은 숫자형, 문자열형, 논리형, 특수자료형(undefined/null), 심볼(sybol)의 5가지 자료형으로 구분하고 참조 자료형은 객체, 배열, 함수의 3가지 자료형으로 구분하여 총 6가지의 자료형으로 구분합니다.
기본자료형
숫자형
우리가 기본적으로 인식하고 있는 수(number)의 개념과 같습니다.
//숫자형
10, 20, 30, -10, -20, -30, 0.1, 0.2, 0.3, -0.1, -0.2, -0.3 등등 문자열형
큰따옴표("") 또는 작은따옴표("")로 감싸진 값의 종류를 의미합니다. 흔하게 문자형이라고 부르기도 합니다.
//문자열형
"a", 'b', "cd", 'ef' 등등var a = "큰따옴표 문자열에는 작은따옴표 '를 사용할 수 있습니다.";
var b = '작은따옴표 문자열에는 큰따옴표 "를 사용할 수 있습니다.'; // 작은따옴표로 감싸기
var c = "작은따옴표를 쓰고 싶다면 \'이렇게\'사용하면 됩니다. 만찬가지로 \"큰따옴표\"도 쓸 수 있습니다.";
// 이스케이프 문자 사용하기
var d = "\\문자를 쓰고 싶다면 역슬래시를 두 번 사용하기.";
var e = `${num1} + ${num2} = ${num1+num2} 입니다.`
// 템플릿 문자열 (` `)을 사용하면 문자열 내에서 표현식 사용 가능논리형
논리적인 기준을 나타내는 값의 종류를 의미합니다. true와 false 두 개의 값만 존재합니다.
//논리형
true , false심볼형
ES6에서 새롭게 등장한 자료형입니다.
Symbol();undefined
자바스크립트에서 undefined는 하나의 자료형으로 취급됩니다. null과 더불어서 "특수자료형"으로 구분되기도 합니다.
undefinednull
자바스크립트에서 null도 하나의 자료형으로 취급됩니다. "undefined"와 더불어서 "특수자료형"으로 구분되기도합니다.
null참조자료형
배열
배열은 여러 개의 값의 집합입니다.
[10, "a", true, [10, 20], false]함수
함수는 하나의 일련된 코드의 집합 덩어리를 의미합니다.
function myFunc(){
//code..
}객체
키와 값으로 구성되어진 속성들의 집합입니다.
{
key1:value1,
key2:value2 .....
}객체의 값에 접근하는 방법
const a = obj.key1
const b = obj["key2"]만약 key가 숫자라면?
기본적으로 js의 key는 모두 문자열이어야 합니다. 만약 key가 숫자라면 js는 숫자를 암시적 형변환하여 문자열로 변환합니다.
obj = { 0 : "1번", 1 : "2번", 2 : "3번" }
console.log(Object.keys(obj)); // [ '0', '1', '2' ]typeof
typeof 키워드는 데이터의 자료형을 확인할 때 사용하는 키워드입니다.
typeof 10; // number
typeof 'abc'; // string기본자료형 vs 참조자료형
자바스크립트 데이터 타입은 크게 두가지인 원시형(Primitive Type)과 참조형(Reference Type)으로 분리됩니다.
기본(원시)형에는 Number, String, Boolean, null, undefined 가 있으며 ES6 에서는 Symbol 도 추가되었습니다.
참조형은 대표적으로 객체(Object)가 있고 그 하위에 배열(Array), 함수(Function), 정규표현식(RegExp) 등이 있으며, ES6에서는 Map, Set, WeakMap, WeakSet 등도 추가되었습니다.
두 타입의 가장 대표적인 차이로는 기본형에는 바로 값을 그대로 할당한다는 것이고 참조형에는 값이 저장된 주소값을 할당(참조)한다는 것입니다.
call by value vs call by reference
Call by value(값의 복사)는 말 그대로 복사된 값을 인자로 넘겨서 매개변수로 전달합니다. 기본자료형의 경우 call by value 방식으로 전달됩니다.
- 장점 : 복사하여 처리하기 때문에 원래의 값이 보존이 됩니다.
- 단점 : 복사를 하기 때문에 메모리가 사용량이 늘어납니다.
call by reference(주소값의 복사)는 실제 데이터가 존재하는 주소를 가리키는 주소값을 인자로 넘겨서 매개변수로 전달합니다. 참조자료형은 call by reference 방식으로 전달됩니다.
- 장점 : 복사하지 않고 직접 참조를 합니다.
- 단점 : 직접 참조를 하기에 원래 값이 영향을 받습니다.
function change(value , ref1 , ref2){
value += value
ref1.name = 'changed'
ref2 = { name : 'changed' }
}
var number = 1;
var object1 = { name : 'change me plz'};
var object2 = { name : 'change me plz'};
change(number,object1,object2)
console.log(number) // 1
console.log(object1) // {name: 'changed'}
console.log(object2) // {name: 'change me plz'}-
value += value: value는 원시 타입인 숫자입니다. 함수의 인자로 전달될 때, 값 복사가 이루어집니다. 따라서 함수 내부에서 value를 수정하더라도 함수 외부의 number 변수는 영향을 받지 않습니다. 즉, number는 여전히 1입니다.
-
ref1.name = 'changed': ref1은 객체이므로 참조가 전달됩니다. 따라서 함수 내부에서 ref1의 name 속성을 변경하면, 이 변경은 함수 외부의 object1에도 영향을 미칩니다. 따라서 object1.name이 'changed'로 변경됩니다.
-
ref2 = { name: 'changed' }: 이 부분이 중요한데, ref2 역시 객체이고 함수 호출 시 참조가 전달됩니다. 하지만, 함수 내부에서 ref2에 새로운 객체를 할당하게 되면, 이제 ref2는 더 이상 함수 외부의 object2를 가리키지 않게 됩니다. 즉, 새로운 객체를 ref2에 할당했을 뿐, 함수 외부의 object2와는 연결되지 않습니다. 이 때문에 함수 외부의 object2는 여전히 { name: 'change me plz' }로 남아 있게 됩니다.
