[JavaScript] Built-in Object Methods

하우즛 고잉 가이즈? 동기 여러분! 오늘은 너무나도 신나게도 자바스크립트 기초문법의 마지막 시간입니다. 이 주제를 마지막으로 Codecademy에서 제공하는 무료 레슨은 끝이 나게 됩니다. 아싸ㅋㅋㅋ 힘내서 가보도록 하죠!

 

Built-in Object Methods

객체에서 우리가 메서드를 만들 수도 있지만, 만들어져 있는 메서드도 있는데 적재적소에 당겨와서 사용해주면 코드를 작성함에 있어서 더욱 쾌적한 환경이 만들어질 수 있습니다.

 

MDN Web Docs에 있는 객체의 스태틱 메서드를 세 가지 정도 가져와서 알아보는 시간을 갖도록 하겠습니다. 링크 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object#Methods

Object - JavaScript | MDN

 

---

 

Object.assign()

하나 또는 그 이상의 소스 객체에서 나열된 모든 프로퍼티를 복사하여 타겟 객체에 넣어줄 수 있는 아주 유용한 녀석입니다.

 

사용방법

Object.assign(목표 객체, 소스 객체, ...);

 

예제

// Object.assign()

const num123 = {
  one : 1,
  two : 2,
  three : 3
};

const num456 = {
  four : 4,
  five : 5,
  six : 6
};

const num123456 = Object.assign(num123, num456);

console.log(num123456);

// 출력 : { one: 1, two: 2, three: 3, four: 4, five: 5, six: 6 }

여기서 console.log(num123);을 한다면 무엇이 출력이 될까요?

 

console.log(num123);

// 출력 : { one: 1, two: 2, three: 3, four: 4, five: 5, six: 6 }

num123456과 똑같이 출력이 됩니다. 이렇게 된 이유는 메서드를 사용한 문장에서 알 수 있는데요, 메서드를 사용할 때,

Object.assign(타겟 객체, 소스 객체, 소스객체2, 소스객체3, ...)

고로 num123이 타겟 객체이기 때문에 소스 객체인 num456이 num123으로 들어갔기 때문에 위와 같이 출력이 됩니다.

 

---

 

Object.entries()

이 메서드는 객체의 프로퍼티를 [ Key : Value ]로 뽑아주는 독특한 친구인데요, 눈치채셨겠지만 [ ]는 배열을 의미합니다. 

 

사용 방법

Object.entries(넣고 싶은 객체);

 

 

예제

const nickname = {
  yasuo : '야스오충, 야필패',
  teemo : '티모충, 티확찢, ^오^',
  rammus : '람머르기니',
  masterYi : '마이충'
};

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

/* 출력 : [ [ 'yasuo', '야스오충, 야필패' ],
  [ 'teemo', '티모충, 티확찢, ^오^' ],
  [ 'rammus', '람머르기니' ],
  [ 'masterYi', '마이충' ] ] */

출력값을 보면 전부 배열로 나오기 때문에 특히 크롤링이나 이와 비슷한 작업을 할 때는 상당히 불편할 수 있습니다. 그렇다면 아래의 코드와 같이 for... in 반복문으로 깔끔히 출력을 할 수 있습니다.

 

const nickname = {
  yasuo : '야스오충, 야필패',
  teemo : '티모충, 티확찢, ^오^',
  rammus : '람머르기니',
  masterYi : '마이충'
};

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

/* 출력 : yasuo : 야스오충, 야필패
teemo : 티모충, 티확찢, ^오^
rammus : 람머르기니
masterYi : 마이충 */

어때요? 정말 쉽죠? ㅎㅎㅎ

 

---

 

Object.keys()

이건 keys라는 문자만 봐도 감이 오실거라 생각합니다. 네! 그렇습니다. Key값만 뽑아와 주는 아주 귀여운 녀석이죠. 항상 Value만 뽑아와서 Key가 몹시 서운했다고요!

 

사용 방법

Object.keys(넣고 싶은 객체);

 

예제

디아블로 2 소켓 큐빙에 대한 객체입니다ㅎ 소켓이 뚫리지 않았고, 접두사가 없는 노멀 아이템에 한에서 소켓 큐빙이 가능합니다(에테리얼은 가능 하지만 벅큐빙은 디아블로2 레저렉션이 나오면서 막힘). 소켓은 1개부터 아이템의 최대 소켓까지 뚫립니다.

 

const socketCubing = {
  armour : '탈룬 + 주울룬 + 최상급 토파즈 + 노말 갑옷',
  weapon : '랄룬 + 앰룬 + 최상급 자수정 + 노말 무기',
  helmet : '랄룬 + 주울룬 + 최상급 사파이어 + 노말 헬멧',
  shield : '탈룬 + 앰룬 + 최상급 루비 + 노말 방패'
};

console.log(Object.keys(socketCubing));

// 출력 : [ 'armour', 'weapon', 'helmet', 'shield' ]

매일 value만 출력하다가 key를 출력하니까 색다르네요!

 

---

오늘의 느낌

자바스크립트를 마치면서 파이썬을 시작으로 코드를 만지기 시작하면서 제가 느낀 느낌은 아니 지금 느끼는 느낌은 배가 고파서 생각이 안 나네요ㅋㅋㅋㅋ 다음 시간엔 HTML로 찾아뵙겠습니다. 그럼 20000