화살표 함수 기초 개념 정리 - Arrow Function

화살표 함수 기호 이미지

 

Javascript 소스들을 살펴보다 보면, 언젠가부터 " => " 이런 기호가 곧잘 눈에 들어오곤 합니다. Arrow Function, 즉 화살표 함수라고 불리는 표기법인데요, 기존의 전통적인 Function과는 다양한 차이점이 존재하지만 일단은 눈에 익숙해질 수 있도록 간단하게 기초적인 내용을 정리해보기로 합니다.

 

화살표 함수 기초

 

화살표 함수는 ES6 표준으로 제정된 문법이라고 합니다. 대충 자바스크립트 표준에 대한 버전이라고 보면 되는데요, ES2015라고도 부르니, 2015년에 업데이트 되어 제정된 표준을 말합니다.

 

 

전통적인 Function 표기 방식

 

예전부터 함수(Function)는 다음과 같은 표기 방식으로 정의되고 사용되어져 왔습니다.

꽤나 오래도록 자리매김 하고 있던 표기방식이라 뭔가 익숙한 모습이죠?

 function helloWorld() {
        console.log("Hello World");
      };

helloWorld(); // 함수호출

 

 

변수 할당방식으로 사용할 때

 

정의된 함수를 변수에 할당하는 방식으로 사용할 때는 다음과 같이 사용할 수 있습니다.

const helloWorld = function() {
        console.log("Hello World");
      };

 

코드에서는 엔터가 영향을 끼치지 않으니, 위 코드를 다음과 같이 한 줄로 줄일 수가 있습니다.

 

const helloWorld = function() { console.log("Hello World"); };

 

 

ES6 Arrow Function 표기 방식

 

한줄로 표현 가능한 함수를 화살표 함수로

 

위 예제처럼 한줄로 표현할 수 있는 함수들은 화살표 함수(Arrow Funciton)으로 간단하게 표현이 가능해집니다.

const helloWorld = () => console.log("Hello World");

helloWorld();  // 함수호출

 

뭔가 좀 감이 올듯 말듯 해지죠? 처음에는 다 그 그런 거죠 뭐.

 

본 예제 코드에서는 파라미터가 없었습니다. 그렇다면 매개 변수를 사용하는 경우에는 화살표 함수를 어떻게 사용하면 될가요?

 

 

매개변수(파라미터)를 사용하는 경우 화살표 함수로

const sayHello = function(name) {
        console.log("Hello " + name);
      };
      
sayHello("Kincoding');    // Hello Kincoding 출력

 

전통적인 위 방식을 화살표 함수로 변경해보면,

const sayHello = (name) => console.log("Hello " + name);

sayHello("Kincoding");    // Hello Kincoding 출력

 

함수를 정의하는 코드가 복잡해질수록 뭔가 좀 더 직관적인 해석이 가능할 것 같은 느낌이 들지 않은가요?

const sayHello = (name) => console.log("Hello " + name);

- sayHello는 변수인데(갖다 쓸수 있는데)
- name 을 인자로 넣으면
- Hello + 인자 형태로 consloe.log 해주는 거임. 한눈에 OK?

 

인자가 복수개인 경우에는 쉼표로 구분해서 그냥 늘려주면 됩니다.

const sayHelloAge = (name, age) => console.log("Hello " + name + age);

sayHelloAge("Kincoding", 17);    // Hello Kincoding17 출력

 

참, 프로그래머들의 성향에 따라서, 인자가 하나인 경우 (소괄호)를 생략하기도 합니다.

const sayHello = name => console.log("Hello " + name);

sayHello("Kincoding");    // Hello Kincoding 출력

 

자꾸 자꾸 사용하면서, 익숙해지고 나면 화살표 함수도 편리하자고 만든 것일테니 코딩의 편리함도 당연하게 커지겠죠?

저는 그렇게 믿쓥니다!

 

 

 

다른 예제 코드로 복습

 

위에서 학습한 내용을 토대로 다음 코드를 화살표 함수로 한번 바꿔 봅시다.

const add = function (x, y) {
    return x + y;
};

 

인자 2개 받아서 덧셈실행을 하고 리턴을 해주는 함수입니다.

// 이렇게 사용하거나,

const add = (x, y) => {
    return x + y;
};


// 한 줄로 표기할 때는 이렇게도 사용.

const add = (x, y) => { return x + y };

 

일단 자바스크립트 화살표 함수(Arrow Function)에 대한 기초적인 내용을 이 정도만이라도 살펴둡시다.

 

즐거운 코생생활, 즐코딩.

KINcoding.