함수 작성 방법(익명함수, 화살표 함수)

플레이어와 상대 컴퓨터의 가위, 바위, 보 대결을 하는 코드의 일부를 이용하여 몇 가지의 함수 작성 예시를 살펴보겠습니다.

 

아래는 코드는 기본적으로 사용하는 함수 작성 방법입니다.

 

가위, 바위, 보 대결 코드 일부

const ROCK = "ROCK";
const PAPER = "PAPER";
const SCISSORS = "SCISSORS";

const RESULT_DRAW = "DRAW";
const RESULT_PLAYER_WINS = "PLAYER_WINS";
const RESULT_COMPUTER_WINS = "COMPUTER_WINS";


function getWinner(computerChoice, playerChoice) {
  if (computerChoice === playerChoice) {
    return RESULT_DRAW;
  } else if (
    (computerChoice === ROCK && playerChoice === PAPER) ||
    (computerChoice === PAPER && playerChoice === SCISSORS) ||
    (computerChoice === SCISSORS && playerChoice === ROCK)
  ) {
    return RESULT_PLAYER_WINS;
  } else {
    return RESULT_COMPUTER_WINS;
  }
}

컴퓨터의 선택과 플레이어의 선택을 매개변수로 받아 대결의 결과를 return 해주는 기본적인 형태의 함수입니다.

 

해당 함수를 여러 곳에서 호출할 경우 함수를 정의 한 다음 호출하는 것이 적합합니다.

 

만약 함수의 호출을 한 번만 하면 될 경우 익명 함수나 화살표 함수를 사용하여 코드의 길이도 줄이고 간편하게 사용할 수 있습니다.

 

 

 

 

 

 

 

Function.prototype.call() - JavaScript | MDN

 

화살표 함수 - JavaScript | MDN

 

 

 

---

 

익명함수

익명 함수는 이름 그대로 함수의 이름을 지어주지 않고 사용하는 것입니다.

 

기본적인 사용형태는 아래와 같습니다.

function ( 매개변수 1, 매개변수 2 ) {
     return...
}

 

function 키워드를 사용하며 함수의 이름은 작성하지 않고, 사용할 매개변수와 함수 본문을 작성해주시면 됩니다.

 

매개변수를 사용하지 않을 경우 function()으로 사용하시면 됩니다.

 

 

익명 함수의 경우 아래 코드처럼 변수나 상수에 선언하거나 함수의 호출이 필요한 부분에서 선언하여 사용해주어야 합니다.

상수에서 함수 선언

const sumValue = function (a, b){
  return a + b;
}

//익명 함수 사용
sumValue(1, 2);

위의 코드 예시처럼 상수에 익명 함수 선언을 해주면 상수 sumValue는 3이 반환하게 됩니다.

 

함수의 호출이 피요한 부분에서 선언

sumBtn.addEventListener("click", function (a, b) {
  return a + b;
});

 

 

상단의 가위, 바위, 보 대결 코드 일부를 익명 함수를 사용하여 변경해보겠습니다.

가위, 바위, 보 대결 코드 일부를 익명 함수를 사용하여 변경

const ROCK = "ROCK";
const PAPER = "PAPER";
const SCISSORS = "SCISSORS";

const RESULT_DRAW = "DRAW";
const RESULT_PLAYER_WINS = "PLAYER_WINS";
const RESULT_COMPUTER_WINS = "COMPUTER_WINS";

//익명함수 사용
const getWinner = function (computerChoice, playerChoice) {
  if (computerChoice === playerChoice) {
    return RESULT_DRAW;
  } else if (
    (computerChoice === ROCK && playerChoice === PAPER) ||
    (computerChoice === PAPER && playerChoice === SCISSORS) ||
    (computerChoice === SCISSORS && playerChoice === ROCK)
  ) {
    return RESULT_PLAYER_WINS;
  } else {
    return RESULT_COMPUTER_WINS;
  }
};

 

 

 

 

 

---

 

화살표 함수

화살표 함수의 일반적인 구문은 아래와 같습니다.

( 매개변수 1, 매개변수 2 ) => {
        ...
}

function 키워드를 사용하지 않고 함수의 선언이 가능하며

 

매개변수가 담기는 리스트와 함수 본문 사에이  ' => '를 사용하여 함수를 선언합니다.

 

