JS데이터 - 객체
const userAge = {
// Key: value
name: 'hyerin',
age: 85
}
const userEmail = {
name: 'hyerin',
email: 'abcde123@gmail.com'
}
Object.assign()
- prototype 속성이 붙어있지 않는 메소드 -> 정적(static)메소드
- assign() 메소드는 Object라는 자바스크립트 전역객체 부분의 prototype으로 만들어진 메소드가 아님
- 따라서 {}.assign() 중괄호를 사용하는 객체 리터럴 부분에 메소드를 직접적으로 사용불가
userEmail.assign, userAge.assign이런식으로 직접적으로 사용불가- 대신, Object라는 자바스크립트 전역객체에 직접적으로 사용
- Object.assign() 메소드는 1번째 인수로 들어가 있는 target이라는 객체에 2번째에 인수로 들어가는 객체를 병합해서 병합된 타겟의 객체를 반환함
- 문법) Object.assign(target, ...sources)
- target 부분에 source 부분의 속성들을 복사해서 집어넣음
- target: 목표 객체 - 출처 객체의 속성을 받아 반영된 목표 객체를 반환
- sources: 출처 객체(들) - 목표 객체에 반영하고자 하는 속성들을 갖고 있는 객체
- 반환값: 목표 객체(target)
- 목표 객체에 동일한 키를 갖는 속성이 존재할 경우 그 속성 값은 출처 객체의 속성 값으로 덮어쓰여짐. 동일하게, 앞의 출처 속성들은 뒤의 출처 속성들에게 덮어쓰여짐
const target = Object.assign(userAge, userEmail)
//첫번째인수 userAge: 대상객체, 두번째인수 userEmail: 출처객체
console.log(target) //{name: "hyerin", age: 85, email: "abcde123@gmail.com"}
console.log(userAge) //{name: "hyerin", age: 85, email: "abcde123@gmail.com"}
console.log(target === userAge) //true
//target과 userAge는 같은 데이터, 출처객체 source에서 대상객체 target으로 속성의 값을 복사해서 집어넣는데 그 객체가 반환됨
- 생긴게 똑같다고 일치연산자로 같다고 나온게 아님
const a = { k: 123 }
const b = { k: 123 }
console.log(a === b) //false
- 두개의 객체는 생긴것은 똑같지만 서로 다른 객체임
- 하나의 객체데이터는 특정한 메모리 주소에 값이 들어가 있음
- a와 b 변수는 서로 다른 메모리 주소를 바라보고 있으므로 같지않음
userAge, userEmail을 합쳐 새로운 객체데이터 만드는방법
- 원본데이터는 손상하지 않고 그것의 속성들을 합쳐놓은 새로운 객체데이터를 만들어 반환시켜 사용가능
const target = Object.assign({}, userAge, userEmail)
//userAge, userEmail: 출처객체(sources)
console.log(target) //{name: "hyerin", age: 85, email: "abcde123@gmail.com"}
console.log(userAge) //{name: "hyerin", age: 85}
console.log(target === userAge) //false
또는
const target = Object.assign({}, userAge)
console.log(target) //{name: "hyerin", age: 85}
console.log(userAge) //{name: "hyerin", age: 85}
console.log(target === userAge) //false
// userAge의 원본데이터를 손상하지 않고 그것을 새로운 객체데이터로 속성을 옮겨서 하나의 복사본을 만듦, 따라서 내용은 같지만 userAge 바라보고있는 메모리 주소가 따로 있고 그것이 복사돼서 새로운 메모리주소로 할당 되었으므로 서로 다름
Object.keys()
- Object.keys() 메소드는 주어진 객체의 속성 이름들을 일반적인 반복문과 동일한 순서로 순회되는 열거할 수 있는 배열로 반환
- 즉, name, age, email이라는 key가 Object.keys의 정적메소드를 통해 각각의 key만 추출되어 새로운 배열데이터로 만들어짐
- 속성이름만 추출해서 새로운 배열로 만들어주는 개념
const user = {
// Key: value
name: 'hyerin',
age: 85,
email: 'abcde123@gmail.com'
}
const keys = Object.keys(user)
console.log(keys) //(3) ["name", "age", "email"]
객체데이터에서 사용할 수 있는 인덱싱(indexing) 방법
- 인덱싱(indexing): 객체데이터 뒤쪽에 대괄호를 열고 닫아 객체데이터가 가지고있는 속성의 이름 명시(번호x)
console.log(user['email']) //abcde123@gmail.com, user부분의 email property 값을 내놔라
console.log(user.email) //abcde123@gmail.com
활용
- user라는 객체에서 name 부분의 속성값을 가져옴
- map메소드 콜백에서 반환된 특정한 데이터를 차곡차곡 배열로 만들어서 반환
- user라는 부분의 각각의 key값들을 추출해서 배열로 만들어 반환
const values = keys.map(key => user[key])
console.log(values) //(3) ["hyerin", 85, "abcde123@gmail.com"]
