arr.isArray()
isArray() 메서드는 인자가 배열인지 판별합니다.
type of로 배열을 검사하면 object를 리턴하기 때문에 배열인지를 확인하려면 isArray 사용
인자가 배열이면 true, 아니라면 false.
Array.isArray([1, 2, 3]); // true
Array.isArray({ foo: 123 }); // false
Array.isArray("foobar"); // false
Array.isArray(undefined); // false
arr.forEach()
forEach() 메서드는 각 배열 요소에 대해 제공된 함수를 한 번씩 실행합니다. 값을 반환하지 않습니다.
forEach(callbackFn)
const array1 = ['a', 'b', 'c'];
array1.forEach((element) => console.log(element));
> "a"
> "b"
> "c"
arr.reduce()
reduce() 메서드는 배열의 각 요소를 순회하면서 누적된 값을 계산하고
하나로 줄이는(reduce) 작업을 수행하여 최종 결과를 반환합니다.
reduce(callbackFn[, initialValue])
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
/* accumulator : 콜백 함수의 반환 값 또는 이전 순회에서의 최종 결과값
초기 값(initialValue)이 제공된 경우 initialValue로 설정
초기 값(initialValue)이 제공되지 않은 경우 배열의 첫 번째 요소를 사용합니다. */
/* currentValue : 현재 순회 중인 배열의 요소
초기 값(initialValue)이 제공된 경우 index[0]부터 시작
초기 값(initialValue)이 제공되지 않은 경우 index[1]부터 시작 */
0 1
1 2
3 3
6 4
10 5
console.log(sum); // 출력 결과: 15
arr.pop()
pop() 메서드는 배열에서 마지막 요소를 제거하고, 제거된 요소를 반환합니다.
const arr = [ 1, 2, 3, 4 ];
console.log(arr.pop()); // [ 4 ]
console.log( arr ); // [ 1, 2, 3 ]
arr.push()
push() 메서드는 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환합니다.
const arr = [ 1, 2, 3, 4 ];
arr.push( 5 ); // [ 5 ]
console.log( arr ); // [ 1, 2, 3, 4, 5 ]
arr.push( 6, 7 ); // [ 7 ]
console.log( arr ); // [ 1, 2, 3, 4, 5, 6, 7 ]
arr.shift()
shift() 메서드는 배열에서 첫 번째 요소를 제거하고, 제거된 요소를 반환합니다.
const arr = [ 1, 2, 3, 4 ];
console.log(arr.shift()); // [ 1 ]
console.log( arr ); // [ 2, 3, 4 ]
arr.unshift()
unshift() 메서드는 배열의 앞에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환합니다.
const arr = [ 1, 2, 3, 4 ];
arr.unshift( 5 ); // [ 5 ]
console.log( arr ); // [ 5, 1, 2, 3, 4 ]
arr.unshift( 6, 7 ); // [ 7 ]
console.log( arr ); // [ 5, 6, 7, 1, 2, 3, 4 ]
arr.splice()
splice() 메서드는 배열의 특정위치에 요소를 추가 or 교체 or 삭제 합니다. 원본 배열이 변경됩니다.
splice( begin index, 제거할 요소 개수, 배열에 추가될 요소 )
/* 추가 */
const lifeWater = [ "pepsi", "lime", "flavor" ];
lifeWater.splice( 1, 0, "zero", "sugar" ); // 요소를 추가하려면 두번째 인자값 0
console.log( lifeWater ); // [ "pepsi", "zero", "sugar", "lime", "flavor" ]
/* 교체 */
lifeWater.splice( 3, 1, "mango" );
console.log( lifeWater ); // [ "pepsi", "zero", "sugar", "mango", "flavor" ]
/* 삭제 */
lifeWater.splice( 2, 3 );
console.log( lifeWater ); // [ "pepsi", "zero" ]
arr.slice()
slice() 메서드는 어떤 배열의 begin 부터 end 까지(end 미포함)에 대한 복사본을
새로운 배열 객체로 반환합니다. 원본 배열은 바뀌지 않습니다.
slice( begin index, end index )
'FE > HTML_CSS_JavaScript' 카테고리의 다른 글
SEO(검색 엔진 최적화)에 대해서 (1) | 2024.01.03 |
---|---|
Array 관련 메소드 (2) (0) | 2024.01.01 |
Sass vs Tailwind CSS (0) | 2023.11.30 |
HTML 2 (1) | 2023.10.30 |
HTML 1 (0) | 2023.10.27 |