값(Value)
더 이상 나눌 수 없는 값.
더 이상 평가될 수 없는 하나의 식으로 자료형을 간단한 이루는 값
기본 값(원시 타입, primitive value)
object를 제외한 모든 값은 변경 불가능한 값(immutable value)이다.
const un = undefined;
const nu = null;
const bool = false;
const num = 0;
const str2 = '문자열';
console.log(typeof un) undefined
console.log(typeof nu) object
console.log(typeof bool); boolean
console.log(typeof num); number
console.log(typeof str2); stringboolean
console.log(Boolean('STRING')); // true
console.log(!!'STRING'); // true
console.log(!false); // true
console.log(!!0); //false
console.log(!1); //false
거짓 같은 값 falsy
거짓 같은 값(Falsy, falsey로 쓰이기도 함) 값은 불리언 문맥에서 false로 평가되는 값입니다.
JavaScript는 조건절, 반복문 등 불리언 값이 필요한 곳에서 형 변환을 이용해 특정 값을 불리언 값으로 변환합니다.
if (false) {
} else {
// 실행
}
if (null) {
} else {
// 실행
}
if (undefined) {
} else {
// 실행
}
if (0) {
} else {
// 실행
}
if (-0) {
} else {
// 실행
}
if (0n) {
} else {
// 실행
}
if (NaN) {
} else {
// 실행
}
if ('') {
} else {
// 실행
}null & undefined
console.log(Number(undefined)); //NaN
console.log(Number(null)); //0number
소수점 반올림 : toFixed()
8번째 줄은 숫자가 아니므로 NaN
string에서 number로 형 변환
parseFloat('123') parseInt('123')parseInt()는 정수로, parseFloat()는 실수로 변환
string
객체 (object)
- 다수의 원시 자료형을 포함하거나 복잡한 개체를 표현할 수 있는 자료형
- Object() 혹은 중괄호({})를 통해 생성
- 객체의 개체는 key:value 형태로 표현하며, 접근은 object.key 형태로 표현
객체 내 개체를 추가, 삭제하는 법
객체 복사 문제점
admin 또는 user의 값을 다르게 변경 시켜도 결국 같은 값으로 출력되는 걸 볼 수 있다.
얕은 복사
assign 메서드를 사용해 여러 객체를 하나로 병합하는 예시를 살펴봅시다.
let user = { name: "John" };
let permissions1 = { canView: true };
let permissions2 = { canEdit: true };
// permissions1과 permissions2의 프로퍼티를 user로 복사합니다.
Object.assign(user, permissions1, permissions2);
// now user = { name: "John", canView: true, canEdit: true }목표 객체(user)에 동일한 이름을 가진 프로퍼티가 있는 경우엔 기존 값이 덮어씌워 집니다.
let user = { name: "John" };
Object.assign(user, { name: "Pete" });
alert(user.name); // user = { name: "Pete" }Object.assign을 사용하면 반복문 없이도 간단하게 객체를 복사할 수 있습니다.
let user = {
name: "John",
age: 30
};
let clone = Object.assign({}, user);예시를 실행하면 user에 있는 모든 프로퍼티가 빈 배열에 복사되고 변수에 할당됩니다.
-> 제일 간단한 방법
얕은 복사의 문제점
깊은 복사
래퍼객체
원시형데이터타입 (Primitive Data Type)
number
string
boolean
undefined
null
객체형(참조형)
object
array
function
date
RegExp
<래퍼객체 : Number / String / Boolean>
원시형데이터 타입이 아닌 객체형데이터타입은 우리가 앞서 배운 객체 이용방법을 고스란히 이용할수 있다. (메소드, 상속 등)
래퍼객체 (Wrapper Object)
하지만 지금까지 공부한 내용을 보면, string, number type 또한 메서드들을 가지며, 마치 객체인것 처럼 이용하곤 했다.
메서드를 가진다는 것은 객체의 성격을 가질 때만 가능 한 것인데, 어떻게 string과 number가 객체인 것처럼 메서드를 가질 수 있게 되는 것일까?
바로 이 때, 눈여겨 볼 것이 래퍼객체(Wrapper Object)이다.
래퍼객체는 총 3가지
Number
String
Boolean
이며 이들은 객체형(참조형) 데이터 타입의 한 종류이다.
아래 예제를 보며 래퍼객체들이 어떠한 역할을 하는지 살펴보자.
1.var str = 'coding';
2.console.log(str.length); // 6
3.console.log(str.charAt(0)); // "C"원래라면 ‘coding’이라는 문자열의 값을 가지고 있는 str의 데이터타입은 string, 즉 원시형데이터타입이기 때문에 객체와 같이 메서드를 가질 수 없다.
하지만 자바스크립트는 숫자형(number), 문자열(string), 조건형(boolean) 에 대해서 일시적으로 ‘’객체’’ 화가 되는 것을 허용 하며, 그 순간 숫자,문자,조건도 객체처럼 메서드를 쓸수 있는 것이다.
위에서 1.을 보면, str은 문자열이다.
하지만 2.에서 console.log(str.length); 를 입력하며 객체의 고유 메서드인 length를 이용하려 할 때, 1.과 2. 사이에서는 마치,
str = new String(‘coding’) 이라는 선언이 일시적으로 생성되어 str을 객체화 시키게 된다.
이로써 new String(‘coding’) 을 통해 객체화 된 str은 length라는 메서드를 이용할 수 있게 되는 것이다.
이렇게 , 원시타입을 객체화 시켜주는 객체형데이터 타입을 래퍼객체라고 하며, 그 종류는 Number, String, Boolean 이 있다.
형 변환
숫자 + 문자열 => 문자열로 나옴
형 변환 예제
- 앞에 !! 붙이기 ->Boolean
Number(값) String(값) Boolean(값) Array.from(값) : 명시적인 형변환
const result1 = 1 + '입니다' // 1입니다 type String
const result2 = '11' + 11 // 1111 type String
const result3 = '2' * '2' //4 type number
const result4 = '5 ' * '3' //15 type number
const result5 = ['111'] +111 //111111 type string이렇게 나온다. type을 확실하게 하고 싶다면 형변환을 해주어야 한다.
예를 들어
const result5 = Number(String(['111'])) +111 //222222 type number
