[JavaScript] 화살표 함수(Lamda)

 

 

 

JavaScript의 화살표 함수 (Lamda)

👉🏻 JavaScript의 표준 ES6 버전부터 제공하는 가독성을 높여 주는 문법
👉🏻 익명함수를 대체하는 문법 (선언적 함수에는 사용할 수 없음)

 

 

 

표현법

👉🏻 기존의 표현법

function() {

	실행할 코드

}

👉🏻 화살표 함수를 이용할 경우

() => {

	실행할 코드

}

 

 

 

사용 예시

상황	기존 표현법	화살표 함수 표현법
기본 표현법	function ( ) { }	( ) => { }
매개변수가 1개	function (a) { }	a => { }
매개 변수 여러 개	function (a, b) { }	(a, b) => { }
리턴시킬 내용이 고정된 경우	function ( ) {          return 10; }	() => 10

 

 

 

활용 예시

👉🏻  기존 코드

$.ajax({
    url : "air.do",
    data : {location:$("#location").val()},
    success : function(data) {

        var itemArr = $(data).find("item"); // [item, item, item, ...]

        var value = "";
        itemArr.each(function(index, item) {

            value += "<tr>"
                        + "<td>" + $(item).find("stationName").text() + "</td>"
                        + "<td>" + $(item).find("dataTime").text() + "</td>"
                        + "<td>" + $(item).find("khaiValue").text() + "</td>"
                        + "<td>" + $(item).find("pm10Value").text() + "</td>"
                        + "<td>" + $(item).find("coValue").text() + "</td>"
                        + "<td>" + $(item).find("no2Value").text() + "</td>"
                        + "<td>" + $(item).find("so2Value").text() + "</td>"
                        + "<td>" + $(item).find("o3Value").text() + "</td>"
                  + "</tr>";
        });

        $("#result1>tbody").html(value);

    },
    error : function() {
        console.log("ajax로 대기오염 정보 불러오기 실패!");
    }

});

 

👉🏻 화살표 함수 사용

$.ajax({
    url : "air.do",
    data : {location:$("#location").val()},
    success : data => {

        var itemArr = $(data).find("item"); // [item, item, item, ...]

        var value = "";
        itemArr.each((index, item) => {

            value += "<tr>"
                        + "<td>" + $(item).find("stationName").text() + "</td>"
                        + "<td>" + $(item).find("dataTime").text() + "</td>"
                        + "<td>" + $(item).find("khaiValue").text() + "</td>"
                        + "<td>" + $(item).find("pm10Value").text() + "</td>"
                        + "<td>" + $(item).find("coValue").text() + "</td>"
                        + "<td>" + $(item).find("no2Value").text() + "</td>"
                        + "<td>" + $(item).find("so2Value").text() + "</td>"
                        + "<td>" + $(item).find("o3Value").text() + "</td>"
                  + "</tr>";
        });

        $("#result1>tbody").html(value);

    },
    error : () => {
        console.log("ajax로 대기오염 정보 불러오기 실패!");
    }

});