[JavaScript] 필수 배열함수 10가지 정리

1. join()

join() 메서드는 배열의 모든 요소들을 합해서 하나의 문자열로 반환합니다. 필요한 경우, 배열의 각 요소를 구분할 구분자를 사용할 수 있습니다. 생략하면 요소들이 쉼표로 구분 됩니다.

{
  const laptop = ['맥북', '그램', '플렉스'];
  const result = laptop.join();
  console.log(result); // 맥북,그램,플렉스
}

{
  const laptop = ['맥북', '그램', '플렉스'];
  const result = laptop.join('');
  console.log(result); // 맥북그램플렉스
}

{
  const laptop = ['맥북', '그램', '플렉스'];
  const result = laptop.join(', ');
  console.log(result); // 맥북, 그램, 플렉스
}

※ 배열의 길이가 0일 경우 빈 문자열을 반환합니다.

2. split()

split() 메서드는 전달된 구분자를 통해 문자열을 나눠주고 배열을 반환합니다. 필요한 경우, 반환할 배열의 길이를 설정할 수 있습니다.

{
  const laptop = '맥북, 그램, 플렉스, 서피스랩탑';
  const result = laptop.split(',');
  console.log(result); // (4) ["맥북", " 그램", " 플렉스", " 서피스랩탑"]
}

{
  const laptop = '맥북, 그램, 플렉스, 서피스랩탑';
  const result = laptop.split(',', 2);
  console.log(result); // (2) ["맥북", " 그램"]
}

{
  const laptop = '맥북, 그램, 플렉스, 서피스랩탑';
  const result = laptop.split(' ');
  console.log(result); // (4) ["맥북,", "그램,", "플렉스,", "서피스랩탑"]
}

{
  const laptop = '맥북, 그램, 플렉스, 서피스랩탑';
  const result = laptop.split('');
  console.log(result); // (18) ["맥", "북", ",", " ", "그", "램", ",", " ", "플", "렉", "스", ",", " ", "서", "피", "스", "랩", "탑"]
}

{
  const laptop = '맥북, 그램, 플렉스, 서피스랩탑';
  const result = laptop.split();
  console.log(result); // ["맥북, 그램, 플렉스, 서피스랩탑"]
}

※ split() 메서드에 구분자를 전달하지 않을 경우(맨 아래), 문자열 전체가 한개의 요소인 배열로 반환됩니다.

3. reverse()

reverse() 메서드는 배열의 순서를 반전 시킵니다. 첫 번째 요소가 마지막 요소가 되고, 마지막 요소는 첫 번째 요소가 됩니다.

{
  const num = [1, 2, 3, 4, 5];
  const result = num.reverse();
  console.log(result); // (5) [5, 4, 3, 2, 1]
  console.log(num); // (5) [5, 4, 3, 2, 1]
}

※ ✅ 위 코드를 보면 배열 자체도 순서가 반전되어 있습니다. reverse() 메서드는 배열 자체(원본 배열)를 반전시키고, 리턴값도 반전시킨 배열을 반환합니다.

4. slice()

slice() 메서드는 배열의 특정 부분을 추출해서 추출된 부분을 새로운 배열로 반환 합니다.(원본 배열은 그대로)

{
  const num = [1, 2, 3, 4, 5];
  const result = num.slice(0, 3); // index 0부터, index 3까지 새로운 배열 추출 및 반환(마지막 3의 index는 포함하지 않음) 
  console.log(result); // (3) [1, 2, 3]
  console.log(num); // (5) [1, 2, 3, 4, 5]
}

{
  const num = [1, 2, 3, 4, 5];
  const result = num.slice(2, 5);
  console.log(result); // (3) [3, 4, 5]
  console.log(num); // (5) [1, 2, 3, 4, 5]
}

※ upto_index에 해당하는(위 코드에서 3과 5) index는 반환값에 포함되지 않습니다. 

※ ✅ splice()와 비교

{
  const num = [1, 2, 3, 4, 5];
  const result = num.splice(0, 3); // index 0부터, 3개의 요소 제거 및 반환 
  console.log(result); // (3) [1, 2, 3] // 제거된 3개의 요소
  console.log(num); // (2) [4, 5] // ✅원본 배열에도 영향(제거된 3개의 요소가 원본 배열에서 없어짐)
}

5. find()

find() 메서드는 전달된 콜백 함수가 true가 된 첫번째 요소의 값을 반환합니다. 모든 요소가 false라면 undefined를 반환합니다. 

{
  const array = [5, 10, 115, 23, 26, 38, 120];
  const found = array.find(element => element > 10);
  console.log(found); // 115
}

{
  const array = [5, 10, 115, 23, 26, 38, 120];
  const found = array.find(element => element < 5);
  console.log(found); // undefined
}
--------------------------------- ✅학생 찾기 ---------------------------------
class Student {
  constructor(name, age, enrolled, score) {
    this.name = name;
    this.age = age;
    this.enrolled = enrolled;
    this.score = score;
  }
}

const students = [
  new Student('A', 26, true, 95),
  new Student('B', 28, false, 80),
  new Student('C', 33, true, 90),
  new Student('D', 39, false, 66),
  new Student('E', 18, true, 88),
];

{
  const result = students.find(student => student.score === 90); 
  console.log(result); // Student {name: "C", age: 33, enrolled: true, score: 90}
}

{
  const result = students.find(student => student.score < 90); 
  console.log(result); // Student {name: "B", age: 28, enrolled: false, score: 80}
}

