Home 자바스크립트 JS 객체 메소드 정리
Post
Cancel

자바스크립트 JS 객체 메소드 정리

JS 객체 메소드 정리!!



객체에서 키만 추출하기(keys)

  • Object 객체의 메소드 keys를 활용하면 객체의 키(key)들만 추출할 수 있습니다. 추출한 키들은 배열에 담아 반환합니다.
1
2
3
4
5
6
7
8
9
10

const obj = {
  moive : "Sunny",
  music : "Like Sugar",
  style : "retro",
}

const arr = Object.keys(obj);
console.log(arr) <-- [ 'moive', 'music', 'style' ]
  • Object 객체의 메소드 keys를 호출하고 인자로 obj 변수를 넣습니다. keys는 obj변수에 정의된 속성 키 정보들만 추출합니다. 추출된 값들은 새로운 배열에 담아 arr에 대입합니다.

객체에서 값만 추출하기(values)

  • Object 객체의 메소드 values를 활용하면 객체의 값(values)들만 추출할 수 있습니다. 추출한 값들은 배열에 담아 반환합니다.
1
2
3
4
5
6
7
8
9
const obj = {
  moive : "Sunny",
  music : "Like Sugar",
  style : "retro",
}

const arr = Object.values(obj);

console.log(arr) <-- [ 'Sunny', 'Like Sugar', 'retro' ]
  • Object 객체의 메소드 values를 호출하고 인자로 obj 변수를 넣습니다. values는 obj변수에 정의된 속성 값들만 추출합니다. 추출된 값들은 새로운 배열에 담아 arr에 대입합니다.

객체를 배열로 변환하기(entries)

  • Object 객체의 메소드 entries는 객체를 배열로 변환합니다. 이 때 객체 내부 요소의 키: 값을 [키 : 값] 배열로 변경합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const obj = {
  moive : "Sunny",
  music : "Like Sugar",
  style : "retro",
}

const arr = Object.entries(obj);
console.log(arr)
-->
[
  [ 'moive', 'Sunny' ],
  [ 'music', 'Like Sugar' ],
  [ 'style', 'retro' ]
]
  • entries 메소드에 변수 obj를 인자로 넣어 호출합니다. obj 객체가 배열로 변환됩니다.

객체 병합 확장하기(assign)

  • Object 객체의 메소드 assign은 인자로 대입된 객체들을 하나로 병합합니다.
  • 첫 번째 인자로 대입된 객체를 기준으로 병합되기 때문에 첫 번째 인자는 원본이 수정되어 반환됩니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
const obj1 = {one : 1, two : 2, three : 3}
const obj2 = {name :"탄1", age : 5, address : "seoul"}


const newObj1 = Object.assign({}, obj1, obj2)
console.log(newObj1)
--> {one: 1,two: 2,three: 3,name: '탄1',age: 5,address: 'seoul'}


const newObj2 = Object.assign(obj1,obj2)
// 첫 번째 인자로 obj1을 대입했기 때문에 원본배열이 반환됩니다.
console.log(obj1)
--> {one: 1,two: 2,three: 3,name: '탄1',age: 5,address: 'seoul'}
This post is licensed under CC BY 4.0 by the author.