[JavaScript][clean-code] Computed Property Name

* Computed Property Name (계산된 속성)

• 객체의 key값을 표현식(변수, 함수 등을 이용)을 통해 지정하는 것입니다.
• 속성명에 표현식을 사용하려면 대괄호("[ ]") 안에 표현식을 쓰면 됩니다.
• 표현식은 위에서와 같이 변수가 들어올 수도 있고, 함수가 들어올 수도 있습니다.

* Computed Property Name 사용 예시(리액트)

const handleChange = (e) => {
  setState({
    [e.target.name] : e.target.value;
  });
};

return (
  <React.Fragment>
    <input value={state.id} onChange={handleChange} name="name"/>
    <input value={state.password} onChange={handleChange} name="password"/>
  </React.Fragment>
);

• input안의 taget이 된 name의 값과 value를 가져온다 (계산된 값들)
• Computed value(input안의 name과 password)를 이용하면 동적으로 계산된 값이 들어오는 속성도 대처를 할 수 있다.

* Computed Property Name 사용 예시(리덕스)

const noop = createAction('INCREMENT');

const reducer = handleActions(
  {
    [noop]: (state, action) => ({
      counter : state.counter + action.payload,
    }),
  },
  { counter: 0 },
);

• noop라는 Computer Property name이 사용되었다.

* 함수에서 사용 예시

const funcName2 = 'func2';

const obj = {
  [funcName0]() {
    return 'func0';
  },
  [funcName1]() {
    return 'func1';
  },
  [funcName2]() {
    return 'func2';
  },
};

for (let i=0; i < 3; i++) {
  console.log(obj[`func${i}`]()); // func0, func1, func2
}