[JavaScript] 자바스크립트 - 배열 내장 함수 ( findIndex, find, filter )

1. findIndex( )

: 배열 안에 있는 값이 객체일 때 몇 번째 원소인지 찾아주는 함수

 

        
        const todos=[
        {
            id:1,
            text:'html+css',
            done:true
        },
        {
            id:2,
            text:'javascript',
            done:true
        },
        {
            id:3,
            text:'react',
            done:true
        },
        {
            id:4,
            text:'jquery',
            done:false
        }
    ];
    
    const index = todos.findIndex(todo => todo.id ===3);
    console.log(index);
    

 

> todos 객체 배열을 생성함.

> findIndex 파라미터로 todo를 받고 id가 3인 몇번째 요소인지 찾아 index에 저장함.

> 콘솔에 index를 출력함.

 

 

findIndex( )

 

> 배열에서 id가 3인 항목의 index는 2

 

2. find( )

: 찾아낸 값을 반환

 

        
        const todos=[
        {
            id:1,
            text:'html+css',
            done:true
        },
        {
            id:2,
            text:'javascript',
            done:true
        },
        {
            id:3,
            text:'react',
            done:true
        },
        {
            id:4,
            text:'jquery',
            done:false
        }
    ];
    
    const element = todos.find(todo => todo.id ===3);
    console.log(element);
    

 

> find로 todo를 파라미터로 받고 id가 3인 요소의 값을 element에 저장함.

> 콘솔에 element 출력함.

 

 

find( )

 

3. filter( ) 

: 배열에서 특정 조건을 만족하는 값들만 따로 추출하여 새로운 배열 생성

 

        
        const todos=[
        {
            id:1,
            text:'html+css',
            done:true
        },
        {
            id:2,
            text:'javascript',
            done:false
        },
        {
            id:3,
            text:'react',
            done:true
        },
        {
            id:4,
            text:'jquery',
            done:false
        }
    ];

    const taskNotDone = todos.filter(todo => todo.done ===false);
    console.log(taskNotDone);
    

 

> todos 객체 배열에서 done 이라는 key를 주고 value를 true와 false로 설정함.

> filter함수로 done이 false인 값들을 추출하여 새로운 객체 배열 taskNotDone을 생성함.

> 콘솔에 taskNotDone을 출력함.

 

 

filter( ) 

 

참고

learnjs.vlpt.us/basics/09-array-functions.html