[자바스크립트 떠먹여 주는 남자] Normal Function vs. Arrow Function

안녕하세요!

 

밀렸던 포스트 쓰느라 바쁜 AllenC 입니다. 한동안 사정상 블로그를 좀 미뤄뒀는데요, 이제 다시 열정을 불태워 보도록 하겠습니다!

 

 

이번 포스트에서 다뤄 볼 내용은, JS 개발 시 매우 자주 사용하는 함수입니다. 처음 JS 로 개발을 시작했을 당시에 화살표 함수는 뭔지 몰라 사용하지 않았었는데요, 어느 순간부터 그냥 일반 함수처럼 사용할 수 있구나 라고 생각하게 되어 그 후부터는 대부분을 화살표 함수로 사용했습니다. 하지만 최근 궁금증이 생겨 검색을 해 보았는데요, 생각보다 많은 차이점이 있는 것을 알게 되어 공유하고자 이렇게 글을 작성하게 되었습니다.

 

그럼 출발 해 보도록 하겠습니다. 열정 열정 열정 🔥🔥🔥🔥

Syntax

당연한 얘기일 수 있겠지만, 일반 함수와 화살표 함수는 정의하는 방식이 다릅니다. 참고로 화살표 함수는 ES6 에서 처음 공개 되었습니다.

const normalFunction = function(givenName, surname) {
  console.log("Hello, my name is " + givenName + " " + surname);
};

normalFunction("John", "Doe");

const arrowFunction = (givenName, surname) => {
  console.log(`Hello, my name is ${givenName} ${surname}`);
};
arrowFunction("Jane", "Doe");

보시는 바와 같이 화살표 함수에는 function 키워드를 사용하지 않고 그 대신 => 을 사용하여 줍니다. 이번 포스트에 직접적으로 연관된 건 아니지만, 알쓸신잡 느낌으로 한가지 말씀 드리자면, 화살표 함수 안의 콘솔 로그에는 `` (backticks) 을 사용하여 문자를 표시해 주는 방식으로 코드를 작성해 보았습니다. 그 이유는 백틱을 사용해서 출력하는 방식 또한 ECMASCript 6 (ES6) 에서 공개 되었기 때문입니다. 

 

화살표 함수에서 만약 매개변수 (parameter) 가 하나이거나 없을 경우에는 괄호 생략이 가능합니다.

const arrowFunctionWithOneParameter = param => {
  console.log(`Passed parameter: ${param}`);
};

const arrowFunctionWithoutParameters = _ => {
  console.log(`No parameters are provided`);
};

Arguments Binding

일반 함수에서는 arguments 바인딩을 통해 인자를 전달 받을 수 있습니다. 하지만 화살표 함수에서는 이것이 불가능한데요, 코드와 출력 결과로 확인 해 보겠습니다.

const normalFunction = {
  displayArguments() {
    console.log(arguments);
  }
};
normalFunction.displayArguments("John", "Doe");

const arrowFunction = {
  displayArguments: () => {
    console.log(arguments);
  }
};

arrowFunction.displayArguments("Jane", "Doe");

코드 실행 결과

보시는 바와 같이 일반 함수에 인자값 (arguments) 을 전달했을 경우 매개변수의 형태로 존재하지 않더라도 arguments 를 통하여 인자값들을 받을 수 있습니다. 또한 for 루프를 통한 iteration 이 가능한데요, 반대로 화살표 함수에서는 Reference 에러가 발생하였습니다.

this 키워드

이 챕터를 시작하기 전에 혹시 아직 this 가 무엇인지, 혹은 어떻게 사용되는지 잘 모르시는 분들은

2022.03.23 - [Studying/JavaScript & Frameworks] - [JavaScript 떠먹여 주는 남자] this 키워드 를 먼저 읽어보시고 오는 것을 추천 드립니다..후후

[JavaScript 떠먹여 주는 남자] this 키워드

그렇다면 바로 코드 예제를 보면서 어떤 점이 다른가에 대하여 알아보도록 하겠습니다.

