본문 바로가기
Front-end/javascript

[JavaScript] 배열 내장 함수

by 잔디🌿 2023. 7. 12.

    forEach

     

    배열을 하나씩 순회할 수 있게 해주는 함수

    const arr = [1,2,3,4];
    
    arr.forEach((elm) => console.log(elm));

    배열의 모든 요소를 한번씩 출력해준다.

     

    const arr = [1,2,3,4];
    const newArr = [];
    
    arr.forEach(function (elm){
        newArr.push(elm * 2);
        });

    이렇게 하면 기존 배열 *2 한 값이 새 배열에 들어가게 된다.

     

    map

     

    const arr = [1,2,3,4];
    const newArr = arr.map((elm) =>{
       return elm*2;
       });
       
       console.log(newArr);

    map를 사용하면 알아서 넣어준다.

     

    includes

    const arr = [1,2,3,4];
    let number = "3";
    
    console.log(arr.includes(number));

    includes는 해당 변수와 같은 원소가 존재하는지를 출력해준다. 따라서 위 코드는 true를 출력한다.

     

    indexOf

     

    const arr = [1,2,3,4];
    let number = "3";
    
    console.log(arr.indexOf(number));

    변수와 같은 요소가 몇번째 index에 있는지 출력하는 함수이다.

    만약 존재하지 않으면 -1을 출력한다.

     

    findIndex

     

    const arr = [  //객체배열
       {color : "red"},
       {color : "blue"},
       {color : "black"},
       {color : "green"}, 
       ]
       
       
     console.log(arr.findIndex((elm) => elm.color === "green")); //3
     //elm에 차례로 배열의 값이 들어가게 된다.

    findIndex를 find로 수정하면 요소를 그대로 받는다.

     

    filter

     

    const arr = [  //객체배열
       {num : 1, color : "red"},
       {num : 2,color : "blue"},
       {num : 3,color : "black"},
       {num : 4,color : "green"}, 
       ]
       
       
     console.log(arr.filter((elm) => elm.color === "green")); //green이 있는 객체들을 반환

    filter을 쓰면 특정 값을 프로퍼티로 같는 객체들을 얻을 수 있다.

     

    slice

     

    배열을 자르는 함수이다.

    const arr = [  //객체배열
       {num : 1, color : "red"},
       {num : 2,color : "blue"},
       {num : 3,color : "black"},
       {num : 4,color : "green"}, 
       ]
       
       
     console.log(arr.slice(0,3));

    slice(0,3)이렇게 하면 index가 0인 것부터 2인 것까지 잘린 배열이 출력된다.

     

    concat

    배열을 붙이는 함수이다.

    const arr1 = [  //객체배열
       {num : 1, color : "red"},
       {num : 2,color : "blue"},
       ]
       
    const arr2 = [  //객체배열
       {num : 3, color : "red"},
       {num : 4,color : "black"},
       ]
       
       
     console.log(arr.concat(arr2));

    이렇게 하면 arr1과 arr2가 붙인 형태로 출력된다.

     

    sorts

     

    let chars = ["a","c","b"];
    chars.sort();

     

    sort는 배열을 정렬해주는 함수이다. 따라서 위의 배열이 ["a","b","c"]로 바뀐다.

    sort는 문자열을 기준으로 정렬한다. 따라서 숫자를 넣고 sort를 하면 이상하게 정렬된다.

     

    숫자배열 정렬하기

    compare함수를 따로 만들어주어야한다.

     

    let numbers = [0,1,2,3,4,5,6];
    
    const compare = (a,b) =>{
       if(a>b){
          return 1;
          }
          
       if(a<b){
          return -1;
          }
       return 0;
       
       };
       
       
    numbers.sort(compare);
    console.log(numbers);

    내림차순으로 만들고싶으면 1과 -1의 자리를 바꾸면 된다.

     

    배열 하나의 문자열로 합치기

     

    const arr = ["안녕","반가워요"];
    
    console.log(arr.join());

    이렇게 하면 "안녕 반가워요"가 출력된다.

     

    arr.join(" ") 이런 식으로 하면 요소들 사이에 공백이 생긴다.

    'Front-end > javascript' 카테고리의 다른 글

    [JavaScript] 삼항 연산자  (1) 2023.07.16
    [JavaScript] Truthy and Falsy  (0) 2023.07.16
    [JavaScript] 반복문  (0) 2023.07.12
    [JavaScript] 배열  (0) 2023.07.12
    [JavaScript] 객체  (0) 2023.07.12