[JS] Object 메소드 정리

Maria Kim·2021년 11월 6일
0
post-custom-banner

이제부터 Object 메소드를 제대로 이해하고 Object 메소드를 사용해 더 효율적인 코드를 작성해 보고자 Object 메소드를 MDN 에서 전체적으로 살펴보고 내가 지금 바로 사용할 수 있는 내용을 정리해 보았다.

MDN Object

Object.assign(target, ...sources)

[MDN]Object.assign

  • 객체 값들을 한 번에 모아주고 싶을 때 사용
  • return -> 모두 합친 결과, return type : object
  • target 객체 또한 변함

(🤔 객체의 push 같은 느낌?!, target이 변함을 꼭 기억하자!!)

Object.entries(obj)

[MDN]Object.entries

  • 객체 자체의 열거 가능한 속성 [key, value] 쌍의 배열을 반환
    (for in -> 프로토 타입 체인의 속성 + 열거 가능한 속성 모두 열거)
  • 반환된 배열은 객체가 정의된 순서와 관련 x (object 는 순서가 있는 배열이 아니니까요!)
  • BUT, sort가 필요하면 sort 하면 되겠죠?!
Object.entries(obj).sort((a, b) => a[0].localeCompare(b[0]));
  • Object 는 원래 반복 가능한 객체가 아니기 때문에 for of 문을 사용하지 못하고 in 문을 사용해야 함. 하지만 Object.entries 를 사용하면 key 와 value 를 변수로 바로 사용할 수 있음.
  • Object 는 for in 문을 사용하면 변수로 key 값만 사용gkf 수 있음.

(🤔 Object.entries 를 이용하면 데이터 타입 MAP을 굳이 사용하지 않아도 객체에서 바로 for of 문에서 key 와 value 를 바로 가져와 사용 할 수 있다. 아래 그림 처럼!)

Object.fromEntries(iterable)

[MDN] Object.fromEntries

  • Object.entries의 반대
  • [키, 값] 로 이루어진 배열을 객체로 변환
  • iterable - 반복 가능한 객체. 즉, Array, Map 또는 반복 규약을 구현한 기타 객체

(🤔 API 로 데이터를 받았을 때 배열로 되어있는 것들을 객체로 변환해 사용할 때 좋을 것 같음)

Object.keys(obj)

[MDN] Objects.keys()

  • 객체의 key 값들을 반환한다.
  • return -> key들의 배열

Object.values(obj)

[MDN] Object.values

  • 객체의 values로 이루어진 배열 리턴
  • return 된 배열은 for...in 구문과 동일한 순서를 가짐
    (for in 반복문은 프로토타입 체인 또한 열거한다는 점에서 차이가 있음)

Object.freeze(obj)

[MDN] Object.freeze(obj)

  • 객체를 동결하기 위해 사용
  • 넣은 객체를 동결! 복사되어 동결된 객체를 반환하는 것이 아님!!
  • 새로운 속성 추가, 속성 제거, 속성 수정, 프로토타입 변경 안됨
    (하지만 얕은 동결이기 때문에 object 직속 속성에만 적용되며 직속 속성이 아닌 그 내부의 속성인 경우 변경이 됨.)
  • 새로운 속성 추가, 속성 제거, 속성 수정, 프로토타입 변경 시 -> 조용하게 아무것도 하지 않음(에러 안뜸)
  • return 값은 함수로 전달된 객체, 객체 사본이 아님!(리턴 값을 다른 변수에 할당하고 변경 시 기존의 변수도 값이 변경됨!)

(🤔 이 항목이 있지만 이제는 TYPESCRIPT 를 사용하면 굳이 이 방법을 사용하지 않아도 돼서 요즘은 잘 사용하지 않는다고 한다.)

profile
Frontend Developer, who has business in mind.
post-custom-banner

0개의 댓글