[TIL 22] 배열의 메서드

배열은 외우는 방법 밖에 없다...외울거 산더미~

배열 메서드 Array Method

배열은 Array 타입 객체이다.
Array.prototype의 프로퍼티를 상속받는다.
Array.prototype 여기에 수많은 메서드들이 있다.

그 수많은 메서드들을 알아보자.

수정 메서드

원본 배열을 바로 수정한다.

• push 메서드
• pop 메서드
• shift 메서드
• unshift 메서드
• splice 메서드
• sort 메서드

# push 메서드

배열 마지막에 하나 이상의 요소를 추가한 다음 그 배열의 길이를 반환한다.

const family = ["엄마","아빠","할머니","할아버지"];

family.push("남동생");
console.log(family); //["엄마","아빠","할머니","할아버지","남동생"]

요소를 두 개 이상 추가하려면 쉼표로 구분해서 인수로 넘긴다.

const family = ["엄마","아빠","할머니","할아버지"];

family.push("남동생","여동생");
console.log(family); //["엄마","아빠","할머니","할아버지","남동생","여동생"]

# pop 메서드

배열의 마지막 요소를 잘라내어 반환한다.

const family = ["엄마","아빠","할머니","할아버지"];

family.pop();
console.log(family);//["엄마","아빠","할머니"]

# shift 메서드

pop과 push와 개념은 비슷하지만 반대로 작동한다.
pop과 push는 마지막 요소를 추가,제거 했지만,
shift는 첫번째 요소를 제거한다.

const family = ["엄마","아빠","할머니","할아버지"];

family.shift();
console.log(family);//["아빠","할머니","할아버지"]

# unshift 메서드

unshift는 첫번째 요소를 추가한다.

const family = ["엄마","아빠","할머니","할아버지"];

family.unshift();
console.log(family);//["나","엄마","아빠","할머니","할아버지"]

# splice 메서드

splice 단어 뜻에는 '이어붙이기','잘라내기'라는 뜻이 있다.

splice(수정을 시작할 위치 인덱스 값,삭제 할 요소의 개수,삽입 할 요소)

splice의 공식을 사용해보자.

const family = ["엄마", "아빠", "할머니", "할아버지"];

family.splice(2,2,"나","남동생");
console.log(family); //["엄마","아빠","나","남동생"]

# sort 메서드

sort는 배열 안의 요소를 정렬한다.

숫자열 정렬

const countUp = [20, 10, 4, 3, 6, 9, 1];

countUp.sort(function (a, b) {
  return a - b;
});

console.log(countUp); //[ 1 , 3 , 4 , 6 , 9 , 10 , 20 ]

비교함수는 배열 안의 인접한 요소를 비교하는 역할을 한다.
비교함수는 다음 규칙을 따라야 한다.

• f(a,b) < 0이면 a를 b보다 작은 인덱스로 정렬한다.
• f(a,b) == 0이면 a와 b의 순서를 바꾸지 않는다.
• f(a,b) > 0이면 b를 a보다 작은 인덱스로 정렬한다.

만약 비교함수를 안쓸경우엔 문자열로 변환한 후 사전순으로 정렬한다.

문자열 정렬

const family = ["할머니", "할아버지", "엄마", "아빠"];

family.sort();
console.log(family); //["아빠","엄마","할머니","할아버지"]

접근자 메서드

접근자 메서드는 배열을 다른 모습으로 가공한 새로운 배열을 반환하고
원래 배열은 수정하지 않는다.

• join 메서드
• concat 메서드
• slice 메서드
• indexOf와 lastIndexOf 메서드
• toString과 toLocaleString 메서드

# join 메서드

배열의 모든 요소 값을 문자열로 바꾼 후에 인수로 받은 문자로 연결해서 반환한다.

//문자열로 출력하기
const family = ["할머니", "할아버지", "엄마", "아빠"];

const result = family.join("");
console.log(result); //할머니 할아버지 엄마 아빠

//사이에 문자 넣어주기
const family = ["할머니", "할아버지", "엄마", "아빠"];

const result = family.join("&");
console.log(result); //할머니 & 할아버지 & 엄마 & 아빠

# concat 메서드

인수로 받은 값을 그 배열의 요소로 추가해서 새로운 배열을 생성한다.
쉽게 말해 배열을 붙여서 이어주는 거라고 생각하면 된다.

const family = ["할머니", "할아버지", "엄마", "아빠"];

const result = family.concat(["나", "남동생"]);
console.log(result);
// ["할머니","할아버지","엄마","아빠","나","남동생"]

//값을 여러개 추가할때
const family = ["할머니", "할아버지", "엄마", "아빠"];

const result = family.concat(["나", "남동생"],["여동생","오빠"]);
console.log(result);
// ["할머니","할아버지","엄마","아빠","나","남동생","여동생","오빠"]

# slice 메서드

배열의 일부 요소를 제거한 새로운 배열을 반환한다.
slice는 복사해서 붙여넣기라고 생각하면 된다.

slice(요소를 꺼낼 시작 위치 인덱스 값,요소를 꺼낼 마지막 위치 인덱스 바로 이전 값)

🖐주의🖐
두번째 인수값을 지정해줄땐 마지막 위치 인덱스 바로 이전 값이다!
쉽게 말해 배열의 길이 갯수로 따져야한다.

