[JS] JavaScript Array 2 - Array method(배열 메소드)

Array method

1. join (separator?:string);

모든 배열 요소를 하나의 string으로 리턴한다.

separator를 전달하면 separator로 구분하여 리턴한다.

 

const fruits = ['apple', 'banana', 'orange'];

const result = fruits.join();
console.log(result);  // apple,banana,orange

const result2 = fruits.join(' | ');
console.log(result2);  // apple | banana | orange

 

2. split (separator:string, limit?);

separator와 limit을 전달받아서 separator를 기준으로 string을 잘게 substrings로 나눈다.

limit로 리턴받을 배열의 개수를 지정하는 것도 가능하다.

 

const fruits = '🍎, 🥝, 🍌, 🍒';

const result = fruits.split(',');  // ','을 기준으로 문자열을 나눈다. 구분 기호는 생략되고, 남은 문자열이 배열로 반환
console.log(result);  // ["🍎", " 🥝", " 🍌", " 🍒"]

const result2 = fruits.split(',', 2);  // 배열에서 반환되는 요소를 2개로 제한
console.log(result2); // ["🍎", " 🥝"]

 

3. reverse ();

배열 요소의 순서를 반대로 만든다.

새로운 배열을 만드는 것이 아니라 기존 배열 자체의 순서를 바꾸어 그 바뀐 배열을 리턴한다.

 

const array = [1, 2, 3, 4, 5];

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

 

4. splice (start:number, deleteCount?:number); / slice(start?: number, end?: number);

splice()는 기존의 배열 요소를 삭제하거나 새로운 요소를 추가하여 배열의 내용을 변경한다.

기존 배열 자체에서 start index부터 deleteCount만큼 요소를 삭제하고, 삭제한 배열 요소들을 리턴한다.

slice()는 배열의 특정 부분을 리턴하여 새로운 배열을 만든다.

그 특정한 부분은 start와 end로 지정할 수 있다. 여기서 end는 제외하고 리턴된다

 

{
  const array = [1, 2, 3, 4, 5];
  const result = array.splice(0, 2);  // index 0번 부터 2개 요소 삭제

  console.log(result);  // [1, 2] 삭제된 요소 리턴
  console.log(array);  // [3, 4, 5] 삭제되고 남은 배열요소
}

{
  const array = [1, 2, 3, 4, 5];
  const result = array.slice(2, 5);  // index 2번 부터 5번 앞 까지 리턴
  console.log(result);  // [3, 4, 5]
  console.log(array);  // [1, 2, 3, 4, 5]  기존 배열은 그대로 

}

 

 

---

5~11

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 (callback(element, index?, array?), thisArg?);

전달된 콜백함수를 만족하는 배열의 요소 값을 리턴한다.

전달된 콜백함수는 element, index, array를 인자로 받는다.

이 함수가 true이면, 배열에서 첫 번째로 찾아진 요소를 리턴하고, 요소를 찾지 못하면 undefined를 리턴한다.

callback함수는 배열에 있는 모든 요소마다 호출된다.

호출된 함수가 true를 리턴하면 함수를 멈추고, true인 그 요소를 리턴한다.

 

// find a student with the score 90

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

console.log(result);
// Student {name: "C", age: 30, enrolled: true, score: 90}

 

6. filter (callback(element, index?, array?), thisArg?);

callback함수를 전달해서 함수 실행 결과가 true가 되는 요소들을 모아서 새로운 배열로 리턴한다.

 

// make an array of enrolled students

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

console.log(result);
// [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}
// length: 3__proto__: Array(0)

 

7. map (callback(element, index?, array?), thisArg?);

배열 안에 있는 요소 하나하나를 함수를 통해 얻어진 결과로 변환하여 새로운 배열로 리턴한다.

 

// make an array containing only the students' scores

const result = students.map(student => (student.score));
console.log(result);  // [45, 80, 90, 66, 88]

const result2 = students.map(student => (student.score * 2));
console.log(result2);  // [90, 160, 180, 132, 176]

 

8. some / every (callback(element?, index?, array?), thisArg?);

some()은 배열의 요소 중에 callback함수를 실행했을 때 true가 되는 요소가 있는지를 알려준다.

요소 중 하나라도 callback 함수의 조건을 만족하면, true를 리턴한다.

every()는 배열에 있는 모든 요소들이 callback함수를 실행했을 때 모두 true가 되는지를 알려준다.

요소들 모두가 callback 함수의 조건을 만족했을 때 true를 리턴한다.

 

// check if there is a student with the score lower than 50

const result = students.some((student) => student.score<50);
console.log(result);  // true
  
const result2 = students.every((student) => student.score<50);
console.log(result2);  // false

 

9. reduce (callback(previousValue,currentValue, currentIndex), initialValue?);

callback함수는 배열에 들어있는 모든 요소들 마다 호출이 된다.

reduce()는 callback함수에서 리턴되는 값을 누적하여 그 결과 값을 리턴한다.

previousValue에는 callback 함수에서 리턴된 값이 누적되어 전달받고,

currentValue에는 배열의 요소를 순차적으로 전달 받는다.

initialValue는 누적을 시작하기 위한 초기 값으로 사용된다. 

 

// compute students' average score

const result = students.reduce((prev, curr) => prev + curr.score, 0);

console.log(result);  // 369
console.log(result / students.length);  // 73.8

 

10. sort (compareFn(a, b)?);

sort()는 기본적으로 배열 요소들을 알파벳 순서에 따라 정렬한다. (ㄱ, ㄴ, ㄷ... / 1, 2, 3...)

compareFn를 전달할 경우, 배열 요소는 compareFn의 리턴 값에 따라 정렬된다.

a와 b를 비교하여 함수의 결과 값이 0보다 작으면 a를 b보다 낮은 index로 정렬하고,

함수의 결과 값이 0보다 크면 b를 a보다 낮은 index로 정렬한다.

 

// sorted in ascending order

const result = students.map(student => student.score)
  .sort();
  .join();
  
console.log(result);  // 45,66,80,88,90

const result = students.map(student => student.score)
  .sort((a, b) => b - a);
  .join();
  
console.log(result);  // 90,88,80,66,45

 

11. Make a string containing all the scores

const result = students
  .map((student) => student.score)  // [45, 80, 90, 66, 88] score로만 새로운 배열 생성
  .filter((score) => score >= 50)
  .join();  // array를 string으로 변환

console.log(result);  // 80,90,66,88

 

 

---

* 기존 배열 자체를 변경하는 Array Method

push(), pop(), shift(), unshift(), reverse(), sort(), splice()

*기존 배열을 변경하지 않고 참조만 하는 Array Method

join(), slice(), concat(), toString()

* 기존 배열을 반복적으로 참조하는 Array Method

forEach(), map(), filter(), every(), some(), reduce()

 

 

---

[JS] JavaScript Array 1 - 자바스크립트 배열의 생성과 method

[JS] JavaScript Array 1 - 자바스크립트 배열의 생성과 method