#TIL09, Javascript object 순회_ object.method/for in

April·2021년 4월 17일
0

✨Javascript

목록 보기
7/45
post-thumbnail

개인 공부를 위해 작성했습니다

javascript object 순회

○객체의 키를 변수로 접근

객체에 특정 키를 만들고 값을 할당하기

  • information 객체에 key 하나를 생성하고
  • 그 키에 값을 할당할 때는 두 가지 방법이 있다
  • [A]와 [B]의 차이점은?
    • key값이 고정되어 있다면 [B] 방법도 좋지만,
    • key값이 변경되어야 한다면 [A] 방법으로 코딩
const information = {
  name: 'april'
}
const verb = 'developes'
const project = 'facebook'

information[verb] = project // [A]
information.developes = 'facebook' // [B]

○객체 순회

객체도 배열처럼 순회가 가능하지만, 배열과 다르게 명확하게 청해진 순서가 없기 때문에, 어떤 순서에 따라 객체의 키에 접근하게 될지는 알 수 없다.
때문에 객체의 순회는 순서가 보장되지 않은 순회라고 한다

●Object.keys()

  • 어떤 객체가 가지고 있는 키들의 목록을 배열로 리턴하는 메소드
const obj = {
  name: 'april',
  age: 20,
  address: 'seoul',
  bloodtype: 'A'
}

Object.keys(obj); // [ 'name', 'age', 'address', 'bloodtype' ]

●Object.values()

  • 어떤 객체가 가지고 있는 값으로 이루어진 배열을 리턴하는 메소드
Object.values(obj); // [ 'april', 20, 'seoul', 'A' ]

●Object.entries() 💡

  • 제일 유용하게 쓰이니 외우기!
  • 객체의 키와 값의 쌍으로 이루어진,
  • 길이 2짜리 배열로 이루어진 배열을 리턴
Object.entries(obj);
/* [
  [ 'name', 'april' ],
  [ 'age', 20 ],
  [ 'address', 'seoul' ],
  [ 'bloodtype', 'A' ]
] */

●for in 💡

  • 💡객체와 배열을 순회할때도 아주 유용함!!
const arr = ['🍒', '🍑', '🍓', '🍌', '🥥']
for (let i in arr) {
  console.log(`${i}: ${arr[i]}`); 
  /*  '0: 🍒'
      '1: 🍑'
      '2: 🍓'
      '3: 🍌'
      '4: 🥥' */
}

const obj = {
  name: 'april',
  age: 20,
  address: 'seoul',
  bloodtype: 'A'
}

for (let key in obj) {
  value = obj[key];
  console.log(`${key}: ${value}`);
}
/* 
'name: april'
'age: 20'
'address: seoul'
'bloodtype: A'
*/

💯 예제 풀기!

  • getExamResult 함수 구현
    • scores 객체가 가지고 있는 키들은 새로운 객체에 포함되어야 한다.
    • 단, 그 값들은 다음 원리에 따라 숫자로 바뀌어 할당되어야 한다.
      • A+ => 4.5
      • A => 4
      • B+ => 3.5
      • B => 3
      • C+ => 2.5
      • C => 2
      • D+ => 1.5
      • D => 1
      • F => 0
    • requiredClasses 배열의 요소로는 존재하지만, scores의 키로는 존재하지 않는 항목이 있다면, 해당 요소는 새로운 객체의 키가 되고, 값으로 0을 가져야 한다.
const scoresResult = { 
  'A+':4.5,              
  'A':4,
  'B+':3.5,
  'B':3,
  'C+':2.5,
  'C':2,
  'D+':1.5,
  'D':1,
  'F':0
};

const getExamResult = (scores, requiredClasses) => {
  const result = {};
  for (let key in scores) {
    // console.log(key);
    // console.log([scores[key]]);
    result[key] = scoresResult[scores[key]]  
  };
  
  const addKeys = Object.keys(result);
  for (let i = 0; i < requiredClasses.length; i++ ) {
    if(!(addKeys.includes(requiredClasses[i]))) {
      result[requiredClasses[i]] = 0;
    }; 
  }
  return result;
};


const scores = {
  '생활속의회계': 'C',
  '논리적글쓰기': 'B',
  '독일문화의이해': 'B+',
  '기초수학': 'D+',
  '영어회화': 'C+',
  '인지발달심리학': 'A+',
};
const requiredClasses = ['영어회화', '기초수학', '공학수학', '컴퓨터과학개론'];
console.log(getExamResult(scores,requiredClasses));
/*
{
  '생활속의회계': 2,
  '논리적글쓰기': 3,
  '독일문화의이해': 3.5,
  '기초수학': 1.5,
  '영어회화': 2.5,
  '인지발달심리학': 4.5,
  '공학수학': 0,
  '컴퓨터과학개론': 0
}                                            
*/

✅ 목표!

  • 현업에서 배열과 객체를 무지무지 자주 사용한다고 하니
  • 관련된 메소드를 다루는 법을 빠삭하게 익혀두자!

MDN_for...in

profile
🚀 내가 보려고 쓰는 기술블로그

0개의 댓글