const family = ["할머니", "할아버지", "엄마", "아빠"];

const result = family.slice(2, 4);
console.log(result); //["엄마","아빠"]

# indexOf와 lastIndexOf

원본 배열에서 인수로 전달된 요소를 검색하여 인덱스를 반환한다.

• 중복되는 요소가 있는 경우, 첫번째 인덱스를 반환한다.
• 해당하는 요소가 없는 경우, -1을 반환한다.

indexof는 인덱스가 작은 쪽부터 순서대로 검색한다.
lastIndexOf는 인덱스가 큰 쪽부터 역순으로 검색한다.

indexof(검색할 값,검색을 시작할 인덱스 값)
lastIndexOf(검색할 값,검색을 시작할 인덱스 값)

const family = ["할머니", "할아버지", "할아버지", "엄마", "아빠"];

const result = family.indexOf("할아버지");
const result2 = family.lastIndexOf("할아버지");

console.log(result); // 1
console.log(result2); // 2

# toString과 toLocalString 메서드

배열의 요소를 문자열로 변환하여 쉼표로 연결한 문자열을 반환한다.
객체 프로토타입에 있는 같은 이름의 메서드를 다시 정의한 것이다.
toLocalString 메서드는 해당 지역에 맞는 언어로 번역한 문자열로 변환한다.

반복 메서드

배열의 모든 요소를 순회하며 특정한 작업을 수행하거나,
특정 조건을 만족하는 요소를 가져올 때, 사용하는 메서드이다.
반복 메서드의 사용법은 전형적인 함수형 프로그래밍의 형태를 띈다.

(현재 처리하고 있는 배열 요소의 값,현재 처리하고 있는 배열 요소의 인덱스 , 메서드가 적용되는 배열의 참조)

1. 반복 메서드의 인수로 전달한 함수는 배열의 요소마다 호출된다.
2. 반복 함수 대부분은 첫 번째 인수로 함수를 받으며, 이 함수에는 세 개의 인수가 전달된다.
3. reduce와 reduceRight를 제외한 나머지 반복 메서드에는 두 번째 인수를 지정할 수 있다.

• forEach 메서드
• map 메서드
• reduce 메서드

# forEach 메서드

인수로 받은 함수의 배열의 요소별로 한 번씩 실행한다.

const count = [2, 3, 4, 5, 6];

count.forEach(function (v, i, a) {
  a[i] = v * v;
});

console.log(count); // [4,9,16,25,36]

forEach 메서드를 사용하면 함수형 프로그래밍 기법을 사용할 때 for문 대신 사용할 수 있다.

# map 메서드

리액트를 할땐 for문 대신 map으로 사용한다고 하니 꼭꼭 숙지하도록 하자.
배열을 순회하며 각 요소에 대하여 인자로 주어진 콜백 함수의 반환값(결과값)으로
새로운 배열을 생성하여 반환한다.

배열을 순회하며 요소 값을 다른 값으로 맵핑하기 위한 함수이다.

두배 값 구하기

const count = [2, 3, 4, 5, 6];
const result = count.map(function (x) {
  return 2 * x;
});

console.log(count);

객체 배열요소의 특정 프로퍼티값을 꺼내서 배열로 만들기

const fruits = [
  { name: "딸기", count: 30 },
  { name: "사과", count: 12 },
  { name: "포도", count: 16 },
  { name: "수박", count: 6 }
];

const names = fruits.map((fruits) => fruits.name);
const counts = fruits.map((fruits) => fruits.count);
console.log(names); // ["딸기","사과","포도","수박"]
console.log(counts);// [30,12,16,6]

# reduce 메서드

배열을 순회하며 각 요소에 대하여 이전의 콜백함수 실행 반환값을 전달하여
콜백함수를 실행하고 그 결과를 반환한다.
reduce는 sort랑 살짝 비슷하지만 다른점이라면 초기값 설정이 가능하다.

reduce 메서드의 인수

• callback : 합성 곱을 하는 함수
• initial : callback이 처음 호출되었을 때의 첫 번째 인수prev의 값(생략가능)

callback 함수는 다음과 같은 인수를 받습니다.

• prev : 이전 요소를 처리한 함수의 반환값 또는 initaial 첫번째 요소의 값.
• value : 현재 처리하는 배열 요소의 값
• index : 현재 처리하는 배열 요소의 인덱스
• array : 메서드를 적용 중인 배열의 참조

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

/*
prev: 이전 콜백의 반환값
currentValue : 배열 요소의 값
currentIndex : 인덱스
array        : 메소드를 호출한 배열, 즉 this
*/
// 합산
const sum = arr.reduce(function (prev, currentValue, currentIndex, self) {
  console.log(prev + '+' + currentValue + '=' + (prev + currentValue));
  return prev + currentValue; // 결과는 다음 콜백의 첫번째 인자로 전달된다
});

console.log(sum); // 15: 1~5까지의 합
/*
1: 1+2=3
2: 3+3=6
3: 6+4=10
4: 10+5=15
15
*/

reduce부분은 너무 이해가 안되서 그냥 예제를 복붙해서 가져왔다.
reduce는 더 공부해서 수정해서 올려야겠다.
참고한 자료는 모던 자바스크립트