누가봐도 인생 1회차의 기록장

개발공부/JavaScript

자주 사용하는 배열 함수 10가지

김놀먹 2022. 7. 10. 23:14

출처 : 드림코딩

https://www.youtube.com/watch?v=3CUjtKJ7PJg&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=9&ab_channel=%EB%93%9C%EB%A6%BC%EC%BD%94%EB%94%A9

배열함수

1. 주어진 배열을 문자열로 변환 : join() , toString()
⇒ join은 구분자를 넣을 수 있음, 기본은 콤마

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

// 'apple,banana,orange'

2. 주어진 문자열을 배열로 변환 : split()
⇒ 구분자 전달 필수, 기본 구분자는 콤마

const fruits = '🍉,🍊,🍋,🍌';
fruits.split(',')

// (4) ['🍉', '🍊', '🍋', '🍌']

fruits.split(',', 2)

// (2) ['🍉', '🍊']

3. 배열의 순서를 거꾸로 만들기: reverse()

⇒ 기존 배열을 바꿈

const array = [5,4,3,2,1];
array.reverse()

// (5) [1, 2, 3, 4, 5]

4. 처음 2개의 요소를 제거한 새로운 배열 만들기: slice() (=배열의 특정한 부분만 리턴)
⇒ 남기고 싶은 인덱스의 시작과 끝을 정해줌. 끝은 배제됨
(ex. 인덱스 4번까지 남기고 싶으면 끝 인덱스는 5로 적기)

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

// (3) [3, 4, 5]
  • splice() ⇒ 기존 배열을 바꿈
const array = [1,2,3,4,5]; // 1
const result = array.splice(0,2); // 2

// console.log(array)
// (3) [3, 4, 5] 
// console.log(result)
// (2) [1, 2]   

Q. 5-10번

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. 점수가 90점인 학생 찾기 : find()
⇒ 배열의 요소마다 콜백함수전달, boolean값 리턴, 처음 찾은 값 리턴

students.find((student)=> student.score === 90);

// Student {name: 'C', age: 30, enrolled: true, score: 90}

6. 수업에 등록한 학생 찾기 : filter()
⇒ 원하는 요소만 필터링 해줌. 새로운 배열을 만듦

students.filter((student)=> student.enrolled);

//(3) [Student, Student, Student]
// 0: Student {name: 'A', age: 29, enrolled: true, score: 45}
// 1: Student {name: 'C', age: 30, enrolled: true, score: 90}
// 2: Student {name: 'E', age: 18, enrolled: true, score: 88}

7. 점수만 들어있는 새로운 배열 만들기: map()
⇒ 배열 안에 있는 각각의 요소를 콜백함수를 호출하면서 다른 요소로 변환. 새로운 배열을 만듦

students.map((student)=> student.score);

// (5) [45, 80, 90, 66, 88]

8. 점수가 50점 미만인 학생유무 확인 : some() , every()
⇒ some : 하나라도 조건에 만족하는 요소가 있다면 true ⇒ every : 모든 요소가 조건에 만족하면 true

students.some((student)=> student.score < 50);

// true

9. 평균 점수 구하기: reduce()

reduceRight() ⇒ 배열의 제일 마지막부터 시작
⇒ 배열 안의 모든 요소들마다 콜백함수 호출, 콜백함수에서 리턴되는 값은 어떤 요소들의 누적 결과값을 리턴
⇒ 원하는 시작점부터 모든 배열을 돌면서 어떤 값을 누적할 때 사용

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

// 73.8

// prev : 이전의 콜백함수에서 리턴된 값
// curr : 배열의 아이템을 순차적으로 전달받음
// 0에서 시작하여 0+A의 점수+B의 점수+C의 점수 = ...점수누적
// 학생수로 나누기
  •  모든 점수를 문자열로 변환
students.map(student => student.score).join()

// '45,80,90,66,88'

10. 낮은 점수가 먼저 나오게 정렬하기 : sort()

⇒ 기존 배열을 변경

students.map(student => student.score)
	.sort((a,b)=>a-b)
	.join()

// '45,66,80,88,90'

'개발공부 > JavaScript' 카테고리의 다른 글

공백 제거 함수(trim, replace)  (0) 2022.09.15
자바스크립트 ES5와 ES6 차이  (0) 2022.07.18
Date 객체 정리  (0) 2022.07.13
자바스크립트에서 CSS 다루기  (0) 2022.04.21
자바스크립트 시간 차이 구하기  (0) 2022.04.21