[JavaScript] 자바스크립트 - 배열 내장 함수 (forEach, map, indexOf)

1. forEach( )

: for문 대체

 

        const web =['html','css','javascript','jquery'];

        web.forEach(element =>{
            //파라미터 element는 각 원소를 가리킴
            console.log(element);
        });
        

> web 이라는 배열을 생성

> forEach( )함수의 파라미터로 element를 받음. element가 각 원소를 가리킴.

> 콘솔에 배열의 각 원소를 출력함.

 

+) 함수 형태의 파라미터를 전달하는 것 - 콜백 함수

 

 

 forEach( )

 

 

2. map( )

: 배열 안의 각 원소를 변환할 때 사용함. 새로운 배열 생성

 

- 배열 안의 모든 숫자를 제곱해서 새로운 배열을 만드는 예제

 

        
        const array=[1,2,3,4,5,6,7,8];

        const square = n=>n*n;
        const squared = array.map(square);
        
        console.log(squared);
        

 

> array라는 배열을 생성

> square 라는 함수를 선언. n을 받아 자기 자신과 곱해주어 제곱함.

> map()에 square함수를 받아 squared 라는 새로운 배열을 생성함.

> 콘솔에 새로운 배열 squared 출력함.

 

- 위 예제에서 함수 생략

 

       
       const array=[1,2,3,4,5,6,7,8];
        
        const squared = array.map(n=>n*n);
        //파라미터에 변화를 주는 함수를 생략하고 바로 집어넣음.
        console.log(squared);
        

 

- 위 예제에서 forEach() 이용

 

       
        const array=[1,2,3,4,5,6,7,8];
        const squared=[];

        array.forEach(n=>{
            squared.push(n*n);
        });

        console.log(squared);
        

 

> 모두 같은 결과가 출력됨.

 

 

map( )

 

 

 

3. indexOf( )

: 원하는 항목이 몇번째 원소인지 찾아주는 함수

 

 

        const web=['html','css','javascript','jquery'];

        const index = web.indexOf('javascript');
        console.log(index);
        

 

> web 이라는 배열 생성

> index 변수에 indexOf()로 'javascript'가 몇 번째 원소인지 저장함.

> 콘솔에 index 출력함.

 

 

indexOf( )

 

참고

learnjs.vlpt.us/