자바스크립트 3강. 람다 함수

특정 element를 찾을 때 . 이나 #을 사용하지 않고

메서드를 이용해 바로 찾을 수 있는 방법이 있다.

 

document.getElementById("아이디명");
document.getElementsByClassName("클래스명");
document.getElementsByTagName("태그명");

 

하지만 이렇게 사용하면 3가지의 메서드를 알아야 하기 때문에

추천하지 않는 방법이다.

 

querySelector를 사용하자!

 

<button id="jooho">클릭</button>
<script>
    function add(n1, n2) {
        alert(n1 + n2);
    }

    let buttonDom = document.querySelector("#jooho");
    buttonDom.addEventListener("click", add);
</script>

 

위 코드와 같이 사용하면 add 메서드에 인수를 넘겨줄 수 없다.

 

<button id="jooho">클릭</button>
<script>
    function add(n1, n2) {
        alert(n1 + n2);
    }

    let buttonDom = document.querySelector("#jooho");
    buttonDom.addEventListener("click", function hello(){
        add(1, 3);
    });

</script>

 

이벤트 리스너의 function 자리에

의미없는 이름의 hello 함수를 넣어주면

함수가 실행되지 않고

버튼이 클릭이 될 때 hello 함수가 호출된다.

 

클릭하면 무조건 실행될 중괄호 내부이지

hello라는 이름으로 실행되는 함수가 아니기 때문에

이름이 필요없다.

 

이때 익명 함수를 사용해준다. 이름을 적어주지 않아도 괜찮다.

 

// 익명 함수 사용법(매개변수에 인수 전달이 가능)
let buttonDom = document.querySelector("#jooho");
buttonDom.addEventListener("click", function (){
    add(1, 3);
});

 

어차피 함수가 들어가야 할 자리인걸 알고 있기 때문에

키워드를 지우고 람다 함수를 사용할 수 있다.

자바와 비슷하다.

 

자바는 -> 화살표를 사용했지만

자바스크립트는 => 화살표를 사용해준다.

 

<button id="jooho">주호클릭</button>
<button id="jaewon">재원클릭</button>
<script>
    function add(n1, n2) {
        alert(n1 + n2);
    }

    // 익명 함수 사용법(매개변수에 인수 전달이 가능)
    let buttonDom = document.querySelector("#jooho");
    buttonDom.addEventListener("click", function (){
        add(1, 3);
    });

    // 람다 함수 사용법 ECMA6
    let buttonDom2 = document.querySelector("#jaewon");
    buttonDom2.addEventListener("click", () => {
        // add(1, 3);
        alert(1 + 3);
    }); 

</script>

 

보통 add 함수와 같이 다른 곳에서 재사용 될 함수라면

따로 만들어놓지만

그런 게 아니라면 람다 함수 내부에 직접 구현해둔다.

 

 

[출처]

 

https://cafe.naver.com/metacoding

메타코딩 : 네이버 카페

메타 코딩 유튜브

https://www.youtube.com/c/%EB%A9%94%ED%83%80%EC%BD%94%EB%94%A9

메타코딩