JS [클린코드] | Lookup table & Computed Property Name

Lookup Table

액셀을 다룰 때도 접할 수 있는 용어인 Lookup Table은 배열이나 연관배열과 연관이 깊다. js에서는 객체처럼 키-값의 쌍을 이루는 데이터를 관리할 때 이러한 데이터 구조를 활용한다.

Computed Property Name

객체의 key값을 표현식을 통해 지정하는 것으로 프로퍼티키를 동적으로 생성할 수 있다. 대괄호 안에 표현식을 작성하며 변수나 함수가 들어갈 수도 있다.

const a=10;
const b=20;
const func='sayHi';

const obj ={
    [a]: "a",
    a,
    [b]:"b",
    [a+b]:"plus a+b",
    [func](){ return "Hi"},
    sayHello(){ return "Hello"},
}

console.log(obj[a]); // a
console.log(obj.a); // 10
console.log(obj[a+b]); // plus a+b
console.log(obj[func]()); //  Hi
console.log(obj.sayHello()); // Hello
console.log(obj); 
/*
{ 10: 'a',
20: 'b',
30: 'plus a+b',
a: 10,
sayHi: [λ: sayHi],
sayHello: [λ: sayHello] }
*/

활용

if문, switch문으로 길어질 수 있는 코드를 위의 개념들을 활용하여 가독성 좋게 작성할 수 있다. Lookup Table처럼 객체로 key, value의 값을 할당한 뒤, computed property name을 이용하여 객체의 key값을 변수나 함수로 접근한다.

switch문으로 작성한 코드

function user(type){
 switch (type){
  case 'ADMIN' : return "관리자";
  case 'INSTRUCTOR': return "강사";
  case 'STUDENT': return "수강생";
  case 'UNDEFINED': return "해당 없음";
 }
}

객체와 computed property name을 활용하여 작성한 코드

function user(type) {
    const userType={
        ADMIN:"관리자",
        INSTRUCTOR:"강사",
        STUDENT:"수강생",
        UNDEFINED:"해당 없음"
    }
    return userType[type] ?? userType.UNDEFINED; 
    //??(null병합연산자): null, undefined외에 모든 값은 첫번째 정의된 값 반환
}

console.log(user("")) // 해당 없음
console.log(user('ADMIN')) // 관리자

Reference
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer
https://www.udemy.com/course/clean-code-js/