당근먹는하니
귀엽고 행복해
당근먹는하니
전체 방문자
오늘
어제
  • 분류 전체보기 (274)
    • 다람쥐🐿 (26)
    • C++ 공부빵야 (7)
    • 공부👻 (5)
    • 프론트엔드✏️ (228)
      • 코드캠프 (120)
      • 팀 프로젝트✨ (31)
      • 개인공부 (67)
    • 프론트엔드 - 바닐라js (7)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • javascrpit
  • 코딩 부트캠프
  • 팀플
  • HTML
  • 배열
  • 리액트
  • 코드캠프
  • ssg
  • algorithm
  • next.js
  • 부트캠프
  • 자바스크립트
  • graphql
  • typescript
  • React-hook-form
  • 팀프로젝트
  • 공통 컴포넌트
  • react
  • 프론트엔드
  • 회고
  • CSS
  • javascript
  • 코딩
  • JS
  • refreshtoken
  • 알고리즘
  • 프로그래머스
  • 배포
  • 팀 프로젝트
  • emotion

최근 댓글

최근 글

티스토리

250x250
반응형
hELLO · Designed By 정상우.
당근먹는하니

귀엽고 행복해

프론트엔드✏️/코드캠프

Object.keys(), values, entries, assign

2022. 6. 5. 13:38
728x90
반응형

  Objct.keys() 

 Object.keys() 메소드는 객체 안의 key를 배열에 묶어서 반환한다. 

 

// 사용법
const lovely = {
	dog : 'greenbean',
    cat : 'yellow', 
    me : false
};

Object.keys(lovely); // ["dog", "cat", "me"]

 

// 순서
const myobj = {
	17 : 'greenbean',
    2 : 'yellow',
    7 : false
};

Object.keys(myobj); // ["2", "7", "17"]

 

 

  Object.values()

 Object.values() 메소드는 객체 안의 value를 배열에 묶어서 반환한다. 

// 사용법
const lovely = {
	dog : 'greenbean',
    cat : 'yellow', 'white',
    me : false
};

Object.values(lovely); // ["greenbean", "yellow", false ]

 

// 순서
const myobj = {
	17 : 'greenbean',
    2 : 'yellow',
    7 : false
};

Object.keys(myobj); // ["yellow", false, "greenbean"]

 

  Object.entries()

 Object.entries() 메소드는 for...in와 같은 순서로 객체 안의 [key, value]쌍의 배열을 반환한다.

 

const object1 = {
  a: 'somestring',
  b: 42
};

for (const [key, value] of Object.entries(object1)) {
  console.log(`${key}: ${value}`);
}

// "a: somestring"
// "b: 42"


console.log(Object.entries(object1)); 

// Array [Array ["a", "somestring"], Array ["b", 42]]

 

 

  Object.assign()

 Object.assign() 메소드는 출처 객체의 속성을 대상 객체에 붙여넣은 후 그 대상 객체를 반환한다.

 

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target);
// expected output: Object { a: 1, b: 4, c: 5 }

console.log(returnedTarget);
// expected output: Object { a: 1, b: 4, c: 5 }

출처 객체에서 속성 값을 가져올 땐 [[Get]], 목표 객체에 속성 값을 지정할 땐 [[Set]]을 사용한다. (각각 접근자와 설정자를 호출함) 

즉 이 메소드는 속성을 단순히 복사하거나 새로 정의하는 것이 아니라 할당하는 것이다. 

 

 

출처 : MDN

728x90
반응형
저작자표시 비영리 동일조건 (새창열림)

'프론트엔드✏️ > 코드캠프' 카테고리의 다른 글

Throttling & Debouncing  (0) 2022.06.06
Shallow Routing  (0) 2022.06.05
220603 프론트엔드 부트캠프 중간고사  (0) 2022.06.05
프론트엔드 부트캠프 한 달,  (0) 2022.06.03
220602 프론트엔드 부트캠프 23일차 : 이미지 프로세스, ref  (0) 2022.06.03
    '프론트엔드✏️/코드캠프' 카테고리의 다른 글
    • Throttling & Debouncing
    • Shallow Routing
    • 220603 프론트엔드 부트캠프 중간고사
    • 프론트엔드 부트캠프 한 달,
    당근먹는하니
    당근먹는하니

    티스토리툴바