JS find 함수 사용하기

리액트 ts 공부를 하다가 자바스크립트 화살표 연산자나 find, map 등등 기초 지식이 부족하다는 것을 느낀다.

그래서, 집 앞 알라딘에서 책을 구매했다.

 

길벗사 자바스크립트 코딩의 기술

 

개발자로 먹고살려면 매일매일 공부하여야 한다. 주로 백엔드를 하다 보니 프런트 코딩을 너무 소홀히 했었다.

리액트에 주로 사용되는 find, map, filter들을 잘 이해하지 못하고 그때그때 필요한 기능을 사용하는 정도로만 제한적으로 사용했다. 

책 내용 예제 중. 배열 부분에 아래 예제가 나온다.

 const dogPair = [

    ['name','Don'],

    ['color','black']

 ]

;

function getName(dog){

    return dog.find(attribute => {

        return attribute[0] ==='name';

    })[1];

}

 

결과는 Don이다. 눈으로 확인하고 넘어가려는 순간 인터넷에 "자바스크립트 find 함수" 라고 검색해본다.

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/find

Array.prototype.find() - JavaScript | MDN

 

책을 통해 시작되었지만, 해당 사이트에서 모든 예제를 뜯어본다.

find의 사용법, 인수가 3개까지 활용할 수 있는 방법 등.

 

5개 정도의 페이지를 만들어서 예제를 따라 해본다.

 

1. 인자 값이 하나인 배열

인자가 하나 일 때는 배열의 값을 순회하며 값을 구할 수 있다.

[3, 4, 5, 8, 12,].find((value)=>{

    console.log(value);

})

 

예전 스타일이라면 아래와 같이 기능을 구현했을 것이나 앞으로는 전자 처럼 하게 될 것이다.

const array = [3, 4, 5, 8, 12,];

for(let i=0 ; i< array.length ; i++){

    console.log(i);

}

결과는 

3

4

5

8

12

---

2. 인자가 두 개인 find 첫 번째 인자는 배열의 값이고 두 번째 인자는 배열의 인덱스다.

---

3. 인자가 세 개인 find 첫 번째는 값, 두 번째 인덱스, 세 번째 배열 전체의 값

---

원래 자바스크립에는 데이터 컬렉션을 다루는 구조로 배열과 객체 이렇게 두 가지가 있었다.

모던 자바스크립트에서는 새로운 구조가 등장했으니 Map, Set, Weak Map, Weak Set, 객체, 배열을 사용할 수 있다.

 

 그냥 이것저것 개발하는 개발자지만 매일매일 공부하는 게 얼마나 중요한지를 또 깨닫게 된다. 

 책 속 내용 중 단 4장이나, 거의 2시간을 공부하게 된다.