TIL(2/5) / JS 1 (배열 메서드)

오늘의 커리큘럼은 javascript 1주차 강의 듣고 간단한 팀 git과제를 하는 날이었다
봐도봐도 헷갈리는 개념만 다시 짚고 넘어가야겠다

git 너무 어렵다~!!!!!!

 

배열 고차 함수

Array.prototype.forEach

• forEach메서드는 for 문을 대체할 수 있는 고차 함수다.
• 자신의 내부에서 반복문을 실행한다.
• 원본 배열을 변경하지 않는다
• 하지만 콜백 함수를 통해 원본 배열을 변경할 수는 있다
• forEach 메서드의 반환값은 언제나 undefined
• 단순히 반복문을 대체하기 위한 고차 함수

const numbers = [1, 2, 3];
const pows = [];
numbers.forEach((i) => pows.push(i * 2));
console.log(pows); // [2, 4, 6]

[1, 2, 3].forEach((item, index, arr) => {
  console.log(`요소값: ${item}, 인덱스: ${index}, this: ${JSON.stringify(arr)}`);
});
/*
요소값: 1, 인덱스: 0, this: [1,2,3]
요소값: 2, 인덱스: 1, this: [1,2,3]
요소값: 3, 인덱스: 2, this: [1,2,3]
*/

* JSON.stringify : 객체를 JSON 포맷의 문자열로 변환

const numbers = [1, 2, 3];
numbers.forEach((item, index, arr) => { arr[index] = item ** 2; });
console.log(numbers); // [1, 4, 9]

 

---

Array.prototype.map

• map 메서드는 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출한다.
• 그리고 콜백 함수의 반환값들로 구성된 새로운 배열을 반환한다.
• 원본 배열은 변경되지 않는다.
• map 메서드는 콜백 함수의 반환값들로 구성된 새로운 배열을 반환

const numbers = [1, 4, 9];
const roots = numbers.map((item) => Math.sqrt(item));
console.log(roots); // [1, 2, 3]
console.log(numbers); // [1, 4, 9]

[1, 2, 3].map((item, index, arr) => {
  console.log(
    `요소값: ${item}, 인덱스: ${index}, this: ${JSON.stringify(arr)}`
  );
});
/*
요소값: 1, 인덱스: 0, this: [1,2,3]
요소값: 2, 인덱스: 1, this: [1,2,3]
요소값: 3, 인덱스: 2, this: [1,2,3]
*/

 

---

Array.prototype.filter

• filter 메서드는 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출한다.
• 콜백 함수의 반환값이 true인 요소로만 구성된 새로운 배열을 반환한다.
• 원본 배열은 변경되지 않는다.
•  

const numbers = [1, 2, 3, 4, 5];
const odds = numbers.filter(item => item % 2);
console.log(odds); // [1, 3, 5]

* 요소값을 2로 나눈 나머지를 반환

* 반환값이 true, 즉 홀수인 요소만 추출

[1, 2, 3].filter((item, index, arr) => {
  console.log(`요소값: ${item}, 인덱스: ${index}, this: ${JSON.stringify(arr)}`);
  return item % 2;
});
/*
요소값: 1, 인덱스: 0, this: [1,2,3]
요소값: 2, 인덱스: 1, this: [1,2,3]
요소값: 3, 인덱스: 2, this: [1,2,3]
*/

---

Array.prototype.find

• find 메서드는 자신을 호출한 배열의 요소를 순회하면서 인수로 전달된 콜백 함수를 호출하여 반환값이 true인 첫 번째 요소를 반환한다.
• 콜백 함수의 반환값이 true인 요소가 존재하지 않는다면 undefined를 반환

const users = [
  { id: 1, name: "Lee" },
  { id: 2, name: "Kim" },
  { id: 3, name: "Ham" },
  { id: 4, name: "Park" },
];
users.find((user) => user.id === 2); // { id: 2, name: 'Kim' }

 

 

배열 메서드

 

 

push, pop, shift, unshift 메서드는 모두 원본 배열을 직접 변경한다.

Array.prototype.splice

• 원본 배열의 중간에 요소를 추가하거나 중간에 있는 요소를 제거하는 경우 splice 메서드를 사용한다.
• splice 메서드는 3개의 매개변수가 있으며 원본 배열을 직접 변경한다.
  • start: 원본 배열의 요소를 제거하기 시작할 인덱스. start만 지정하면 원본 배열의 start부터 모든 요소를 제거한다. start가 음수인 경우 배열의 끝에서의 인덱스를 나타낸다. 만약 start가 -1이면 마지막 요소를 가리키고 -n이면 마지막에서 n번째 요소를 가리킨다.
  • deleteCount: 원본 배열의 요소를 제거하기 시작할 인덱스인 start부터 제거할 요소의 개수. deleteCount가 0인 경우 아무런 요소도 제거되지 않는다.(옵션)
  • items: 제거한 위치에 삽입할 요소들의 목록.생략할 경우 원본 배열에서 요소들을 제거하기만 한다.(옵션)

const arr = [1, 2, 3, 4];
const result = arr.splice(1, 2, 20, 30);
// 제거한 요소가 배열로 반환
console.log(result); // [2, 3]
// splice 메서드는 원본 배열을 직접 변경한다
console.log(arr); // [1, 20, 30, 4]

const arr = [1, 2, 3, 4];
const result = arr.splice(1, 0, 100);
console.log(result); // [1, 100, 2, 3, 4]
console.log(arr); // []

---

Array.prototype.slice

• slice 메서드는 인수로 전달된 범위의 요소들을 복사하여 배열로 반환한다.
• 원본 배열은 변경되지 않는다.
• 2개의 매개변수를 갖는다
  • start: 복사를 시작할 인덱스. 음수인 경우 배열의 끝에서의 인덱스를 나타낸다. 예를 들어, slice(-2)는 배열의 마지막 두 개의 요소를 복사하여 배열로 반환
  • end: 복사를 종료할 인덱스. 이 인덱스에 해당하는 요소는 복사되지 않는다. end는 생략 가능하며 생략 시 기본값은 length 프로퍼티 값이다.

const arr = [1, 2, 3];
arr.slice(0, 1); // [1]
arr.sllice(1, 2); // [2]
arr.slice(1); // [2, 3]
arr.slice(-1); // [3]
arr.slice(-2); // [2, 3]
console.log(arr); // [1, 2, 3]

 

참조 - 딥다이브 책