[JS] 동적으로 Object에 key값 할당하기!

개요

GraphQL document를 보던 중 처음 보는 방식의 코딩이 되어 있어서 어떤 방식으로 사용하는 지 찾아보았다.

해당코드

import { MapperKind, getDirective, mapSchema } from '@graphql-tools/utils';
import { GraphQLSchema, defaultFieldResolver } from 'graphql';

export function upperDirectiveTransformer(
  schema: GraphQLSchema,
  directiveName: string,
) {
  return mapSchema(schema, {
    //이 부분이 무엇인지 몰랏다.!
    [MapperKind.OBJECT_FIELD]: (fieldConfig) => {
      const upperDirective = getDirective(
        schema,
        fieldConfig,
        directiveName,
        //?.도 무슨말인지 몰랏다.
      )?.[0];

      if (upperDirective) {
        const { resolve = defaultFieldResolver } = fieldConfig;

        fieldConfig.resolve = async function (source, args, context, info) {
          const result = await resolve(source, args, context, info);
          if (typeof result === 'string') {
            return result.toUpperCase();
          }
          return result;
        };
        return fieldConfig;
      }
    },
  });
}

위 코드의 [MapperKind.OBJECT_FIELD] 부분이 이해가 되지 않았다. 그래서 자바스크립트의 교과서 처럼 불리는 javascript.io에 들어가서 객체에 대해서 찾아보았다. 살펴보니 해당 코드는 동적 key를 할당하고자 할 때 사용하는 방법이었다. 쉬운 코드로 살펴보자!

let fruit = prompt("어떤 과일을 구매하시겠습니까?", "apple");

let bag = {
  [fruit]: 5, // 변수 fruit에서 프로퍼티 이름을 동적으로 받아 옵니다.
};

alert( bag.apple ); // fruit에 "apple"이 할당되었다면, 5가 출력됩니다.

해당 코드를 보면 fruit 변수에 할 당된 apple이란 문자열로 key가 설정된것을 확인할 수 있다.

결론

참 기본을 충실해야겠다. 새로운 활용법은 쏟아지는데, 그 방법을 모르면 안되지 않되지.. 화이팅!!