자바스크립트 ES6 arrow function(화살표 함수) 개념 및 타입스크립트 예제 +@ python lambda

 

 

ES6 시리즈

 

1. const와 let의 등장: "var 쓰지 마세요"

https://batcave.tistory.com/39

Javascript 변수선언 키워드 "var"를 사용하지 않는 이유

2. arrow function: 화살표 함수

 

 

 

 

 

 

 

 

 

 

arrow function(fat arrow): 개념

화살표 함수는 "function": 함수지정 키워드를 사용하지 않고

변수에 함수를 저장할 수 있는 "익명함수" 기능을 제공하는 독특한 문법이다.

만일 화살표함수가 저장된 변수를 다른 값으로 초기화한다면 함수는 즉시 사라지게 된다.

 

 

타입스크립트예제

// 곱하기 함수를 만들어보자.

function multiplyFunction (param1:number, param2:number):number {
    return param1 * param2}

let multiplyArrow = (param1:number, param2:number) => {
    return param1 * param2;
}
console.log(multiplyArrow);
console.log(multiplyArrow(4,7)); //출력내용 28

//multiplyArrow 는 function 키워드로 선언되지 않았다.
//let으로 (param1: number, param2: number) => number
//타입을 갖는 변수로 지정된것이다.

// 그래서  (param1: number, param2: number) => number
// 조건만 맞는다면 자유롭게 함수내용을 바꿀 수 있다.


//더하기 함수로 바꾸기
multiplyArrow =  (param1:number, param2:number) => {
    return param1 +  param2;
}
console.log(multiplyArrow(4,7)); // 출력내용 11


//그냥 4를 출력하는 함수로 바꾸기
multiplyArrow = (param1:number, param2:number) => {
    return 4;
}

console.log(multiplyArrow(4,7)); //출력내용 4

// 만일 함수를 잃어버리고싶지않다면 let이아니라 
// "const"로 선언하자.


//타입스크립트가아니라 자바스크립트였으면 함수가아니라 
//숫자나 단순 문자열로도 초기화가 가능하다.

 

 

 

구성요소 간략화하기

 

1. 화살표 함수도 매개변수가 없을 경우엔 파라미터 괄호() 내부를 비워준다.

2. 표현식이 하나이며 즉시 반환되는 경우엔  {}와 return을 생략하여 간단하게 나타낼 수 있다.

// 매개변수가 없는 함수는 괄호 안을 비워줄 수 있다.

// 또 화살표함수의 식이 단 하나뿐이고, 즉시 return되는 값인경우 
// {}와 return도 생략 해 줄 수 있다.


const getDate = (): string => new Date().toLocaleDateString();

let exVar: string = getDate();

console.log(exVar);

//만약에 코드가 한줄일경우 {}를 생략해 줄 수있다.
const multiplyOneline = (a: number, b: number): number => a * b;

let result = multiplyOneline(4,7);

console.log(result);

출력 결과

 

화살표 함수 활용: 정의된 함수명은 이제 필요 없다!

 

가끔 자바스크립트로 프로그래밍을 하다 보면 인자로 함수명을 요구하는 메서드들이 있다.

이때 화살표 함수를 function 키워드로 정의된 함수의 이름 대신 직접 패스시킬 수 있다.

 

예를 들면 이벤트리스너메서드는 (이벤트 종류, 실행함수명)을 인자로 받아들인다.

 

console.log("무언가 출력하기")를 이벤트리스너에 의해 실행시키려면

console.log("무언가 출력하기")를 포함하는  함수를 정의해야한다.

 

console.log("무언가 출력하기")는 함수명이 아니라 그 자체로 함수를 호출하는 코드이기 때문이다.

 

이런 경우에 화살표함수는 인자값으로 한번 사용하기 위해

function 키워드로 함수명을 정의해 주는 수고로움을 덜어준다.

 

//index.html에 추가할 코드

<button>click me!</button>

//타입스크립트 코드


const button = document.querySelector('button');

if (button) {
    button.addEventListener('click', (event) => {
        console.log(event);
    });
}

 

 

+@ 파이썬 lambda와 같이 보기

 

화살표함수의 모티베이션은 파이썬의 lambda 함수이다.

코드를 비교해 보자

//파이썬의 lambda 함수. 
//역시 def(함수선언키워드)를 사용하지 않고 그냥 변수에 저장한다.

add = lambda x, y : x + y
    print(add(3, 5))
    print(add("hi", "hello"))



출력결과 
8
hihello

//화살표 함수를 활용한
//타입스크립트 코드
const add (x:number, y:nummber):number => x + y;

//화살표 함수를 활용한
//자바스크립트 코드
const add (x, y)=> x + y;

 

 

Send icons created by Freepik - Flaticon