반응형
표준 내장 객체 - 배열(array)
.length
- 배열의 길이(숫자)를 나타내는 속성
const arr = [1, 2, 3];
console.log(arr.length); // 3
.at()
- 배열에서 특정 위치의 요소를 가져오는 메서드
- 인덱스는 0부터 시작
const arr = [1, 2, 3];
console.log(arr[0]); // 1
console.log(arr.at(0)); // 1
console.log(arr[arr.length - 1]); // 3
console.log(arr.at(-1)); // 3
.concat()
- 배열에 다른 배열이나 값을 추가하여 새 배열을 반환하는 메서드
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2];
console.log(arr1.concat(arr2)); // [1, 2, 3, 4, 5, 6]
console.log(arr3); // [1, 2, 3, 4, 5, 6]
.every()
- 배열의 모든 요소가 주어진 판별 함수를 통과하는지 테스트하는 메서드
const arr = [1, 2, 3];
console.log(arr.every((item) => item > 0)); // true
// arr.every((item) => {
// return item > 0;
// })
console.log(arr.every((item) => item > 1)); // false
.filter()
- 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환하는 메서드
- 콜백 함수의 반환 값이 true인 요소만 모아서 새로운 배열을 만듦
- 모든 요소가 통과하지 못하면 빈 배열을 반환
const arr = [1, 2, 3];
console.log(arr.filter((item) => item > 1)); // [2, 3]
console.log(arr.filter((item) => item < 0)); // []
- 이린이(7세 이하) 찾기
const users = [
{ name: '홍길동', age: 36 },
{ name: '고길동', age: 12 },
{ name: '둘리', age: 6 },
];
const children = users.filter((user) => user.age <= 7);
console.log(children); // [{ name: '둘리', age: 6 }]
.find()
- 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환하는 메서드
- 요소가 없으면 undefined를 반환
const arr = [1, 2, 3];
console.log(arr.find((item) => item > 1)); // 2
console.log(arr.find((item) => item < 0)); // undefined
- 고길동 찾기
const users = [
{ name: '홍길동', age: 36 },
{ name: '고길동', age: 12 },
{ name: '둘리', age: 6 },
];
const user = users.find((user) => user.name === '고길동');
console.log(user); // { name: '고길동', age: 12 }
.findIndex()
- 주어진 판별 함수를 만족하는 첫 번째 요소의 인덱스를 반환하는 메서드
- 요소가 없으면 -1을 반환
const arr = [1, 2, 3];
console.log(arr.findIndex((item) => item > 1)); // 1
console.log(arr.findIndex((item) => item < 0)); // -1
.flat()
- 모든 하위 배열 요소를 지정한 깊이까지 재귀적으로 이어붙인 새로운 배열을 생성하는 메서드
- 깊이를 지정하지 않으면 기본값 1
const arr = [1, [2, [3, [4]]]];
console.log(arr.flat()); // [1, 2, [3, [4]]]
console.log(arr.flat(1)); // [1, 2, [3, [4]]]
console.log(arr.flat(2)); // [1, 2, 3, [4]]
console.log(arr.flat(Infinity)); // [1, 2, 3, 4]
.forEach()
- 주어진 함수를 배열 요소 각각에 대해 실행하는 메서드
const arr = [1, 2, 3];
arr.forEach((item) => console.log(item)); // 1 2 3
.includes()
- 배열이 특정 요소를 포함하고 있는지 판별하는 메서드
const arr = [1, 2, 3];
console.log(arr.includes(1)); // true
console.log(arr.includes(0)); // false
.join()
- 배열의 모든 요소를 연결해 하나의 문자열로 만드는 메서드
const arr = [1, 2, 3];
console.log(arr.join(',')); // 1,2,3
console.log(arr.join(', ')); // 1, 2, 3
console.log(arr.join(' | ')); // 1 | 2 | 3
.map()
- 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환하는 메서드
const arr = [1, 2, 3];
const newArr = arr.map((item) => item * 2);
console.log(newArr); // [2, 4, 6]
console.log(arr); // [1, 2, 3]
- 사용자 출력하기
const users = [
{ name: '홍길동', age: 36 },
{ name: '고길동', age: 12 },
{ name: '둘리', age: 6 },
];
// user => {return { key: value }};
// user => ({ key: value });
const newUsers = users.map((user) => ({
...user, // 전개 연산자 ...user : name: '홍길동', age: 36
email: null,
}));
console.log(newUsers);
// [{ name: '홍길동', age: 36, email: null }, { name: '고길동', age: 12, email: null }, { name: '둘리', age: 6, email: null }]
.pop()
- 배열에서 마지막 요소를 제거하고 그 요소를 반환하는 메서드
const arr = [1, 2, 3];
console.log(arr.pop()); // 3
console.log(arr); // [1, 2]
.push()
- 배열의 끝에 하나 이상의 요소를 추가하고 배열의 새로운 길이를 반환하는 메서드
const arr = [1, 2, 3];
console.log(arr.push(4)); // 4
console.log(arr); // [1, 2, 3, 4]
console.log(arr.push(5, 6)); // 6
console.log(arr); // [1, 2, 3, 4, 5, 6]
.reduce()
- 배열의 각 요소에 대해 주어진 reduce(리듀서) 함수를 실행하고, 하나의 결과값을 반환하는 메서드
- 각 콜백의 반환 값을 다음 콜백의 인수 accumulator(누산기)에 전달
- reduce 함수는 네 개의 인수를 가짐
- 누산기(accumulator)
- 현재 값(currentValue)
- 현재 인덱스(currentIndex)
- 원본 배열(array)
const arr = [1, 2, 3];
console.log(arr.reduce((acc, cur) => acc + cur, 0)); // 6
// 1. acc = 0, cur = 1 => 1
// 2. acc = 1, cur = 2 => 3
// 3. acc = 3, cur = 3 => 6
console.log(arr.reduce((acc, cur) => acc + cur, 10)); // 16
// 1. acc = 10, cur = 1 => 11
// 2. acc = 11, cur = 2 => 13
// 3. acc = 13, cur = 3 => 16
- 평균 나이 구하기
const users = [
{ name: '홍길동', age: 36 },
{ name: '고길동', age: 12 },
{ name: '둘리', age: 6 },
];
const totalAge = users.reduce((acc, cur) => acc + cur.age, 0);
// 1. acc = 0, cur = { name: '홍길동', age: 36 } => 36
// 2. acc = 36, cur = { name: '고길동', age: 12 } => 48
// 3. acc = 48, cur = { name: '둘리', age: 6 } => 54
console.log(totalAge); // 54
const avgAge = (totalAge / users.length).toFixed();
// 54 / 3 = 18
console.log(avgAge); // 18
- 모든 이름 출력하기
const users = [
{ name: '홍길동', age: 36 },
{ name: '고길동', age: 12 },
{ name: '둘리', age: 6 },
];
const namesArr = users.reduce((acc, cur) => {
acc.push(cur.name);
return acc;
}, []);
console.log(namesArr); // ['홍길동', '고길동', '둘리']
const names = namesArr.join(', ');
console.log(names); // 홍길동, 고길동, 둘리
// 체이닝
const names2 = users
.reduce((acc, cur) => {
acc.push(cur.name);
return acc;
}, [])
.join(', ');
console.log(names2); // 홍길동, 고길동, 둘리
.reverse()
- 배열의 순서를 반전하는 메서드
const arr = [1, 2, 3];
console.log(arr.reverse()); // [3, 2, 1]
console.log(arr); // [3, 2, 1]
.shift()
- 배열에서 첫 번째 요소를 제거하고, 제거된 요소를 반환하는 메서드
const arr = [1, 2, 3];
console.log(arr.shift()); // 1
console.log(arr); // [2, 3]
.slice()
- 대상 배열의 일부를 추출해 새로운 배열을 반환하는 메서드
- 첫 번째 인수는 추출을 시작할 인덱스
- 두 번째 인수는 추출을 종료할 인덱스(포함하지 않음)
const arr = [1, 2, 3, 4, 5];
console.log(arr.slice(1)); // [2, 3, 4, 5]
console.log(arr.slice(1, 2)); // [2]
console.log(arr.slice(1, -1)); // [2, 3, 4]
console.log(arr); // [1, 2, 3, 4, 5]
.some()
- 배열의 요소 중에서 주어진 판별 함수를 만족하는 요소가 하나라도 있는지를 테스트하는 메서드
const arr = [1, 2, 3];
console.log(arr.some((item) => item > 1)); // true
console.log(arr.some((item) => item > 2)); // true
console.log(arr.some((item) => item < 0)); // false
.sort()
- 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환하는 메서드
- 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따름
- 정렬 순서를 정의하는 함수를 인수로 전달할 수 있음
const arr = [4, 7, 0, 10, 1, 2, 3];
console.log(arr.sort()); // [0, 1, 10, 2, 3, 4, 7]
console.log(arr); // [0, 1, 10, 2, 3, 4, 7]
console.log(arr.sort((a, b) => a - b)); // [1, 2, 3]
// 1. a = 4, b = 7 => -3
// 2. a = 7, b = 0 => 7
// 3. a = 0, b = 10 => -10
// 4. a = 10, b = 1 => 9
// 반환 값이 0보다 작은 경우 a를 우선하여 정렬
// 반환 값이 0보다 큰 경우 b를 우선하여 정렬
console.log(arr.sort((a, b) => b - a)); // [3, 2, 1]
// 1. a = 4, b = 7 => 3
// 2. a = 7, b = 0 => -7
// 3. a = 0, b = 10 => 10
// 4. a = 10, b = 1 => -9
// 반환 값이 0보다 작은 경우 b를 우선하여 정렬
// 반환 값이 0보다 큰 경우 a를 우선하여 정렬
.splice()
- 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경하는 메서드
- 첫 번째 인수는 변경을 시작할 인덱스
- 두 번째 인수는 제거할 요소 수
- 세 번째 인수부터는 배열에 추가될 요소
const arr = [1, 2, 3];
console.log(arr.splice(1, 2)); // [2, 3]
console.log(arr); // [1]
const arr2 = [1, 2, 3];
console.log(arr2.splice(1, 1)); // [2]
console.log(arr2); // [1, 3]
const arr3 = [1, 2, 3];
console.log(arr3.splice(1, 1, 4, 5)); // [2]
console.log(arr3); // [1, 4, 5, 3]
.unshift()
- 배열의 맨 앞에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환하는 메서드
const arr = [1, 2, 3];
console.log(arr.unshift(4)); // 4 (길이 반환)
console.log(arr); // [4, 1, 2, 3]
반응형
'Front > Javascript' 카테고리의 다른 글
모듈(Module) - javascript 기본 (0) | 2023.10.22 |
---|---|
표준 내장 객체 - 객체(object) - javascript 기본 (0) | 2023.10.22 |
표준 내장 객체 - 날짜(Date) - javascript 기본 (0) | 2023.10.22 |
표준 내장 객체 - 숫자(Number), 수학(Math) (0) | 2023.10.22 |
표준 내장 객체 - 문자열(string) - javascript 기본 (0) | 2023.10.22 |