[자바스크립트] 9. 배열 함수들

자바스크립트 기초 강의(ES5+) - 드림 코딩 by 엘리 강의 정리 입니다. 

자세한 내용을 공부하고 싶으시면 위의 링크에 들어가셔서 학습하시는 것을 추천드립니다.

---

유용한 9가지 배열 함수들

 

1. Join

{
  const fruits = ['apple', 'banana', 'orange'];
  const result = fruits.join(',');
  console.log(result);
}

- Join은 배열에 있는 모든 value를 더해서 string으로 반환해주는 것입니다.

- 값을 중간자로 받아서 넣어주면, 배열 사이 사이에 구분자를 넣어주게 됩니다.

 

{
  const fruits = ['apple', 'banana', 'orange'];
  const result = fruits.join(', and');
  console.log(result);
}

---

2. Split

{
  const fruits = '사과,키위,바나나,체리';
  const result = fruits.split(',');
  console.log(result);
}

 

- 구분자를 통해서 string 을 배열의 형태로 저장해줄 수 있습니다.

- limit을 둬서 갯수를 달리 출력 가능합니다.

 

{
  const fruits = '사과,키위,바나나,체리';
  const result = fruits.split(',', 2);
  console.log(result);
}

---

3. reverse

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

- reverse는 배열의 순서를 반대로 바꿔주는 함수입니다.

- reverse는 배열 자체도 순서를 바꿔 버립니다.

---

4. Slice

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

- slice는 배열의 일정 부분을 잘라주는 함수입니다.

- 2가 시작 인덱스 이고, 5는 마지막 인덱스는입니다.

- 2는 포함이 되고, 5의 인덱스는 포함이 되지 않습니다. 따라서, 2 3 4 인덱스 부분이 저장이 됩니다.

 

 

---

아래 문제들은 이 클래스를 이용해서 풀이할 예정입니다.

class Student {
  constructor(name, age, enrolled, score) {
    this.name = name;
    this.age = age;
    this.enrolled = enrolled;
    this.score = score;
  }
}
const students = [
  new Student('A', 29, true, 45),
  new Student('B', 28, false, 80),
  new Student('C', 30, true, 90),
  new Student('D', 40, false, 66),
  new Student('E', 18, true, 88),
];

 

5. find

{
  const result = students.find((student) => student.score === 90);
  console.log(result);
}

- find는 첫번째에 해당하는 값을 출력하게 됩니다.

- 학생의 점수가 90점인 학생을 출력하는 코드입니다.

90점인 학생이 여러명 있어도 처음 발견되는 학생의 코드만 출력을 합니다.

 

---

6. filter

{
  const result = students.filter((student) => student.enrolled);
  console.log(result);
}

- filter은 조건에 해당하는 모든 값을 출력하는 함수입니다.

- find와 다르게 만약 조건을 90점으로 준다면, 여러명이면 여러명 다 출력을 합니다.

- enrolled 가 true 인 학생을 필터 해줍니다.

 

---

7. map

{
  const result = students.map((student) => student.score);
  console.log(result);
}

- 배열의 요소들을 원하는 요소를 얻을 수 있고, 변경이 가능합니다.

- student.score로 학생들의 점수만을 뽑아서 배열을 만들어 줍니다.

 

---

8. some , every

{
  console.clear();
  const result = students.some((student) => student.score < 50);
  console.log(result);

  const result2 = !students.every((student) => student.score >= 50);
  console.log(result2);
}

- some은 값 중에서 하나의 값이라도 참이 되면 참을 반환합니다.

- every은 값 모두 참이 되면 참을 반환합니다.

 

---

9. reduce

{
  const result = students.reduce((prev, curr) => prev + curr.score, 0);
  console.log(result / students.length);
}

 - 배열에 있는 값을 누적할 때 사용하는 함수입니다.

 

 

---

지금 까지 나왔던 함수들을 합쳐 사용할수도 있습니다.

{
  const result = students
    .map((student) => student.score)
    .filter((score) => score >= 50)
    .join();
  console.log(result);
}

- map으로 값들을 뽑아주고, filter로 조건을 붙여서 바꿔준 후에, join을 통해서 string으로 반환을 해줍니다.

 

{
  const result = students
    .map((student) => student.score)
    .sort((a, b) => b - a)
    .join();
  console.log(result);
}

- sort는 정렬에 도움을 주는 함수입니다.

b-a로 하면 내림차순 형태로 출력이 되는 것을 확인하실 수 있습니다.