6. filter()

filter() 메서드는 콜백 함수에 지정된 조건을 충족하는 새로운 배열 요소를 반환합니다.

class Clothes {
  constructor(name, addedToCart, isBought) {
    this.name = name;
    this.addedToCart = addedToCart;
    this.isBought = isBought;
  }
}
const clothes = [
  new Clothes('shirt', true, false),
  new Clothes('pants', false, true),
  new Clothes('outer', true, false),
  new Clothes('socks', true, true),
];

const result = clothes.filter(clothes => clothes.addedToCart); // 장바구니에 추가된 것만 출력
console.log(result); // (3) [Clothes, Clothes, Clothes]
//0: Clothes {name: "shirt", addedToCart: true, isBought: false}
//1: Clothes {name: "outer", addedToCart: true, isBought: false}
//2: Clothes {name: "socks", addedToCart: true, isBought: true}

7. map()

map() 메서드는 배열의 모든 요소 각각에 주어진 콜백 함수를 호출하고, 그 반환값을 포함하여 새로운 배열을 반환합니다. 

class Clothes {
  constructor(name, addedToCart, isBought, price) {
    this.name = name;
    this.addedToCart = addedToCart;
    this.isBought = isBought;
    this.price = price;
  }
}

const clothes = [
  new Clothes('shirt', true, false, 19000),
  new Clothes('pants', false, true, 39500),
  new Clothes('outer', true, false, 119000),
  new Clothes('socks', true, true, 3000),
];

{
  const result = clothes.map(clothes => clothes.name);
  console.log(result); // (4) ["shirt", "pants", "outer", "socks"]
}

{
  const result = clothes.map(clothes => clothes.price * 1.2);
  console.log(result); // (4) [22800, 47400, 142800, 3600]
}

※ map() 메서드는 원본 배열을 다른 데이터의 새로운 배열로 만들고 싶을때 유용합니다.

8. some()

some() 메서드는 true를 찾을때까지 모든 요소 각각에 콜백을 실행합니다. 해당하는 요소를 발견할 경우, 즉시 true를 반환합니다. 그렇지 못할 경우엔 false를 반환합니다.

const array = [1, 3, 5, 6, 10];

// 요소중에 짝수가 있는지 확인하는 함수
const even = (element) => element % 2 === 0;

console.log(array.some(even)); // true

console.log(array.every(even)); // false

※ 배열 내 요소 중 하나라도 true이면 true를 반환하는 some() 메서드와 달리 every() 메서드는 주어진 콜백에 모든 요소가 true가 되어야 합니다.

9. reduce()

reduce() 메서드는 모든 요소 각각에 콜백을 실행하며 실행된 콜백은 누적됩니다. 값을 반환하고 다음 차례의 콜백함수는 인수로 제공이 됩니다. 필요한 경우, 초기값을 설정 할 수 있습니다.

class Clothes {
  constructor(name, addedToCart, isBought, price) {
    this.name = name;
    this.addedToCart = addedToCart;
    this.isBought = isBought;
    this.price = price;
  }
}

const clothes = [
  new Clothes('shirt', true, false, 19000),
  new Clothes('pants', false, true, 39500),
  new Clothes('outer', true, false, 119000),
  new Clothes('socks', true, true, 3000),
];

// reduce() 메서드에 이전값(prev), 현재값(curr), 초기값 설정(0)
// reduce() 메서드는 첫번째 인수에 previousValue: number, 두번째 인수에 currentValue: number를 전달합니다.
const result = clothes.reduce((prev, curr) => prev + curr.price, 0); // 총합 계산
const average = result / clothes.length // 평균값 계산
console.log(result); // 180500
console.log(average); // 45125

// 1~10의 숫자 더하기
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const result2 = array.reduce((prev, curr) => prev + curr, 0);
console.log(result2); // 55

※ reduce는 '줄이다', '환산하다' 라는 뜻을 가지고 있습니다. 배열의 값(요소)들을 하나의 값으로 만들어주는 메서드로 볼 수 있습니다.

10. sort()

sort() 메서드는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환합니다. 정렬 순서를 정의한 함수를 생략하면 배열의 각 요소 문자열 변환에 따라 각 문자의 유니 코드 포인트 순서로 비교하여 정렬합니다.(ex. 'apple'은 'banana' 앞에 위치합니다.)

class Clothes {
  constructor(name, addedToCart, isBought, price) {
    this.name = name;
    this.addedToCart = addedToCart;
    this.isBought = isBought;
    this.price = price;
  }
}

const clothes = [
  new Clothes('shirt', true, false, 19000),
  new Clothes('pants', false, true, 39500),
  new Clothes('outer', true, false, 119000),
  new Clothes('socks', true, true, 3000),
];

{
  const result = clothes
    .map(clothes => clothes.price) // 새로운 가격배열 생성
    .sort((a,b)=>a - b) // 비교 함수 정의 작은 가격부터
    .join(); // 문자열 변환
}

{
  const result = clothes
    .map(clothes => clothes.price) // 새로운 가격배열 생성
    .sort((a,b)=>b - a) // 비교 함수 정의 큰 가격부터
    .join(); // 문자열 변환
}

console.log(result); // 119000,39500,19000,3000

※ sort() 메서드는 정렬한 배열을 반환합니다. 즉, 새로운 배열이 아닌 원본 배열이 정렬됩니다.

참고

자바스크립트 유용한 10가지 배열 함수들 - 드림코딩 by 엘리(유튜브)
Array - MDN