array
- array생성은 변수 = []말고 Array(텍스트,텍스트로)로 가능
array.forEach()
주어진 함수를 배열 요소 각각에 대해 실행한다.
undefined을 반환하여 메소드 체인의 중간에 사용할 수 없다. 단순히 반복문을 대체하기 위한 함수라고 생각하면 된다.
const arr1 = ['a', 'b', 'c'];
arr1.forEach(element => console.log(element)); // "a"// "b"// "c"
for문을 forEach()로 바꿔보기
// for문const items = ['item1', 'item2', 'item3'];
const copy = [];
for (let i=0; i<items.length; i++) {
copy.push(items[i]);
}
// forEach()const items = ['item1', 'item2', 'item3'];
const copy = [];
items.forEach(function(item){
copy.push(item);
});
array.map()
배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.
const arr = [1, 4, 9, 16];
const map = arr.map(x => x * 2);// 요소에 2를 곱한 값을 반환
console.log(map);//[2, 8, 18, 32]
forEach()와 map()의 차이점
메소드만 다르게 똑같은 형태로 코드를 작성해도 반환값이 다르기 때문에 다른 결과가 나온다.
forEach는 undefined를 반환하고 map은 새로운 배열을 반환한다.
const arr = [1, 4, 9, 16];
const map = arr.map(item => item * 2);
console.log(map);//[2, 8, 18, 32]
const forEach = arr.forEach((item) => item * 2);
console.log(forEach);// undefined
Array.from()
유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해 새로운 Array 객체를 만든다.
새로운 Array 인스턴스를 반환한다.
// String에서 배열 만들기
Array.from('foo');
// ["f", "o", "o"]
// Set에서 배열 만들기
const s = new Set(['foo', window]);
Array.from(s);
// ["foo", window]
// Map에서 배열 만들기
const m = new Map([[1, 2], [2, 4], [4, 8]]);
// *Map 객체 : 키-값 쌍의 모음Array.from(m)// [[1, 2], [2, 4], [4, 8]]
// Array.from과 화살표 함수 사용하기
1Array.from({length: 5}, (value, index) => index);
// [0, 1, 2, 3, 4]//
2Array.from(Array(5), (_, index) => index);
// [0, 1, 2, 3, 4]
1과 2는 같은 내용이다.
1. 배열은 사실 length 라는 속성을 가진 object이므로 반대로 object에 length속성을 넣어주게 되면 유사 배열로 인식되기 때문에 {length: 5}가 length가 5인 배열로 인식하여 작동한다. 하지만 length속성을 추가한 object가 배열과 같다는 이야기는 아니다. Array에는 배열로 동작하기위한 다른 메소드들이 담겨 있기 때문이다.
2. 불필요한 인자의 공간을 채우기 위한 용도로 맵핑 함수의 첫 번째 인자로 언더스코어(_) 를 사용할 수 있다.
array.filter()
주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다.
어떤 요소도 테스트를 통과하지 못했으면 빈 배열을 반환한다.
// 6글자 이상인 요소만 남기기
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
console.log(result);
// ["exuberant", "destruction", "present"]
// 값이 10이하인 요소 제거하기
function isBigEnough(value) {
return value >= 10;
}
let filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered는 [12, 130, 44]
array.find()
주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환한다.
그런 요소가 없다면 undefined를 반환한다.
원하는 데이터가 있는지 확인할 때 => 요소가 있다면 바로 배열을 빠져나오기 때문에 filter보다 빠르다.
// 10보다 큰 값이 있는지 확인하기
const arr = [5, 12, 8, 130, 44];
const found = arr.find(element => element > 10);
console.log(found); // 12
// 객체로 이루어진 배열에서 name의 값이 'cherries'가 있는지 확인하기
const inventory = [
{name: 'apples', quantity: 2},
{name: 'bananas', quantity: 0},
{name: 'cherries', quantity: 5}
];
const result = inventory.find(fruit => fruit.name === 'cherries');
console.log(result)// { name: 'cherries', quantity: 5 }
array.every()
배열 안의 모든 요소가 주어진 판별 함수를 통과하는지 테스트한다. (&&같은 개념이라고 생각하면 될 것 같다.)
Boolean 값을 반환하고 빈 배열에 호출하면 무조건 true를 반환한다.
// 모든 요소가 10보다 크거나 같은지 확인하기
function isBigEnough(element) {
return element >= 10;
}
[12, 5, 8, 130, 44].every(isBigEnough);// false
[12, 54, 18, 130, 44].every(isBigEnough);// true
const user = [{name: '짱구', age: 10}, {name: '철수', age: 10}, {name: '흰둥이', age: 2}]
// 모든 유저의 나이가 5살보다 큰지 확인하기
console.log(user.every((item)=> item.age>5));// false
// 모든 유저의 나이가 1살보다 큰지 확인하기
console.log(user.every((item)=> item.age>1));// true
array.some()
배열 안의 어떤 요소라도 주어진 판별 함수를 통과하는지 테스트한다.
어떤 배열 요소라도 대해 참인(truthy) 값을 반환하는 경우 true, 그 외엔 false를 반환한다. 빈 배열에서 호출하면 무조건 false를 반환한다. (||같은 개념이라고 생각하면 될 것 같다.)
// 10보다 크거나 같은 요소가 있는지 확인하기
function isBiggerThan10(element) {
return element >= 10;
}
[2, 5, 8, 1, 4].some(isBiggerThan10);// false
[12, 5, 8, 1, 4].some(isBiggerThan10);// true
const user = [{name: '짱구', age: 10}, {name: '철수', age: 10}, {name: '흰둥이', age: 2}]
// 5살보다 나이가 많은 유저가 있는지 확인하기
console.log(user.some((item)=> item.age>5));// true
// 1살보다 나이가 많은 유저가 있는지 확인하기
console.log(user.some((item)=> item.age>1));// true
// checkAvailability함수의 2번째 인자로 넣은 과일이 fruits에 있는지 확인하기
let fruits = ['apple', 'banana', 'mango', 'guava'];
function checkAvailability(arr, val) {
return arr.some(arrVal => val === arrVal);
}
checkAvailability(fruits, 'grape');//false
checkAvailability(fruits, 'banana');//true
array.sort()
배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환한다. 복사본이 만들어지는 것이 아닌 원본 배열이 정렬된다.
정렬 속도와 복잡도는 각 구현방식에 따라 다를 수 있다. 기본적으로 오름차순으로 정렬되며 배열 요소를 문자열로 캐스팅하고 변환된 문자열을 비교하여 순서를 결정한다. undefined는 문자열로 변환되지 않아 맨 끝으로 정렬 된다.
arr.sort([compareFunction])
// compareFunction: 정렬 순서를 정의하는 함수,
// 생략하면 배열은 각 요소의 문자열 변환에 따라 각 문자의 유니 코드 코드 포인트 값에 따라 정렬
sort()를 사용하면 오름차순으로 정렬되는데 숫자의 경우 크기가 아니라 한자리씩 비교되어 100000이 21보다 앞에 오게 된다. (사전을 검색하는 방식처럼 정렬된다고 생각하면 될 것 같다.)
const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);// ["Dec", "Feb", "Jan", "March"]
const nums = [1, 30, 4, 21, 100000];
nums.sort();
console.log(nums);// [1, 100000, 21, 30, 4]
// compare 함수의 형식
function compare(a, b) {
if (a > b) {
return -1;// b가 앞에 옴
}
if (a < b) {
return 1;// a가 앞에 옴 // a === breturn 0;// 정렬 유지
}
}
숫자 정렬
// 오름차순 정렬
let numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
return a - b;
});
console.log(numbers);// [1, 2, 3, 4, 5]
// 내림차순 정렬
let numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
return b - a;
});
console.log(numbers);// [5, 4, 3, 2, 1]
문자 정렬
// 오름차순 정렬
let string = ["BA", "BB","AA", "AB", "CB", "CA"];
string.sort();
console.log(string);// ["AA","AB","BA","BB","CA","CB"]
// 내림차순 정렬 - 문자열은 숫자 정렬처럼 하면 정상적으로 정렬이 되지않아 비교 연산자를 사용해야함
string.sort(function compare(a, b) {
return a == b ? 0 : a > b ? -1 : 1;
array.reverse()
배열의 순서를 반전하며 원본 배열을 변형한다.
const a = [1, 2, 3];
console.log(a);// [1, 2, 3]
a.reverse();
console.log(a);// [3, 2, 1]
array.slice()
어떤 배열의 begin부터 end까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환한다. 원본 배열은 바뀌지 않는다.
arr.slice([begin[, end]])
// begin: 반환할 배열의 시작인덱스
// end: end인덱스 앞까지, end가 생략되면 배열의 끝까지 추출
const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
console.log(animals.slice()); // ["ant", "bison", "camel", "duck", "elephant"]
// 비워두면 전체를 반환
console.log(animals.slice(2));// ["camel", "duck", "elephant"]
// 2번인덱스부터 끝까지console.log(animals.slice(-2));// ["duck", "elephant"]
// 음수: 뒤에서 부터 => 뒤부터 요소 2개만
console.log(animals.slice(100));
// []// 배열의 길이와 같거나 큰 수 => 빈 배열
console.log(animals.slice(2, 4));// ["camel", "duck"]
// 2번 인덱스부터 4번 인덱스 앞(3번 인덱스)까지
console.log(animals.slice(1, 5));// ["bison", "camel", "duck", "elephant"]
// 1번 인덱스부터 5번 인덱스 앞(4번 인덱스)까지
console.log(animals.slice(2, -1));// ["camel", "duck"]
// 2번 인덱스부터 뒤에서 1개 요소를 빼고 까지
console.log(animals.slice(2, 100));// ['camel', 'duck', 'elephant']
// 배열의 길이와 같거나 큰 수 => 배열 끝까지
array.splice()
배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다. 원본 배열이 변경되고 제거한 요소를 담은 배열을 반환한다.
array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
// start: 배열의 변경을 시작할 인덱스
// deleteCount: 배열에서 제거할 요소의 수(생략하거나 배열길이보다 길면 start부터 모두 제거, 0이나 음수면 아무것도 제거하지 않지만 추가할 요소를 지정해야함)
// item: 배열에 추가할 요소, 지정하지 않으면 요소를 제거만 함
const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// 1번 인덱스에 아무것도 지우지 않고 'Feb'를 추가함
console.log(months);// ["Jan", "Feb", "March", "April", "June"]
// 원본 배열을 변경하기 때문에 months는 ["Jan", "Feb", "March", "April", "June"]가 됨
months.splice(4, 1, 'May');
// 4번 인덱스부터 1개를 지우고 'May'를 추가함
console.log(months);// ["Jan", "Feb", "March", "April", "May"]
start가 음수인 경우 배열의 끝에서부터 요소를 세어나간다.
즉 -n이면 요소 끝의 n번째 요소를 가리키며 array.length - n번째 인덱스와 같다.
(예제의 -2는 myFist배열의 끝의 2번째 요소인 'mandarin'을 가리키며 4 - 2 = > 2번째 인덱스와 같다.)
let myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
let removed = myFish.splice(-2, 1);// (2, 1)과 동일
// splice를 한 원본 배열은 제거하고 남은 것들을 반환
console.log(myFish)// myFish = ["angel", "clown", "sturgeon"]
// 원본 배열을 splice한 건 제거한 것들을 반환
console.log(removed)// removed = ['mandarin']
slice()와 splice()의 차이점
slice()는 원본 배열을 변경하지 않으며 새로운 배열을 반환한다.
const color = ['red', 'black', 'white','pink','blue'];
let slice = color.slice(1, 2);
console.log(color)// ['red', 'black', 'white', 'pink', 'blue']
color.slice(1, 2); console.log(color);// ['red', 'black', 'white', 'pink', 'blue']
console.log(slice);// ['black']
splice()는 원본 배열을 변경하며 제거한 요소의 배열을 반환한다.
const color = ['red', 'black', 'white','pink','blue'];
let splice = color.splice(1, 2);
console.log(color);// ['red', 'pink', 'blue']
color.splice(1, 2);
console.log(color);// ['red']
console.log(splice);// ['black', 'white']