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로 대기오염 정보 불러오기 실패!");
}
});