[JS, JAVASCRIPT] Array 내장함수

배열(Array)에 사용할 수 있는 내장함수

 

• toString() : 배열을 하나의 문자열로 바꿔주는 함수

  let brands = ["애플", "구글", "아마존", "마이크로소프트", "메타"];
  console.log(brands.toString()); // 애플, 구글, 아마존, 마이크로소프트, 메타

• join() : 피라미터로 전달된 문자가 요소 사이사이마다 삽입되어 하나의 문자로 결합 해주는 함수

  let brands = ["애플", "구글", "아마존", "마이크로소프트", "메타"];
  console.log(brands.join(" * ")); // 애플 * 구글 * 아마존 * 마이크로소프트 * 메타
  console.log(brands.join(" ")); // 애플 구글 아마존 마이크로소프트 메타

• pop() : 배열에서 마지막 요소를 제거하고, 그 마지막 요소를 반환하는 함수

  let brands = ["애플", "구글", "아마존", "마이크로소프트", "메타"];
  brands.pop(); 
  console.log(brands);// (4) ['애플', '구글', '아마존', '마이크로소프트']

• push() : 배열의 끝에 새로운 요소를 추가하는 함수

  let brands = ["애플", "구글", "아마존", "마이크로소프트", "메타"];
  brands.push("테슬라");
  console.log(brands); // (6) ['애플', '구글', '아마존', '마이크로소프트', '메타', '테슬라']

• shift() : 배열의 첫번째 요소를 제거하면서 그 요소를 반환하는 함수
  서버 프로그램 작업시 많이 사용 : 이벤트 큐에 차례대로 등록시 작업 목록에서 들어온 순서대로 하나씩 빼면서 작업 처리

  let brands = ["애플", "구글", "아마존", "마이크로소프트", "메타"];
  let shifted = brands.shift();
  console.log(brands); // (4) ['구글', '아마존', '마이크로소프트', '메타']
  console.log(shifted); // 애플

• unshift() : 배열의 제일 앞에 요소를 추가하고, 배열의 길이 반환하는 함수

  let brands = ["애플", "구글", "아마존", "마이크로소프트", "메타"];
  console.log(brands.unshift("삼성전자"));
  console.log(brands); // (6) ['삼성전자', '애플', '구글', '아마존', '마이크로소프트', '메타'];

• splice() : 배열의 특정 위치에 새로운 요소를 추가하는 함수, 추가시 기존 요소를 삭제하면서 추가 가능하다.
  • 첫번째 피라미터 : 새로운 요소를 추가할 인텍스 번호(변경을 시작할 인덱스)
  • 두번째 피라미터 : 요소를 추가하기 전, 삭제할 요소 수
  • 나머지 피라미터 : 추가할 요소, 지정하지 않으면 제거만 됨

  let brands = ["애플", "구글", "아마존", "마이크로소프트", "메타"];
  
  // 요소만 추가했을 경우 : 애플 뒤에 LG, DELL 추가
  brands.splice(1, 0, "LG", "DELL");
  console.log(brands); // (7) ['애플', 'LG', 'DELL', '구글', '아마존', '마이크로소프트', '메타']
  
  // 추가할 요소를 입력하지 않았을 경우 : 추가했던 LG, DELL 삭제
  brands.splice(1, 2);
  console.log(brands); // (5) ['애플', '구글', '아마존', '마이크로소프트', '메타']
  
  // 요소삭제 및 추가했을 경우 : 아마존 뒤에 마이크로소프트 삭제 및 LG, DELL 추가
  brands.splice(3, 1, "LG", "DELL");
  console.log(brands); // (6) ['애플', '구글', '아마존', 'LG', 'DELL', '메타']

• concat() : 2개 이상의 배열을 하나의 배열로 결합하는 함수

  let brand1 = ["애플", "구글"];
  let brand2 = ["아마존", "마이크로소프트", "메타"];
  let brand3 = ["삼성전자", "LG"];
  let brands = brand1.concat(brand2, brand3);
  
  console.log(brands); // (7) ['애플', '구글', '아마존', '마이크로소프트', '메타', '삼성전자', 'LG']

• slice(index, 가져올 요소 수) : 배열의 요소를 잘라내서 배열 형태로 반환

  let brands = ["애플", "구글", "아마존", "마이크로소프트", "메타"];
    console.log(brands.toString()); // 애플, 구글, 아마존, 마이크로소프트, 메타

