웹 개발

JavaScript 객체 및 데이터 변환 정리

Blue_bull 2025. 2. 15. 10:33

✅ 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()를 사용.