const whatIsThisFunction = {
  whatIsThis: "Object",
  normalFunction () {
    console.log(`What is this? ${this.whatIsThis}`);
  },
  arrowFunction: () => {
    console.log(`What is this? ${this.whatIsThis}`);
  }
};

whatIsThisFunction.normalFunction(); // "What is this? Object"
whatIsThisFunction.arrowFunction(); // "What is this? undefined"

위의 코드를 실행 한 결과값입니다. 일반 함수에서 this.whatIsThis 를 사용하였을 경우 Object 라는 값이 나오지만, 화살표 함수에서는 undefined 가 출력이 됩니다. 일반 함수와 달리 화살표 함수에는 자체 this 가 없기 때문인데요, 그렇다면 화살표 함수 안에서의 this 는 무엇을 가리킬까요? 바로 전역 객체를 나타냅니다. 화살표 안에서 console.log(this); 를 실행하면 아래와 같은 결과값을 얻을 수 있습니다.

화살표 함수 안에서의 console.log(this); 출력 결과

new 키워드

함수 정의 또는 표현식을 사용하여 생성된 일반 함수는 구성 가능 (constructible) 하고 호출 가능 (callable) 하기 때문에 new 키워드를 사용하여 호출이 가능합니다.

 

하지만, 화살표 함순는 호출만 가능하고 구성은 가능하지 않기 때문에 new 키워드를 사용해서 호출할 수 없습니다.

const normalFunction = function () {
  console.log("Normal Function.");
};

new normalFunction(); // "Normal Function."

const arrowFunction = () => {
  console.log("Arrow Function.");
};

new arrowFunction(); // "Uncaught TypeError: arrowFunction is not a constructor"

중복 매개변수명 사용

중복 매개변수명 사용은 상식적으로 좋은 습관이 아니기에 반드시 지양해야 하지만, 개념 정리 차원에서 짚고 넘어가도록 하겠습니다.

 

일반 함수에서는 중복 매개변수명을 사용할 수 있습니다. 제 사견으로는 정말 아무 의미 없고 누구에게도 도움이 되지 않는 일인 것 같습니다. 하지만 일반 함수에서도 strict mode 를 사용할 시에는 같은 매개변수명을 중복해서 사용할 수 없습니다.

 

코드를 보시면

function sameParams(p, p) {
  console.log(`${p} ${p}`);
}

sameParams("Arg1", "Arg2"); // "Arg2 Arg2"

'use strict'
function sameParamsUnderStrictMode(p, p) {
  console.log(`${p} ${p}`);
}

sameParamsUnderStrictMode("Arg1", "Arg2"); // Uncaught SyntaxError: Duplicate parameter name not allowed in this context

일반 모드에서 중복 매개변수명을 사용했을 때 출력되는 값은 Arg2 Arg2 인 것을 확인할 수 있습니다. 따라서 의도하지 않은 동작을 할 가능성이 매우 매우 농후합니다.

 

이번에는 화살표 함수의 경우를 보도록 하겠습니다.

const arrowFunctionWithSameParams = (p, p) => {
  console.log(`${x} ${x}`);
};

arrowFunctionWithSameParams("Arg1", "Arg2"); // Uncaught SyntaxError: Duplicate parameter name not allowed in this context

역시나 신택스 에러가 발생하는 것을 확인할 수 있습니다.

 

이렇게 간단하지만 간단하지 않은 일반 함수와 화살표 함수의 차이점에 대하여 알아보았습니다. 저도 아직 공부를 지속하고 있는 입장에서 생소했던 부분이 꽤나 많이 있었습니다. 정말 공부는 하면 할수록 그 양이 방대해서 두렵기도 한데요, 막상 공부를 하다보면 또 새로운 것들을 알게 되기에 성취감도 생기는 것이 사실입니다.

 

앞으로도 열심히 공부해서 떠먹여 드릴테니 흘리지 말고 잘 받아 드시기 바라며, 이번 포스트는 여기서 마무리 짓도록 하겠습니다!