자바스크립트 람다 함수 – 익명 함수 즉, function 명이 없는 함수로써 화살표 형태로 표현되는 함수를 이야기 합니다. 실무에서는 코드를 간결하게 작성할 수 있고, 퍼포먼스를 향상시키며, 반복 이터레이션 로직에서 불필요한 코드를 제거할 수 있기 때문에 자주 사용됩니다.
가장 큰 장점은 역시 코드의 간결성입니다. 불필요한 루프문의 삭제가 가능하며 동일한 함수의 재활용에 용이합니다.
하지만, 디버깅이 어렵고 남발할 경우 코드 이해가 어려울 수 있기 때문에 꼭 필요한 상황에서 사용하는 것이 좋습니다.
자바스크립트 람다 함수 선언
ES5에서 일반적으로 함수는 다음과 같이 선언하였습니다.
<script>
// ES5 일반적인 함수 선언
const hi1 = function( name ){
return "hi1 " + name;
}
</script>
ES6에서의 화살표 문법은 다음과 같습니다.
<script>
// ES6 화살표 함수
const hi2 = ( name ) =>{
return "hi2 " + name;
}
</script>
자바스크립트 람다 함수의 활용
자바스크립트 람다 함수는 흔히 화살표 함수라고 칭합니다. 그리고 람다 함수는 필요에 의해 일회용으로 사용되는 함수입니다.
일반 함수 add 는 람다 형태로 add2 형태로 표현할 수 있습니다.
<script>
let add = function (num1, num2) {
return num1 + num2;
};
console.log(add(1, 2));
let add2 = ( num1, num2 ) => {
return num1 + num2;
};
console.log(add(1, 2));
</script>
만약 파라메터가 하나라면 파라매터를 생략할 수 있습니다. 아래는 동일한 결과가 출력됩니다.
<script>
let func5 = (num) => num * num;
console.log(func5(2));
let func6 = num => num * num;
console.log(func6(2));
</script>
만약 매개변수가 하나도 없을 떄에는 다음과 같이 빈 괄호를 사용해야 합니다.
<body>
<script>
const hi3 = () =>{
return "hi3";
}
</script>
</body>
람다 함수의 객체 리터럴 반환
객체리터럴을 암시적으로 반환할 수도 있습니다. 중괄호 안에서 반환하는 내용이 객체 리터럴임을 표현하기 위해서는 전체를 괄호로 묶어주면 됩니다.
<body>
<script>
const rtype = "500m running";
const sprinter = ["철수", "영희", "짱구"];
const results = sprinter.map( ( person, index ) => ( {
name : person, runType : rtype , place : index + 1
}));
console.log( results );
</script>
</body>
{} 리터럴 객체를 ( )로 감싸주는 형태로 작성하게 됩니다.
일반함수와 람다함수의 차이점 – this 키워드의 사용
일반함수와 람다함수의 가장 큰 차이는, 일반 함수는 본인의 데이터를 가질 수 있지만, 화살표 함수는 그렇지 못합니다.
즉, 람다함수 내부에서 this 키워드는 상위 스코프 즉, 호출한 곳의 this를 이용한다. 따라서 function() 형태 콜백함수 setTimeOut() 내부의 this는 window 객체로 설정이 되어 에러가 발생합니다.
<body>
<script>
let h1 = document.createElement( "h1" );
h1.style.color = "red";
h1.textContent = "h1 text";
document.body.appendChild( h1 );
// setTimeOut은 function()로 기술 =>
h1.addEventListener( "click", function(){
this.style.color = "black";
setTimeout( function() {
this.style.color = "red";
}, 1000)
})
</script>
</body>
그러므로, 의도한 것과 같이 h1 객체의 색깔 style을 바꾸고자 한다면, 즉, h1 객체의 this 값을 setTimeOut에서 사용하고 한다면 화살표 함수로 변경을 해주면 됩니다.
<body>
<script>
let h1 = document.createElement( "h1" );
h1.style.color = "red";
h1.textContent = "h1 text";
document.body.appendChild( h1 );
h1.addEventListener( "click", function(){
this.style.color = "black";
setTimeout( () => {
// setTimeOut내의 this는 상위 객체 h1의 주소값
this.style.color = "red";
}, 1000)
})
</script>
</body>
따라서 비슷한 코드지만 다음의 예제는 this가 오류가 나게 됩니다.
<body>
<script>
let h1 = document.createElement( "h1" );
h1.style.color = "red";
h1.textContent = "h1 text";
document.body.appendChild( h1 );
h1.addEventListener( "click", () => {
// 화살표 함수 내에 사용이 되었으며 window this를 가리킴
// 오류 발생! Uncaught TypeError: Cannot set properties of undefined
this.style.color = "black";
})
</script>
</body>
상위 스코프의 변수는 함수 내에서 사용이 가능하므로 그냥 변수명으로 접근하는 방식으로 처리하면 됩니다.
<body>
<script>
let h1 = document.createElement( "h1" );
h1.style.color = "red";
h1.textContent = "h1 text";
document.body.appendChild( h1 );
h1.addEventListener( "click", () => {
h1.style.color = "black";
})
</script>
</body>
람다함수에 대해서 알아보았습니다. 자세한 사항은 모질라 문서 이 곳 에서 확인할 수 있습니다.
자바스크립트에서 여러 함수의 형태를 알고자 한다면 자바스크립트 함수의 이해 for SAPUI5 기초 이 글을 참고해 보시기 바랍니다.