• sort() : 배열의 요소를 정렬해주는 함수(문자열 가나다순)

  // 문자열 가나다
  let brands = ["애플", "구글", "아마존", "마이크로소프트", "메타", "삼성전자", "엘지"];
  console.log(brands.sort()); // (7) ['구글', '마이크로소프트', '메타', '삼성전자', '아마존', '애플', '엘지']

  
  숫자 정렬에 사용할 경우 : 숫자 데이터가 문자로 변환된 후 가나다 순으로 정렬된다.

  let points = [40, 100, 1, 5, 25, 10];
  console.log(points.sort()); // (6)[1, 10, 100, 2, 40, 5]

  때문에 비교 함수를 전달하여 숫자의 크기에 따라 정렬될 수 있도록 해야한다.
  • 숫자 오름차순

    let points = [40, 100, 1, 5, 25, 10];
    
    const ascPoints = points.sort(function (a, b) {
        return a - b;
    });
    console.log(ascPoints);// (6)[1, 5, 10, 25, 40, 100]

    매개 변수 a와 b를 전달한뒤 배열 내의 임의의 요소 a, b를 비교할때 반환되는 값이 0보다 크면 a가 b보다 앞에 오고 0보다 작으면 b가 a보다 앞으로 오게된다. 그리고 반환되는 값이 0이면 순위 변경을 하지 않는다.
  • 숫자 내림차순

    let points = [40, 100, 1, 5, 25, 10];
    
    const descPoints = points.sort(function (a, b) {
        return b - a;
    });
    
    console.log(descPoints); // (6)[100, 40, 25, 10, 5, 1,]

    비교 함수에서 b - a의 값을 리턴하면 된다.
• filter() : 배열에서 특정 조건에 맞는 요소만 찾아서 새로운 배열로 반환하는 함수

  // 예시 : 음료 중 1000원 이하인 음료만 표시하기
  let drinkList = [
      {
          name: "오렌지",
          price: 1000,
      },
      {
          name: "파워레이드",
          price: 1400,
      },
      {
          name: "커피",
          price: 700,
      },
      {
          name: "보리음료",
          price: 1200,
      },
      {
          name: "코카콜라",
          price: 1000,
      },
  ];
  
  let availableProduct = [];
  const inputCoin = 1000;
  
  // for문을 사용해서 찾을 경우
  for (const drink of drinkList) {
      if (drink.price <= inputCoin) {
      	availableProduct.push(drink);
      }
  }
  
  // filter을 사용하면 for문보다 간결하게 찾을 수 있다.
  availableProduct = drinkList.filter(function (drink) {
      return drink.price <= inputCoin;
  });
  
  console.log(availableProduct);

  
• map() : 배열이 가지고 있는 요소가 오브젝트인 경우, 오브젝트가 가지고 있는 key-value쌍을, 새로운 오브젝트 형태로 변경해서 새로운 배열을 반환하는 함수

  // 유저의 이름의 성과 이름을 합하여 재배열하기
  let userList = [
      {
          firstName: "재석",
          lastName: "유",
          email: "ryu@gmail.com",
      },
      {
          firstName: "종국",
          lastName: "김",
          email: "kim@gmail.com",
      },
      {
          firstName: "지효",
          lastName: "송",
          email: "song@gmail.com",
      },
  ];
  
  let newUserList = userList.map(function (user) {
      return {
          fullName: user.lastName + user.firstName,
          email: user.email,
      };
  });
  
  console.log(newUserList);

  
• reduce() : 배열안의 전체 요소들을 더한 값을 구하고자 할 때 사용하는 함수, 보통 첫번째, 두번째 피라미터까지 사용 
  • 첫번째 accumulator : 누적 값
  • 두번째 currentValue : 현재 배열 요소
  • 세번째 currentIndex : 현재 배열 인덱스 번호
  • 네번째 arr : 전체 배열

  // 총 포인트 계산하기
  let points = [40, 100, 1, 5, 25, 10];
  
  // reduce를 사용할 경우
  let sum2 = points.reduce(function (accumulator, currentValue) {
      return accumulator + currentValue;
  }, 0); 
  // 처음 accumulator값 0에 배열 요소를 순서대로 계산
  // 0 + 40 = 40
  // 40 + 100 = 140
  // 140 + 1 = 141
  // 141 + 5 = 146
  // 146 + 25 = 171
  // 171 + 10 = 181
  
  console.log(sum2); // 181
  
  // for ...of 사용할 경우,
  let sum1 = 0;
  for (const point of points) {
  	sum1 = sum1 + point;
  }
  
  console.log(sum1); // 181

 

이 외에도 여러 내장 함수들이 있던데 필요할 때 찾아서 정리해두면 좋을 것 같다.

참고자료

개발자의 부트캠프 강의 내용