JavaScript_ object_객체의 키를 변수로 가져오기

Daye Kang·2019년 12월 7일
6
post-custom-banner

* Assignment

'getExamResult' 함수 구현하기. 인자 'requiredClasses' 배열의 요소로는 있지만, 인자 'scores'의 키로는 존재하지 않는 요소가 있다면, 해당 요소는 'scores'의 객체의 새로운 키가 되고 값은 0이 됩니다.

const getExamResult = (scores, requiredClasses) => {
  //const results = {}; 새로운 빈 객체 생성(인자로 들어온 객체는 변형하지 않는 것이 좋다)
  
   for(let i in requiredClasses) { // for loop
    const name = requiredClasses[i]; // 'name'이라는 새로운 변수에 배열의 element 할당
    console.log(name); // 영어회화  기초수학  공학수학  컴퓨터과학개론
    
    const score = scores[name]; // 'score' 새로운 변수에 객체 'scores'의 키로 변수 'name' 넣기 
    console.log(score); // scores[name]의 키값 => 2.5   1.5   undefined   undefined
                        // scores의 키 중에 '공학수학'과 '컴퓨터과학개론'은 없기 때문에
                        // 그 값이 undefined가 나옴
    if(!score) { // scores[name]의 값이 없다면
      scores[name] = 0; // results 객체에 키 'name'의 값으로 0을 할당한다.
    }
  } 
    return scores; //  scores = { '생활속의회계': 2,
                                // '논리적글쓰기': 3,
                                // '독일문화의이해': 3.5,
                                // '기초수학': 1.5,
                                // '영어회화': 2.5,
                                // '인지발달심리학': 4.5,
                                // '공학수학': 0 
                                // '컴퓨터과학개론': 0 }
                                //   }
 
//인자 값 넣어주기
const scores = {
  '생활속의회계': 2,
  '논리적글쓰기': 3,
  '독일문화의이해': 3.5,
  '기초수학': 1.5,
  '영어회화': 2.5,
  '인지발달심리학': 4.5,
  }
  
const requiredClasses = ['영어회화', '기초수학', '공학수학', '컴퓨터과학개론'];


getExamResult(scores, requiredClasses); //함수 호출하기

** the concept of the code

=== 객체의 키를 변수로 할당하기 ===

새로운 변수를 만들어 객체의 키와 값으로 할당해보자.

// ES5
var key = "make_my_key"; // 새로운 키를 선언한다

     // step 1. 새로운 객체를 만든다.
var obj = {};  

    // step 2. 새로운 키와 값을 객체에 할당한다.
obj[key] = "some_value";

console.log(obj); /// {"make_my_key": "some_value"}

키의 값도 변수를 만들어 객체에 할당해보자.

let obj = {
   "name_company" : "weCode"
}; // 새로운 객체 선언

let anotherCompany = "name_company_2"; // 새로운 key 변수 선언
let anotherCompanyName = "youCode"; // 새로운 key value 변수 선언

// 키와 값을 변수로 받아오면 2가지의 방식을 쓸 수 있다.
obj[anotherCompany] = anotherCompanyName; // [A] 변수명으로 받아오기
obj["name_company_2"] = "youCode"; // [B] 변수의 값으로 받아오기

[A]의 방식을 사용하면 변수의 값을 바꾸게 되더라도 수정없이 변경된 값을 가져올 수 있지만,
[B]의 방식을 사용하게 되면 고정된 값이 되어 버린다.

추가적으로 ES6에서는 객체의 변수를 할당하는 syntax가 더 간단하게 변경되었다.

// ES6

let key2 = "make_one_more"; // 새로운 키 변수 선언

      // step 1. 객체와 변수값 함께 만들기
let obj2 = {[key2]: "more value"}; // 훨씬 더 간략하게 키와 값이 할당되었다.

console.log(obj2); /// {"make_one_more": "another_value"}
profile
뭐든 하자
post-custom-banner

2개의 댓글

comment-user-thumbnail
2019년 12월 8일

ES6 객체변수 할당 방법! 정말 매력적이네요!

답글 달기
comment-user-thumbnail
2019년 12월 8일

오 깔끔하게 정리돼 있네요~

답글 달기