자바스크립트 객체(Object)데이터

2022.04.26

자바스크립트 객체(Object)

객체 속성은 열거자enumerable or 비열거자nonenumerable로 정의할 수 있으며
탐색, 검색, 반복할 수 있는 빌트인(built-in)수단(메서드또는문)들을 제공
Object 메서드중 prototype이 붙어있지 않은건 정적(static)메서드라고함
즉 객체리터럴방식을 직접적으로 사용 불가능 ( {}.assign() )

Object.assign()

열거할 수 있는 하나 이상의 출처 객체로부터 대상 객체로 속성을 복사 할 때 사용

const target = { a: 1, b: 2, c: 3}
const source = { a: 1, b: 4, c: 6}

// target이 대상객체, source가 출처객체
const res = Object.assign(target, source)

// source 값을 target에 복사
console.log(target) //{a: 1, b: 4, c: 6}
그 값이 res에 입력됨
console.log(res) //{a: 1, b: 4, c: 6}
console.log(target === res) //true(배열, 객체, 함수는 참조형데이터 가변성)


//새로운 객체데이터를 만듦(=내용이 비어져있는 개체데이터를 생성)
//빈 객체리터럴을 넣어주면 대상객체가 손상되지 않음
//const res = {} 이거랑 아래{}부분에 res쓴거랑 같당
const other = Object.assign({}, target, source)

console.log(target) //{a: 1, b: 2, c: 3}
console.log(other) //{a: 1, b: 4, c: 6}
console.log(other === target) //false

Object.keys()

객체데이터의 key값을 새로운 배열로 만들어 줌

const target = { 
  a: 1, 
  b: 2, 
  c: 3
}

const keys = Object.keys(target)
console.log(keys) //['a', 'b', 'c']

// 객체데이터도 인덱싱방법을 제공
console.log(target['a']) //1

// map이라는 Array메서드
const values = keys.map( function(key) {
  return target[key]
} )
console.log(values) // [1, 2, 3]

const userA = {
  name: 'Sunny',
  age: 92,
  isVaild: true
}

const res = Object.keys(userA)
//객체 key들을 배열로 내놓음
console.log(res) //['name', 'age', 'isVaild']

// 메소드체이닝
Object.keys(userA).forEach(item => {
  console.log(userA[item])})
// 흔적을 남기기때문에 앞에 res를 지워줘도 될거같아요 res가 그 값을 받기때문에
res.forEach( item => {
  // userA.name //점표기법
  // userA.['name'] //대괄호 표기법
  console.log(userA[item])
})

Object.values()

객체의 value값 반환

const userA = {
  name: 'Sunny',
  age: 92,
  isVaild: true
}

const res = Object.values(userA)
console.log(res) //['Sunny', 92, true]