javascript array methods

kimsoyeon·2022년 5월 31일

Array ['배열']

키를 사용해 식별할 수 있는 값을 담은 컬렉션은 객체라는 자료구조를 이용해 저장하는데, 객체만으로도 다양한 작업을 할 수 있다.

그런데 개발을 진행하다 보면 첫 번째 요소, 두 번째 요소, 세 번째 요소 등과 같이 순서가 있는 컬렉션이 필요할 때가 생기곤 한다. 사용자나 물건, HTML 요소 목록같이 일목요연하게 순서를 만들어 정렬하기 위해서 말이다.

순서가 있는 컬렉션을 다뤄야 할 때 객체를 사용하면 순서와 관련된 메서드가 없어 그다지 편리하지 않다. 객체는 태생이 순서를 고려하지 않고 만들어진 자료구조이기 때문에 객체를 이용하면 새로운 프로퍼티를 기존 프로퍼티 ‘사이에’ 끼워 넣는 것도 불가능하다.

이럴 땐 순서가 있는 컬렉션을 저장할 때 쓰는 자료구조인 배열을 사용할 수 있다.

Array 메소드를 알아보자

join()

배열의 모든 요소를 하나의 문자열로 반환

const fruits = ['apple', 'banana', 'orange'];
const answer = fruits.join(' and ');
//apple and banana and orange

split()

문자열을 배열로 반환

const fruits2 = '🍎, 🥝, 🍌, 🍒';
const answer2 = fruits2.split(',');

//['🍎', '🥝', '🍌', '🍒']

splice()

원본 배열에서 기존 요소를 삭제 또는 교체하여 원본 배열을 변경하고 제거된 배열 반환
start : 추출 시작점에 대한 인덱스
end : 추출을 종료할 기준의 인덱스, end 이전 까지 요소만 추출

slice()

처음부터 끝 점까지의 복사본을 새로운 배열 객체로 반환, 즉 원본 배열 수정 되지 않음
start : 추출 시작점에 대한 인덱스
end : 추출을 종료할 기준의 인덱스, end 이전 까지 요소만 추출

const array = [1, 2, 3, 4, 5];
const answer4 = array.splice(0, 2);

// array
// [3, 4, 5]

// answer4
// [1, 2]

const answer41 = array.slice(1, 3); 
// [2, 3]

객체로 이루어진 배열 예시로 진행해보자

students = [
    { 
        name: 'A', 
        age: 29, 
        enrolled: true, 
        score: 45
    },
    { 
        name: 'B', 
        age: 28, 
        enrolled: false, 
        score: 80
    },
    { 
        name: 'C', 
        age: 30, 
        enrolled: true, 
        score: 90
    },
    { 
        name: 'D', 
        age: 40, 
        enrolled: false, 
        score: 66
    },
    { 
        name: 'E', 
        age: 18, 
        enrolled: true, 
        score: 88
    },
]

find()

메서드는 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환

const answer5 = students.find((e) => {
    return e.score >= 79;
});

// { name: 'B', age: 28, enrolled: false, score: 80 }

filter()

주어진 조건에 충족하는 요소를 모두 반환 (조건에 false면 버림)

const answer6 = students.filter((e) => {
    return e.enrolled;
});

// 
{ name: 'A', age: 29, enrolled: true, score: 45}
{ name: 'C', age: 30, enrolled: true, score: 90}
{ name: 'E', age: 18, enrolled: true, score: 88}

map()

요소를 각각 순서대로 돌아서 조건에 충족하는 결과값을 모아 새로운 배열로 반환

const answer7 = students.map((e) => e.score * 3);

// [135, 240, 270, 198, 264]

forEach()

각 배열 요소를 한번씩 돌아~, 배열을 변형하지않고, 콜백함수로 변형할 수 있다. 반복문
for문을 사용했을 때보다 직관적이며 간결.

 for (let i = 0; i < students.length; i++) {
  //console.log(students[i]);
 }

students.forEach((e) => {
  //console.log(e);
 });

some()

배열의 요소 중 하나라도 true 면 true 반환

every()

배열의 요소 모두가 true여야만 true 반환, 아니면 false 반환

const answer8 = students.some((e) => {
  return e.score < 50;
});
// true

const answer9 = students.every((e) => {
  return e.score < 50;
});
// false

indexOf()

배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고 ,
존재하지 않으면 -1

const superheroes = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지'];
const index = superheroes.indexOf('토르');

//2

findeIndex()

주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환,
존재하지 않으면 -1

const aaa = students.findIndex((e) => {
  return e.age > 29;
});

//2

reduce()

배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고,
하나의 결과값을 반환

reduce((누적값, 현잿값, 인덱스, 요소) => { return 결과 }, 초깃값);
초깃값을 적어주지 않으면 자동으로 초깃값이 0번째 인덱스의 값이 됨
 
 const average = students.reduce((accumulator, current, index) => {
  if(index === students.length - 1){ // 마지막 index 이면
    return (accumulator + current.score) / students.length
  }
    // console.log('---------------');
    // console.log(accumulator);
    // console.log(current.score)
    return accumulator + current.score
 },0);
 
 // 73.8

sort()

배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환

// 오름 차순
const answer15 = students.map((student) => student.score).sort();
//[45, 66, 80, 88, 90]

 //내림 차순
 const answer16 = students
 .map((student) => student.score)
 .sort((a, b) => {
    return b - a;
 });
 
 //[90, 88, 80, 66, 45]

kimsoyeon

i am korean dobby

이전 포스트

[CODING TEST]::LV1 음양 더하기

다음 포스트