[JS] 표준내장객체 3 (정적 메소드, 객체, JSON)

1. 정적 메소드

 

// Array.from() 정적 메소드
// 유사 배열을 실제 배열로 반환

const arrayLike = {
    0:'A',
    1: 'B',
    2: 'C',
    length:3 // length를 제거하면 유사 배열의 구조와 맞지 않기에 콘솔에 아무것도 출력 안됨
}

console.log(arrayLike.constructor === Array) // false
console.log(arrayLike.constructor === Object) // true

// Array.from(arrayLike) 객체 데이터가 하나의 실제 배열로 생성
// foreach로 배열 각각의 아이템을 콘솔에 출력
// foreach는 배열에 사용하기 때문에 객체인 arrayLike에 바로 사용하면 에러남
// array.from() 메소드로 실제 배열 데이터로 바꾸고 foreach 사용 가능
// 대신 분명하게 arraylike 객체 속성이 숫자 0부터 하나씩 증가할 수 있는 구조여야하고,
// length 속성으로 실제 아이템 개수에 해당하는 숫자가 입력이 되어져 있어야함

Array.from(arrayLike).forEach(item=>console.log(item))


// Array.isArray()
// 배열 데이터인지 확인

const arr4 = ['A', 'B', 'C']
const arrayLike2 = {
    0: 'A',
    1: 'B',
    2: 'C',
    length: 3
}

console.log(Array.isArray(arr4)) // true
console.log(Array.isArray(arrayLike2)) // false

 

 

2. 객체

 

// Object.assign()
// 하나 이상의 출처(source) 객체로부터 대상 객체로 속성을 복사하고 대상 객체를 반환

const target = {a:1, b:2}
const source1 = {b:3, c:4}
const source2 = {c:5, d:6}
// 새로운 객체 데이터 반환
// assign(대상 객체, 나머지 모두 출처 객체(target, source1 .. 등))
// const result = Object.assign({}, target, source1, source2)
const result = {
    ...target,
    ...source1,
    ...source2
}

console.log(target) // {a: 1, b: 3, c: 5, d: 6}
console.log(result) // {a: 1, b: 3, c: 5, d: 6}


// Object.entries()
// 주어진 객체의 각 속성과 값으로 하나의 배열을 만들어 요소로 추가한 2차원 배열을 반환
const user = {
    name: 'test',
    age: 80,
    isValid : true,
    email: 'test@test'
}

console.log(Object.entries(user))

for (const [key, value] of Object.entries(user)) {
    console.log(key, value)
}


// Object.keys()
// 주어진 객체의 속성 이름을 나열한 배열을 반환
console.log(Object.keys(user)) // ['name', 'age', 'isValid', 'email']

// Object.values()
// 주어진 객체ㅢ 속성 값을 나열한 배열을 반환

console.log(Object.values(user)) //  ['test', 80, true, 'test@test']

 

 

 

3. JSON

 

// JSON(Javascript Object Notation)

// 데이터 전달을 위한 표준 포맷!
// 문자, 숫자, 불린, NULL, 객체, 배열만 사용
// 문자는 큰 따옴표만 사용(백틱, 작은따옴표 불가능)
// 객체의 속성, 문자 값 모두 큰따옴표 필수
// 후행 쉼표 사용 불가
// .json 확장자 사용
// 한 파일에는 하나의 데이터만 가능함(배열, null, 숫자 따로따로 값을 가질 수 없음)

const a = {
    x:1, // 이런 후행 쉼표는 사용 불가
    y:2
}

// JSON.stringify() - 데이터를 JSON 문자로 변환
// JSON.parse() - JSON 문자를 분석해 데이터로 변환

console.log(JSON.stringify('Hello world')) // "Hello world"
console.log(JSON.stringify(123)) // 123
console.log(JSON.stringify(false)) // false
console.log(JSON.stringify(null)) // null
console.log(JSON.stringify({name:'test', age:30})) // {"name":"test","age":30}
console.log(JSON.stringify([1,2,3])) // [1,2,3]

console.log(' --------------------------- ')

console.log(JSON.parse('"Hello world"')) // Hello world
console.log(JSON.parse('123')) //123
console.log(JSON.parse('false')) // false
console.log(JSON.parse('null')) // null
console.log(JSON.parse('{"name":"test", "age":30}')) // {name: 'test', age: 30}
console.log(JSON.parse('[1,2,3]')) // [1, 2, 3]

 

 

- 현재 개발환경(VSCODE)에는 parcel 번들러 설치로 인해 json 문자를 js로 변환해서 console.log로 바로 출력해서 볼 수 있음

import abc from './test.json'
console.log(abc)