Lambda JS

오늘은 람다에 대해서 알아보겠습니다. 

 

---

람다식은 기존 for문을 좀 더 간결하게 작성하는 방식입니다. 따라서 람다는 코드의 간결성과 코드의 퍼포먼스를 향상할 수 있습니다. 단점으로는 람다식을 남용하면 오히려 코드를 이해하기 어려운 부분이 있지만 for문에서 람다식을 사용하면 코드를 매우 간결하게 끝날 수 있으므로 람다식을 배우고 나면 람다를 자주 사용하도록 합시다.

 

---

forEach : 모든 값 반복

 

         let primeNumbers = [2, 3, 5, 7, 11, 13, 17, 19, 23, 29];

 

배열로 이루어진 primeNumbers 변수를 생성해서 2, 3, 5, 7, 11, 13, 17, 19, 23, 29를 가지는 배열을 만들었습니다.

각각의 primeNumbers를 호출하려면 기존의 for문을 사용하면 아래의 코드처럼 사용할 수 있습니다.

 

   for (let i = 0; i < primeNumbers.length; i++){
            console.log(primeNumbers[i]);
        }

 

여기서 forEach를 사용하면 코드가 엄청 줄어들 수 있습니다. 람다는 익명 함수로써 호출을 할 수 있는데요. 우선 익명 함수는 () => { };로 만들 수 있습니다. 여기서 각각의 람다식을 변수 뒤에 적어주면 되는데요. 코드를 통해 한번 알아보겠습니다.

 

        primeNumbers.forEach(x => console.log(x));

 

위의 식보다 코드가 줄어든 게 보이시나요? 위의 코드는 forEach람다식을 이용한 코드입니다. 우선 변 수명 뒤에 forEach를 적어 주었고. 익명 함수를 만들어 주었습니다. 그리고 익명 함수 안에 있는 x는 primeNumbers의 element 즉 primeNumbers의 각각 인덱스에 들어 있는 값입니다. primeNumbers의 인덱스부터 설명해보겠습니다. primeNumbers의 인덱스는 배열의 값의 번호입니다. 시작 번호는 0번부터 시작이 되는데요. 즉, 0번의 값은 2이고 1번의 값은 3이고 2번의 값은 5로 이런 식으로 이어져갑니다. 따라서 x는 element로써 0번의 값이 2이고 1번의 값은 3이라는 것을 말해줍니다. 저 같은 경우에는 x로 적었지만 x로 적지 않고 element라고 적어주셔도 됩니다. 따라서 x의 값을 각각 호출하는 console.log(x);를 말합니다. forEach의 경우 주어진 함수를 배열 요소 각각에 대해 실행합니다. 여기서 console.log(x);를 리턴해준다고 생각할 수 있는데 forEach의 경우는 리턴 값이 없습니다. 그래서 해당 배열 자체의 인덱스를 나타내거나 표시할 때 사용합니다.

 

---

map : 해당 배열의 길이만큼 배열을 재구성함 

 

앞서 만든 배열을 가져와서 모든 값이 두배인 배열을 만들어 보겠습니다. for문을 통해서 작성하면 기존의 배열 인덱스 번호에 해당하는 값들을 2배로 곱해줘야겠네요.

 

    let doubledPrimeNumbers =[];
        for (let i = 0; i < primeNumbers.length; i++) {
            doubledPrimeNumbers.push(primeNumbers[i] * 2);
        }

 

두배로 들어가는 새로운 배열을 만들어주고 그리고 새로 생긴 배열에 기존의 배열 값의 두배인 값을 puush를 통해 넣어줍니다. 그러면 원래랑 배열의 길이는 같지만 값은 두배인 새로운 배열이 만들어지겠네요. forEach는 기존의 배열을 가져오는 데 사용하는 반면 map은 배열을 해당 배열의 길이만큼 재구성할 때 사용하게 됩니다. 따라서 forEach와는 다르게 리턴 값을 가지게 됩니다.

         doubledPrimeNumbers = primeNumbers.map(x => x * 2);

 

기존의 element x를 * 2 하는 리턴 값이 생깁니다.

 

---

fliter : 기존의 배열을 재구성함

 

map은 기존의 배열의 길이만큼 재구성하는 반면 filter는 기존의 배열을 재구성할 때 사용합니다. 따라서 기존의 배열의 길이만큼의 새로운 배열이 만들어지는 것이 아니라 filter안의 조건식을 통해 해당 조건에 맞는 값 들만 모여서 배열을 이루게 됩니다. 처음 만든 배열에서 10 이상 20 미만인 값을 찾아 새로운 배열을 한번 만들어볼까요? 우선 for문을 이용해 만들어 보도록 하겠습니다. 

 

 let tensPrimeNumbers = [];
        for (let i = 0; i < primeNumbers.length; i++){
            if(primeNumbers[i] >= 10 && primeNumbers[i] < 20){
                tensPrimeNumbers.push(primeNumbers[i]);
            }
        }

 

for문안에 if문을 넣어 반환 여부를 거친 뒤 조건에 맞는 값만 출력돼서 배열이 만들어집니다. 그러면 filter를 한번 사용해볼까요?

 

        tensPrimeNumbers = primeNumbers.filter(x => x => 10 && x <20);

 

filter의 x도 해당 인덱스의 값입니다. x => 10 (x는 10 이상) && (그리고) x < 20 (x는 20 미만)

 

---

find : 기존 배열에서 특정 값을 찾을 때 사용

 

find는 앞서 말했던 map, filter, find와 다르게 배열로 만들어지는 것이 아닌 특정한 값을 찾을 때 사용하게 되는데요. 여기서 특정 값은 배열로 나오지 않기 때문에 바로 조건에 맞는 값을 찾으면 그 순간 함수를 탈출해 그 값을 출력합니다. 10 이상인 값을 찾을 때 어떻게 적는지 한번 알아볼까요?

 

for (let i = 0; i < primeNumbers.length; i++){
            if(primeNumbers[i] >= 10){
                first
                Value = primeNumbers[i];
                break;
            }
        }

 

해당 코드는 10 이상인 값을 배열에서 찾는데 10 이상인 값을 찾으면 if문을 탈출해 그 값을 바로 출력하는데요. 이럴 때 find를 사용합니다. 즉, 10 이상인 값 중 첫 번째 값을 찾는다고 할 수 있습니다. 

 

firstValue = primeNumbers.find(x => x >= 10);

 

---

 

오늘의 포스팅을 마무리하며 다음 시간에는 NodeList에 관해 글을 정리해보겠습니다.