computed property

개요

반복문을 돌며, 회사이름마다 맵형식으로 데이터를 씌운 뒤, 배열에 넣어야 하는 상황이 생겼다.

 

그런데 object의 key값을 변수로 넣어지지 않아 이를 해결하고자 구글링 해서 얻은 지식.

 

computed property

- computed property는 ES6부터 사용되었으며, 객체를 선언하는 순간에 변수를 활용하여 동적인 프로퍼티 명을 할당할 수 있게 해준다.

 

- computed property 문법은 자바스크립트 객체의 key 속성명을 표현식(변수, 함수 등)을 통해 지정하는 문법이다!

---

예시

      selectableCompanies.forEach(company => {
        const companyName = company.companyName;
        const companyObject = { companyName: true }
        selectedCompanies.push(companyObject);
      })
      
      
      // 위 companyObject 는 변수를 할당하지 못하고 하드코딩 되어, { companyName: true } 가 된다!

 

이를 해결하기 위해 computed property 문법 적용

 

      selectableCompanies.forEach(company => {
        const companyName = company.companyName;
        const companyObject = { [companyName]: true }
        selectedCompanies.push(companyObject);
      })
      
      // computed property를 적용시켜, companyName에 전에 할당 된 company.companyName이
	  // 들어가게 된다!
      // ex) companyObject = { '삼성생명': true }