배열 메소드 (array methods)

변경 메서드 (원본 파괴)

• arr.push()
• arr.pop()
• arr.unshift()
• arr.shift()
• arr.reverse()
• arr.sort()
• arr.splice()

---

접근 메서드 (원본 보존)

• arr.concat()
• arr.indexOf()
• arr.lastIndexOf()
• arr.join()
• arr.slice()
• arr.toString()

---

반복 메서드 (원본 보존)

• arr.forEach(콜백함수)
• arr.map(콜백함수)
• arr.filter(콜백함수)
• arr.every(콜백함수)
• arr.some(콜백함수)
• arr.reduce(콜백함수)

---

[ ], new Array( ), Array.of( )

배열 객체 생성

[] 또는 new Array()
[] 사용을 권장

let arr = [];
let arr2 = new Array();
let arr3 = Array.of(10, 20, 30); // [10, 20, 30]

---

Array.from( )

// 유사 배열의 데이터가 arr에 들어가고 arr은 진짜 배열이다
const arr = Array.from(유사 배열);

// spread operator를 사용해도 유사 배열을 배열로 변경 가능
const arr = [...유사 배열];

Array.from(arrayLike, mapFn?, thisArg?)

arrayLike: 유사 배열
mapFn: map 함수 (필수아님)
thisArg: (필수아님)

---

arr.length = 0;

배열 객체 요소 모두 제거

arr.length = 0;

let arr = [1, 2, 3, 4, 5];
arr.length = 0;
console.log('arr: ', arr); // []

---

splice

특정 요소 지움

arr.splice(n, m); // n:시작, m:개수

let arr = [1, 2, 3, 4, 5];
let arr2 = arr.splice(1, 2);
console.log('arr: ', arr); // [1, 4, 5]
console.log('arr2: ', arr2);  // [2, 3]

특정 요소 지우고 추가

arr.splice(n, m, x); // n:시작, m:개수, x:추가할 값(여러 개 가능)

let arr = [1, 2, 3, 4, 5];
let arr2 = arr.splice(1, 2, 100, 200);
console.log('arr: ', arr); // [1, 100, 200, 4, 5]
console.log('arr2: ', arr2);  // [2, 3]

---

slice

인덱싱

arr.slice(n, m); // n~m까지 배열로 반환 (m전까지 반환)

let arr = [1, 2, 3, 4, 5];
let arr2 = arr.slice(1, 4);
console.log('arr: ', arr); // [1, 2, 3, 4, 5]
console.log('arr2: ', arr2);  // [2, 3, 4]

---

concat

합쳐서 새 배열로 반환

arr.concat(arr, arr2, ...);

let arr = [1, 2, 3];
let arr2 = [10, 20, 30];
let arr3 = arr.concat(arr2);
console.log('arr: ', arr); // [1, 2, 3]
console.log('arr2: ', arr2);  // [10, 20, 30]
console.log('arr3: ', arr3);  // [1, 2, 3, 10, 20, 30]

---

indexOf

찾는 값에 인덱스 반환 (없다면 -1을 반환)

arr.indexOf(x); // x: 찾는 값

let arr = [1, 2, 3, 4, 5, 1, 2, 3];
let idx = arr.indexOf(2);
let idx2 = arr.indexOf(2, 4);	// 두 번째 인자는 시작 index
console.log(idx); // 1
console.log(idx2);   // 6

---

includes

포함되었는지 확인 (있으면 true, 없으면 false)

arr.includes( );

let arr = [1, 2, 3];
arr.includes(2)	// true
arr.includes(5)	// false

시작 지점을 지정할 수 있음

const letters = ['a', 'b', 'c', 'd', 'e'];
const includesC = letters.includes('c', 2); // true
const includesA = letters.includes('a', 2); // false

---

find

첫 번째 true값만 반환하고 끝 (만약 없으면 undefined를 반환)

arr.find(콜백함수);

const arr = [10, 20, 30, 40, 50];

console.log(arr.find((item) => item > 30)); // 40
console.log(arr.find((item) => item > 100)); // undefined

---

findIndex

첫 번째 true값의 인덱스를 반환하고 끝 (만약 없으면 -1 반환)

arr.findIndex(콜백함수);

const arr = [10, 20, 30, 40, 50];

console.log(arr.findIndex((item) => item > 30)); // 3
console.log(arr.findIndex((item) => item > 100)); // -1

---

filter

만족하는 모든 요소를 배열로 반환 (모든 true값 반환)

arr.filter(콜백함수);

---

map

함수를 받아 특정 기능을 실행하고 새로운 배열을 반환

arr.map(콜백함수);

---

join

( )안에 입력한 것을 기준으로 합쳐서 문자열로 반환 (기본값은 ,)

arr.join( );

---

split

( )안에 입력한 것을 기준으로 분리하여 배열로 반환

arr.split( );

---

sort

• 배열 재정렬
• 원본 자체가 변경

let arr = [3, 1, 5, 2, 4];
arr.sort();
console.log(arr); // [1, 2, 3, 4, 5];

let arr = [31, 7, 29, 12];
arr.sort();
console.log(arr);	// [12, 29, 31, 7]

두 번째 예제에서 정렬이 이상한 이유
: sort는 배열값을 문자로 인식해서 정렬하기 때문
그래서 인수를 함수로 받아서 실행해야 한다.

let arr = [31, 7, 29, 12];
arr.sort((x, y)=>{
    return x - y;
});
console.log(arr);	// [7, 12, 29, 31]

문자 정렬

• a > b 비교 값이 1이면, a가 먼저 배치
• a > b 비교 값이 -1이면, b가 먼저 배치
• a > b 비교 값이 0이면, a, b의 배치에 변화가 없음

const newjeans = ["김민지", "팜하니", "다니엘", "강해린", "이혜인"];

// [ '김민지', '팜하니', '다니엘', '강해린', '이혜인' ]
console.log(newjeans);

// [ '강해린', '김민지', '다니엘', '이혜인', '팜하니' ]
console.log(newjeans.sort()); // ㄱ-ㅎ 순으로 정렬

// [ '강해린', '김민지', '다니엘', '이혜인', '팜하니' ]
console.log(newjeans.sort((x, y) => (x > y ? 1 : x < y ? -1 : 0))); // ㄱ-ㅎ 순으로 정렬

//[ '팜하니', '이혜인', '다니엘', '김민지', '강해린' ]
console.log(newjeans.sort((x, y) => (x > y ? -1 : x < y ? 1 : 0))); // ㅎ-ㄱ 순으로 정렬

---

reduce

• 인수로 함수를 받음

arr.reduce(function(누적 계산값, 현재값){
   retunr 누적 계산값 += 현재값;
}, 초기값)	// 초기값은 옵션임

let info = [
   { name: 'kim', age: 23 },
   { name: 'lee', age: 52 },
   { name: 'park', age: 16 },
   { name: 'song', age: 37 },
   { name: 'chon', age: 29 },
   { name: 'yoon', age: 4 },
];

let newInfo = info.reduce((prev, cur) => {
   if (cur.age < 19) {
      prev.push(cur.name);
   }
   return prev;
}, [])

console.log(newInfo);   // ['park', 'yoon']

---

js에서 배열은 객체에 속하므로 typeof를 사용하면 객체라고 나온다. 그래서 Array.isArray(배열)를 사용해서 구분한다.

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

Array.isArray(arr); // true

true / false를 반환