[JavaScript] Factory Functions

하우즛 고잉 가이즈? 동기 여러분! 오늘은 Factory Functions, 공장 함수에 대해 알아보겠습니다. 오늘 내용은 쉽고 간단하니까 빠르게 알아보도록 하죠!

 

Factory Functions

리그 오브 레전드의 챔피언들의 스킬 이름을 알아보는 자료를 만든다고 생각해봅시다. 우리가 지금까지 배운 객체(Object)를 사용한다면 일일이 정보를 적어서 채워줘야 하는 방식입니다. 아래의 코드를 봅시다.

 

// JavaScript 

const champions = {
    name : '가렌',
    passive : '인내심',
    q : '결정타',
    w : '용기',
    e : '심판',
    r : '데마시아의 정의',
    quote() {
        console.log('내 검과 심장은 데마시아의 것이다!')
    }
}

가렌에 대한 코드를 적어주고 또 다른 챔피언의 코드를 작성해주려면 다시 다 작성해야하는 번거로움이 있습니다.

 

이럴 때, 사용할 수 있는 아주 유용하고 귀엽고 깜찍하고 쉬운 방법이 있는데, 그것이 바로 공장 함수(Factory Function)를 사용하는 것입니다.

 

const champions = (name, passive, q, w, e, r, quote) => {
    return {
        name : name,
        passive : passive,
        q : q,
        w : w,
        e : e,
        r : r,
        quotes() {
            console.log(quote);
        }
    }
};

함수로 선언을 하는데 매개변수(Parameter)에 넣고 싶은 프로퍼티(Property)의 값(Value)을 넣어주면 됩니다. 

 

quote를 보면, 메서드 안에 있는 조건을 매개변수로 지정하여 원하는 값을 만들 수도 있습니다. 아래의 코드를 보도록 합시다.

 

const garen = champions(
    '가렌', 
    '인내심', 
    '결정타', 
    '용기', 
    '심판', 
    '데마시아의 정의', 
    '내 검과 심장은 데마시아의 것이다!'
    );

console.log(garen.q);
garen.quotes();

/* 출력 : 결정타      
          내 검과 심장은 데마시아의 것이다! */

먼저 garan이란 변수를 만들어서 함수 champions를 쓰고 소괄호 안에 독립 변수(Argument)들을 차례대로 넣으면 됩니다.

 

순서대로 이름은 가렌, 패시브는 인내심, q 스킬은 결정타, w 스킬은 용기, e 스킬은 심판, 궁극기는 데마시아의 정의, 가렌의 대사는 내 검과 심장은 데마시아의 것이다!

 

그리고 코드가 잘 작동하는지 알아보기 위해 console.log(garen.q);로  q 스킬을 출력해보니 결정타라고 나오고 garen.quotes();로 메서드도 작동을 해보았더니 내 검과 심장은 데마시아의 것이다!라고 잘 출력이 되어 나오는 것을 확인할 수 있습니다.

 

---

 

Property Value Shorthand

ES6 버전에서 소개된 프로퍼티 벨류 쇼트 핸드 (번역 안 하겠음 했더니 이상함. Shorthand는 속기, 약칭 이란 뜻을 가지고 있음)는 공장 함수(Factory Function)를 더욱 빠르고 쉽고 짧게 만들어주는 기능입니다. 위의 코드를 토대로 만들어 보겠습니다.

 

const champions = (name, passive, q, w, e, r, quote) => {
    return {
        name,
        passive,
        q,
        w,
        e,
        r,
        quotes() {
            console.log(quote);
        }
    }
};

짠! : (colon)과 벨류(Value)만 지우면 됩니다. 으때요? 정말 쉽죠ㅋㅋㅋ

 

잘 작동하는지만 알아보고 오늘은 마치도록 하겠습니다.

 

 

아주 깔끔하게 작동합니닼ㅋㅋㅋ

 

---

 

오늘의 느낌

느낌적인 느낌