' => '는 연산자와는 상관이 없는 수학 기호로 결합된 새로운 키워드입니다.

 

 

화살표 함수의 특징은 다양한 방식으로 설계가 가능하며 사용하려면 위의 익명 함수의 특징처럼

 

변수나 상수에서 선언하거나 함수의 호출이 필요한 곳에서 선언을 해주어야 합니다.

 

상수에서 함수 선언

const sumValue = (a, b) => {
  return a + b;
};

sumValue(1, 2);

 

함수의 호출이 필요한 곳에서 함수 선언

sumBtn.addEventListener("click", (a, b) => {
  return a + b;
});

위의 설명처럼 화살표 함수는 익명 함수를 사용할 수 있는 곳에서 사용이 가능합니다.

 

즉, 함수를 전달하는 곳이나 익명 함수를 사용할 수 있는 곳에서 사용이 가능합니다.

 

 

상단의 가위, 바위, 보 대결 코드 일부를 화살표 함수를 사용하여 변경해보겠습니다.

가위, 바위, 보 대결 코드 일부를 화살표 함수를 사용하여 변경

const ROCK = "ROCK";
const PAPER = "PAPER";
const SCISSORS = "SCISSORS";

const RESULT_DRAW = "DRAW";
const RESULT_PLAYER_WINS = "PLAYER_WINS";
const RESULT_COMPUTER_WINS = "COMPUTER_WINS";

//화살표 함수 사용
const getWinner = (computerChoice, playerChoice) => {
  if (computerChoice === playerChoice) {
    return RESULT_DRAW;
  } else if (
    (computerChoice === ROCK && playerChoice === PAPER) ||
    (computerChoice === PAPER && playerChoice === SCISSORS) ||
    (computerChoice === SCISSORS && playerChoice === ROCK)
  ) {
    return RESULT_PLAYER_WINS;
  } else {
    return RESULT_COMPUTER_WINS;
  }
};

 

 

 

화살표 함수는 매개변수의 개수와 함수 본문 안의 표현식의 개수에 따라 다양한 사용형태가 있습니다.

 

함수 본문 안 표현식이 1개일 경우

화살표 함수의 경우  아래의 코드처럼 함수 본문에 표현식이 하나만 있을 경우 중괄호가 생략이 가능합니다.

const sumValue = (a, b) => a + b;

sumValue(1, 2);

중괄호를 생략할 경우 함수 본문 안에 포함된 모든 return 키워드와 return문을 제거해주어야 합니다.

 

이는 중괄호를 생략할 경우 return이 없는 것이 아니라 표현식 'a+b;' 앞에 생략되어있는 것이기 때문입니다. 

 

여기서 주의 하실 사항은 반환하는 것이 객체라면 객체를 아래처럼 소괄호로 추가로 감싸주어야합니다.

const person = personName => ({name: personName });

중괄호는 함수 본문을 구분하는 기호로 해석되거나 문장의 구분으로 해석 되기 때문에 소괄호를 사용해주셔야 합니다.

 

 

위의 화살표 함수를 사용하여 변경한 코드를 중괄호를 생략한 형태로 수정해보겠습니다.

const getWinner = (computerChoice, playerChoice) =>
  computerChoice === playerChoice
    ? RESULT_DRAW
    : (computerChoice === ROCK && playerChoice === PAPER) ||
      (computerChoice === PAPER && playerChoice === SCISSORS) ||
      (computerChoice === SCISSORS && playerChoice === ROCK)
    ? RESULT_PLAYER_WINS
    : RESULT_COMPUTER_WINS;

함수 본문 안에 1개의 표현식만 있어야 중괄호를 생략할 수 있기 때문에  기존의 if문을 삼항 연산자를 이용하여 1개의 표현식으로 만들어주었습니다.

 

 

매개변수가 1개만 있는 경우

const sumValue = 매개변수 => a + b;

매개변수를 1개만 받는 경우는 소괄호를 생략할 수 있습니다.

 

위의 경우는 매개변수가 1개이고 표현식이 1개 이기 때문에 중괄호와 소괄호를 생략할 수 있습니다.

 

 

 

하지만 위의 2가지 경우가 아니라면 괄호와 필요시 return문을 입력해주어야 합니다.