* 기본형 데이터와 참조형 데이터
-기본형 데이터(Primative type)
Number
String
Boolean
Symbol(ES6에 추가, 객체 속성을 만드는 데이터 타입)
null
undefined
기본형 데이터는 값을 그대로 할당한다.
메모리상에 고정된 크기로 저장되며 원시 데이터 값 자체를 보관하므로, 불변적이다.
-참조형 데이터(Reference type)
Object(객체)
Array(배열)
Function(함수)
RegExp(정규표현식)
값이 저장데이터의 주소를 할당한다
JavaScript 형변환
자바스크립트의 형변환에는 자바스크립트 엔진이 필요에 따라 자동으로 데이터타입을 변환시키는 '암시적 변환'과 개발자가 의도를 가지고 데이터타입을 변환시키는 '명시적 변환'이 있다.
암시적 변환
"10"이라는 문자열과 10이라는 숫자를 곱하면 자바스크립트는 암시적 변환을 하기 때문에 100을 출력한다.
-산술 연산자
더하기(+) 연산자는 숫자보다 문자열이 우선시 된다.
eg)
number + number // number
number + string // string
string + string // string
string + boolean // string
number + boolean // number
50 + 50; //100
100 + “점”; //”100점”
“100” + “점”; //”100점”
“10” + false; //”100"
99 + true; //100
그외 다른 연산자(-, * , /, %)는 숫자형이 문자형보다 우선시된다.
eg)
string number // number
string string // number
number number // number
string boolean //number
number boolean //number
“2” false; //0
2 * true; //2
명시적 변환
-Number()
Number()는 정수형과 실수형의 숫자로 변환한다.
eg)
Number(“12345”); //12345
Number(“2”*2); //4
-parseInt()
parseInt()는 정수형의 숫자로 변환한다. 첫글자를 정수로 변환할 수 없으면 NaN으로 반환한다.
eg)
parseInt(“80”); //80
parseInt(“ 9”); //9
parseInt(“ 9밥”); //9
parseInt(“ 밥9”); //NaN
-parseFloat()
parseFloat()는 실수형의 숫자로 변환한다. 첫글자를 정수로 변환할 수 없으면 NaN으로 반환한다. 띄어쓰기로 여러개의 수가 있으면 첫번째 수만 바꾼다.
eg)
parseFloat("532.9"); //532.9
parseFloat("68 77.7 95.1"); //68
parseFloat("T 18")//NaN
-Boolean()
eg)
Boolean(100); //true
Boolean(“1”); //true
Boolean(true); //true
Boolean(Object); //true
Boolean([]); //true
Boolean(0); //false
Boolean(NaN); //false
Boolean(null); //false
Boolean(undefined); //false
Boolean( ); //false
-String()
다른 자료형을 문자타입으로 변형한다
eg)
String(111); //”111"
String(123.456); //”123.456"
* ==, ===
==: equality operator 값만 비교한다.
===: strict equality operator 더 엄격하게 비교하는 연산자로 값과 데이터타입 모두가 같은지를 비교한다
eg)
1 == '1' //true
1 === '1' //false
null == undefined //true
null === undefined //false
console.log(typeof null); //"object"
console.log(typeof undefined); //"undefined"
0 == ""; //true
0 === ""; //false
* 불변 객체를 만드는 방법
불변객체: 그대로 변하지않는 객체로 객체가 생성된후 내부 상태가 변하지 않는 객체를 의미한다.
-const
const는 변수를 상수로 선언가능한데, 일반적으로 상수로 선언된 변수는 값을 바꾸지 못한다
-Object.freeze()
자바스크립트에서 기본적으로 제공하는 메소드인 Object.freeze() 메소드이다. 공식 문서에서는 "객체를 동결하기 위한 메소드" 라고 적혀있다.
변수에 key value를 가진 객체를 바인딩 후 Object.freeze()를 사용해 바인딩된 변수를 동결 객체로 만들수 있다. 그렇게 되면 객의 속성을 변경하는 것은 불가능하다
eg)
let test = {
name : 'kim'
}
Object.freeze(test);
test.name = 'Park';
console.log(test) // {name: 'kim'}
위와 같이 객체의 속성을 변경하는 시도는 무시된다.
그러나 Object.freeze()는 객체의 재할당은 가능하다.
eg)
test = {
age : 15
};
console.log(test); // {age: 15}
위와 같이 객체의 재할당은 가능하기 때문에 Object.freeze()도 불변 객체라고 할 수는 없다.
-(const의 재할당불가 + Object.freeze()의 객체속성 변경불가)
불변 객체는 const와 Object.freeze()를 조합하여 만들 수 있다.
eg)
const test = {
'name' : 'Choi'
};
Object.freeze(test);
* 얕은 복사와 깊은 복사
-얕은 복사
참조형 데이터가 저장된 프로퍼티를 복사할 때 그 주솟값만 복사하는 방법이다.
객체를 직접대입하여 참조에 의한 할당이 이루어졌기 때문에 같은 주솟값을 가진다.
eg)
const obj = { value: 1 }
const newObj = obj;
newObj.value = 2;
console.log(obj.value); //2
console.log(obj === newObj); //true
-깊은 복사
얇은 복사 처럼 주소를 복사해서 공유하는 것이 아니라, 아예 새로운 객체안 속성(property)만 복사하는 방법이다.
연산자를 통한 복사
eg)
const obj1 = { a:1, b:2 };
const obj2 = { ...obj };
obj2.a = 100;
console.log( obj1 === obj2 ) //false
console.log( obj1.a ) //1
Object.assign()을 통한 복사
eg)
const obj1 = { a:1, b:2 };
const obj2 = Object.assign({}, obj1);
obj2.a = 100;
console.log( obj1 === obj2 ) //false
console.log( obj1.a ) //1
