✅ JavaScript 객체 및 데이터 변환 정리
📌 1. Object를 사용한 키-값 반환
객체에서 키, 값, 키-값 쌍을 추출하는 방법이다.
const obj = { name: "Alice", age: 25 };
console.log(Object.keys(obj)); // ['name', 'age'] (키만 반환)
console.log(Object.values(obj)); // ['Alice', 25] (값만 반환)
console.log(Object.entries(obj)); // [['name', 'Alice'], ['age', 25]] (키-값 배열 반환)
✅ Object.keys(obj) → 키(속성 이름) 배열 반환
✅ Object.values(obj) → 값 배열 반환
✅ Object.entries(obj) → 키-값 쌍 배열 반환
📌 2. toString()
을 사용한 진법 변환
숫자를 2진수, 8진수, 16진수로 변환할 수 있다.
let num = 255;
console.log(num.toString(2)); // "11111111" (2진수)
console.log(num.toString(8)); // "377" (8진수)
console.log(num.toString(16)); // "ff" (16진수)
✅ num.toString(2)
→ 2진수 변환
✅ num.toString(8)
→ 8진수 변환
✅ num.toString(16)
→ 16진수 변환
📌 3. 문자열 변환
3-1. 숫자를 문자열로 변환
let num = 123;
console.log(num); // 123 (숫자 그대로 출력)
console.log(num + ""); // "123" (문자열로 변환됨)
✅ num + ""
→ 숫자를 문자열로 변환
3-2. 숫자형 문자열을 숫자로 변환
let str = "123.45";
console.log(parseInt(str)); // 123 (정수로 변환)
console.log(parseFloat(str)); // 123.45 (실수로 변환)
✅ parseInt(str)
→ 정수 변환
✅ parseFloat(str)
→ 실수 변환
3-3. 배열을 문자열로 변환
let arr = [1, 2, 3];
console.log(arr); // [1, 2, 3] (배열 그대로 출력)
console.log(arr + ""); // "1,2,3" (문자열 변환)
✅ 배열을 문자열로 변환하면 쉼표(,)로 연결됨
3-4. 불리언 값을 문자열로 변환
let bool = true;
console.log(bool); // true (그대로 출력)
console.log(bool + ""); // "true" (문자열 변환됨)
✅ true + ""
→ "true"
✅ false + ""
→ "false"
3-5. 문자열을 불리언 값으로 변환
console.log(Boolean("")); // false (빈 문자열은 false)
console.log(Boolean("Hello")); // true (내용이 있는 문자열은 true)
✅ Boolean("")
→ false
✅ Boolean("Hello")
→ true
📌 4. toString()
재정의로 원하는 문자열 출력
객체의 toString()
을 직접 정의하면 원하는 형식으로 변환할 수 있음.
let obj = {
name: "Alice",
age: 25,
toString() {
return `Name: ${this.name}, Age: ${this.age}`;
}
};
console.log(obj + ""); // "Name: Alice, Age: 25"
✅ 객체의 toString()
을 직접 정의하면, 문자열 변환 시 원하는 형식으로 출력 가능
🚨 잘못된 문자열 변환 예시
1️⃣ 존재하지 않는 키에 접근하면 undefined
출력
const obj = { name: "Alice", age: 25 };
console.log(obj["price"]); // undefined
✅ 객체에 존재하지 않는 키를 조회하면 undefined
반환
2️⃣ 객체를 문자열 템플릿에 넣으면 [object Object]
출력
let obj = { name: "Alice", age: 25 };
console.log(`${obj}`); // "[object Object]"
📌 객체를 문자열로 변환할 때 기본적으로 toString()
이 호출되며, 기본값은 [object Object]
이다.
📌 해결 방법: JSON.stringify(obj)
를 사용하여 가독성 있는 문자열로 변환
console.log(JSON.stringify(obj));
// '{"name":"Alice","age":25}' (JSON 형식으로 변환)
🔥 핵심 정리
1️⃣ Object.keys()
, Object.values()
, Object.entries()
를 사용해 객체의 키-값을 쉽게 다룰 수 있다.
2️⃣ toString(2)
, toString(8)
, toString(16)
을 사용해 숫자를 다른 진법으로 변환할 수 있다.
3️⃣ + ""
연산을 사용하면 숫자, 배열, 불리언 값을 문자열로 변환할 수 있다.
4️⃣ parseInt()
와 parseFloat()
를 사용하면 숫자형 문자열을 숫자로 변환할 수 있다.
5️⃣ 객체의 toString()
을 직접 재정의하면 원하는 형식으로 변환할 수 있다.
6️⃣ 객체를 문자열로 변환할 때 [object Object]
가 출력되는 것을 방지하려면 JSON.stringify()
를 사용.
'웹 개발' 카테고리의 다른 글
SpringBoot 개발환경 설정하기. (1) | 2025.02.17 |
---|---|
배열 정렬 하기 - toSorted(), Sort() (1) | 2025.02.15 |
JavaScript 키-밸류 출력하는 다양한 방법 (0) | 2025.02.15 |
JavaScript의 배열 메서드 (0) | 2025.02.13 |
이벤트 객체(event)에서 자주 사용하는 속성 (0) | 2025.02.12 |