[82] getValues / 배열안 객체 키로 값만 배열로 찾기

문제

 

• todos 배열과 todos 배열의 요소인 todo 객체의 프로퍼티 키(id, content, completed) 중 하나를 문자열로 전달하면 해당 프로퍼티 키로 todos 배열의 요소를 정렬해 todos 배열을 반환한다.
  • for 문, for…in 문, for…of 문, Array#forEach는 사용하지 않는다.
  • todos 배열을 변경하지 않는다.

const getValues = (todos, key) => { /* Do something */ }

const todos = [
  { id: 3, content: 'HTML', completed: false },
  { id: 2, content: 'CSS', completed: true },
  { id: 1, content: 'Javascript', completed: false },
];

console.log(getValues(todos, 'id')); // [3, 2, 1]
console.log(getValues(todos, 'content')); // ['HTML', 'CSS', 'Javascript']
console.log(getValues(todos, 'completed')); // [false, true, false]

 

 

 

---

풀이

1번 풀이

처음에는 todos 배열의 객체 하나씩 돌아 typeof로 테이터 타입을 확인하고 숫자형, 문자형, 불린형이 인수로 들어온 'key'와 동일하면 출력하는 전략으로 갔다. 

=> if 문은 통과하는데 값이 배열에 안들어 간다. 왜인지 모르겠다.

  return todos.map((todo) => {

    if (typeof (todo.id) === 'number') {

      todo.id;

    } else if (typeof (todo.content) === 'string') {

      todo.content;

    } else (typeof (todo.completed) === 'boolean')

    todo.completed;

  });

 

  // print

  [undefined, undefined, undefined]

  [undefined, undefined, undefined]

  [undefined, undefined, undefined]

 

 

2번 풀이

 '  && key === 'id'  '  추가

기존 if 문에  키로 들어오는 인자가 'id', 'content', 'completed' 가 맞는지 확인 하는 코드를 추가했다.

=> 동일하게 값이 undefined로 나온다.

 

 

3번 풀이

 '  삼항연산자 ' 

처음 부터 삼항연산자를 시도 하고 포문도 시도했지만 자꾸 안되서 모든 값을 다 콘솔로그로 확인해봤다.

그리고 머리싸매던중 갑자기 key를 안썼다는 생각이 들었다❗❗

 

const valuesArray = todos.map((todo) => {
  typeof (todo.id) === 'number' ? todo.id :
    (typeof (todo.content) === 'string') ? todo.content :
      (typeof (todo.completed) === 'boolean') ? todo.completed : todo;
  
  
  	// 들어오는 값 확인
    console.log("todo.id: ", todo.id );  // 3, 2, 1,  *3 
    console.log("todo: ", todo);  //  { id: 3, ..., ... } 객체 한줄씩 출력  *3
    console.log("key>>> ", key ); // id*3, content*3, completed*3
    console.log(" typeof(todo.content) ", typeof (todo.content));  // string
    console.log(" typeof(todo.completed) ", typeof (todo.completed));  // boolean
  
  
});
console.log(valuesArray);
return valuesArray;

 

전체 코드를 보면 맨 위에 getValues 라는 함수가 있고 그 안에서 map 함수 콜백으로 코드를 쓰고 있었는데

쓰다보니 주석처리하고~ 코드가 밑으로 내려가고~ 머리가 복잡해지고~~ 해서 getValues함수의 인자로 key를 받고는

사용하지 않았다는걸 잊고있었다.

그래서 삼항연산자를 맨 아래 최종풀이코드 처럼 수정하고 아주 간단하게 끝났다.

const getValues = (todos, key) => {
  const valuesArray =  todos.map((todo) => {
        typeof(todo.id) === 'number' ? todo.id : 
      (typeof(todo.content) === 'string') ? todo.content :
     (typeof(todo.completed) === 'boolean') ? todo.completed : todo;

  });
   console.log(valuesArray);
  // return valuesArray;
}

 

 

 

 

 

 

 

 

 

최종풀이코드

// getValues
const getValues = (todos, key) => {
 //return todos.flatMap(todo => key === 'id' ? [todo.id] :
  //(key === 'content' ? [todo.content]: key === 'completed' ? [todo.completed] : key) );	
  
  return todos.map(todo => key === 'id' ? todo.id :
    (key === 'content' ? todo.content : key === 'completed' ? todo.completed : key));
}

const todos = [
  { id: 3, content: 'HTML', completed: false },
  { id: 2, content: 'CSS', completed: true },
  { id: 1, content: 'Javascript', completed: false },
];

console.log(getValues(todos, 'id')); // [3, 2, 1]
console.log(getValues(todos, 'content')); // ['HTML', 'CSS', 'Javascript']
console.log(getValues(todos, 'completed')); // [false, true, false]

 

 

 

---

*배열안 객체 찾기 [  {~~}, {~~}, {~~}  ]

 

예제

const todos = [
  { id: 3, content: 'HTML', completed: false },
  { id: 2, content: 'CSS', completed: true },
  { id: 1, content: 'Javascript', completed: false },
];

 

 

1. 배열안 첫번째 객체 키 찾기

  const keyId = Object.keys(todos[0])[0] //id
  const keyCon = Object.keys(todos[0])[1] //content
  const keyComple = Object.keys(todos[0])[2] //completed

 

 

2. 배열안 첫번째 객체 키의 값 찾기

console.log(Object.values(todos)[0].id); //3