JavaScript에서 Array 다루기
JavaScript에서 Array 다루기
React State의 Immutability 유지 등을 위하여 JS에서의 Array Method를 다시 정리 및 숙달 함
method로 인해 array 구성 elements에 변화와 method의 return 값은 다름을 항상 주의
pop
배열 끝을 삭제
let arr = [1, 2, 3, 4];
arr.pop(); // return value is 4
console.log(arr); // [1, 2, 3]
push
배열 끝에 삽입
let arr = [1, 2, 3, 4];
arr.push(5); // return value is length of arr after pushed
console.log(arr); // [1, 2, 3, 4, 5]
shift
배열 앞을 삭제
let arr = [1, 2, 3, 4];
arr.shift(); // 1 (if empty, return undefined)
console.log(arr); // [2, 3, 4]
unshift
배열 앞에 삽입
let arr = [1, 2, 3, 4];
arr.unshift(0); // return value is length of arr after unshifted
console.log(arr); // [0, 1, 2, 3, 4]
splice
배열의 특정 위치에 삽입 및 삭제
array.splice(start[, deleteCount[, item1[, item2[, …]]]]) splice(시작 Index, 제거할 요소 개수, 삽입할 요소)
💡 반환 값은 제거된 요소로 이루어진 배열임
let arr = [1, 2, 3, 4, 5, 6, 7];
arr.splice(3, 2);
console.log(arr); // [1, 2, 3, 6, 7]
let arr2 = [1, 2, 3, 4, 5, 6, 7];
arr2.splice(2, 1, "a", "b");
console.log(arr2); // [1, 2, "a", "b", 4, 5, 6, 7]
slice (startIndex, endIndex)
배열의 shallow copy를 새로운 배열로 반환
slice(시작 Index, 끝 Index)
let arr = [1, 2, 3, 4, 5, 6, 7];
let shallowArr = arr.slice(3, 6);
console.log(shallowArr); // [4, 5, 6]
concat
배열을 합쳐 반환
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = arr2.conact(arr1);
console.log(arr3); // [1, 2, 3, 4 , 5, 6]
every
배열의 모든 요소가 함수를 충족하는지 테스트
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let isEven = (value) => {
return value % 2 === 0; // value가 2의 배수이면 true 반환
};
console.log(arr.every(isEven)); // false, 모든 요소가 true인 경우에만 true 반환
some
함수의 결과가 true 일 때까지 배열의 각 원소를 순회
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let isEven = (value) => {
return value % 2 === 0; // value가 2의 배수이면 true 반환
};
console.log(arr.some(isEven)); // true, 하나라도 true인 경우 true 반환
forEach
배열의 각 원소 별로 함수 실행
let arr = [1, 2, 3];
arr.forEach((element) => {
console.log(element); // 1\n 2\n 3\n
});
map
배열의 각 원소별로 지정된 함수를 실행한 결과로 구성된 배열 반환
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let isEven = function (value) {
return value % 2 === 0;
};
let newArr = arr.map(isEven);
console.log(newArr); // [false, true, false, true, false, true, false, true, false, true]
filter
지정된 함수의 결과 값을 true로 만드는 원소들로만 구성된 배열 반환
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let isEven = function (value) {
return value % 2 === 0;
};
let newArr = arr.filter(isEven);
console.log(newArr); // [2, 4, 6, 8, 10]
reduce
누산기(accumulator) 및 배열의 각 값에 대해 누산된 값으로 줄도록 함수 적용
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let value = arr.reduce(function (previousValue, currentValue, index) {
return previousValue + currentValue;
});
console.log(value); // 55;
reverse
배열의 원소 순서를 뒤집음
let arr = [1, 2, 3, 4];
arr.reverse();
console.log(arr); // [4, 3, 2, 1]
sort
배열을 알파벳순 또는 지정된 함수에 의한 순서로 정렬, 모든 원소를 문자 취급하여 정렬
let arr = [13, 12, 11, 10, 5, 3, 2, 1];
arr.sort();
console.log(arr); // [1, 10, 11, 12, 13, 2, 3, 5]
let arr2 = [13, 12, 11, 10, 5, 3, 2, 1]; // ?
arr2.sort((a, b) => {
return a - b;
});
console.log(arr2); // [1, 2, 3, 5, 10, 11, 12, 13]
toString
배열을 문자열로 반환
let arr = [1, 2, 3, 4];
console.log(arr.toString()); // '1,2,3,4'
valueOf
배열의 원시 데이터형 반환
let arr = [1, 2, 3, 4];
console.log(arr.valueOf()); //
join
배열 원소 전부를 하나의 문자열로 표현
let arr = [1, 2, 3, 4, 5];
console.log(arr.join()); // 1,2,3,4
console.log(arr.join("-")); // 1-2-3-4
