JavaScript 배열 내장 객체

yj j·2023년 12월 4일
1

.length

배열의 길이(숫자)를 반환합니다.

const arr = [5, 3, 10, 2, 9];

console.log(arr.length); //5


.at()

배열을 인덱싱합니다. 대괄호 표기법과 유사합니다.
음수 값을 사용하면 뒤에서부터 인덱싱합니다.

const arr = [5, 3, 10, 2, 9];

console.log(arr.at(2));         //10

console.log(arr[arr.length-1])  //9
console.log(arr.at(-1));        //9

배열의 뒤쪽에 있는 값이 필요할 경우, arr.length를 사용하는 경우보다 코드가 간결해집니다.



.concat()

A.concat(B)는 A배열에 B배열을 병합해 새로운 배열을 반환합니다.
새로운 배열을 반환하기 때문에 기존의 A, B의 값에는 영향을 주지 않습니다.

const A = [1, 2, 3];
const B = [4, 5, 6];

const C = A.concat(B);

console.log(C);    //[ 1, 2, 3, 4, 5, 6 ]
console.log(A);    //[ 1, 2, 3 ]
console.log(B);    //[ 4, 5, 6 ]


.every()

대상 배열의 모든 요소가 참(true)을 반환하는지 확인합니다.
모든 요소를 검사한 후 하나라도 거짓이라면 false를 반환합니다.

const numbers = [1, 2, 3]

const result = numbers.every(item=>item<4);
const result2 = numbers.every(item=>item<3); 

console.log(result);    //true
console.log(result2);   //false


.filter()

주어진 콜백 테스트로 모든 요소를 검사한 후 true를 반환하는 모든 요소들을 새로운 배열로 반환합니다.
모든 요소가 통과하지 못하면 빈 배열을 반환합니다.

const numbers = [1, 2, 3]

let result = numbers.every(item=>item<3);
console.log(result);   //true

const nums = [ 1, 2, 3, 4, 5, 6, 7, 8 ];
//짝수인 요소만 반환
const filteredNums = nums.filter(num => num%2===0);

console.log(filteredNums);    //[ 2, 4, 6, 8 ]


.find(), findIndex()

find는 대상 배열에서 콜백 테스트를 통과하는 첫 번째 요소를 반환합니다.
findIndex는 대상 배열에서 콜백 테스트를 통과하는 첫 번째 요소의 인덱스를 반환합니다.

const arr = [5, 3, 10, 2, 9];

const findNum = arr.find(num => num>5);
const findNumIdx = arr.findIndex(num => num>5);

console.log(findNum);      //10
console.log(findNumIdx);   //2


.flat()

대상 배열의 모든 하위 배열을 지정한 깊이(Depth)까지 이어 붙인 새로운 배열을 생성합니다.
깊이의 기본값은 1입니다.
//깊이가 2인 배열

const arr = [5, 3, [10, 2, [9, 15]]]; 

const flatArr1 = arr.flat();
const flatArr2 = arr.flat(2);

console.log(flatArr1);    //[ 5, 3, 10, 2, [ 9, 15 ] ]
console.log(flatArr2);    //[ 5, 3, 10, 2, 9, 15 ]


.forEach()

대상 배열의 길이만큼 주어진 콜백을 실행합니다.

const arr = ['Banana', 'Apple', 'Cherry'];
arr.forEach(item => console.log(item));   //Banana Apple Cherry


.includes()

대상 배열에 특정한 요소를 포함하고 있는지 확인합니다.

const arr = ['Banana', 'Apple', 'Cherry'];
const result = arr.includes('Cherry');

console.log(result);   //true


.join()

대상 배열의 모든 요소를 특정한 구분자로 연결한 문자를 반환합니다.

const arr = ['Banana', 'Apple', 'Cherry'];

//arr.join(',')를 작성한 것과 같습니다
console.log(arr.join());     //Banana,Apple,Cherry

console.log(arr.join(' '));  //Banana Apple Cherry
console.log(arr.join('/'));  //Banana/Apple/Cherry


.map()

대상 배열의 길이만큼 주어진 콜백을 실행하고, 반환 값을 모아 새로운 배열을 반환합니다.

const arr = [1, 2, 3, 4, 5];
const arrResult = arr.map(item => item*2);

console.log(arrResult);    //[ 2, 4, 6, 8, 10 ]


.shift()

대상 배열에서 첫 번째 요소를 제거하고 그 요소를 반환합니다.
대상 배열의 원본이 첫 번째 요소가 없어진 것으로 변경됩니다.

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

const firstItem = arr.shift();

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


.pop()

대상 배열에서 마지막 요소를 제거하고 그 요소를 반환합니다.
대상 배열의 원본이 마지막 요소가 없어진 것으로 변경됩니다.

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

const lastItem = arr.pop();

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


.push()

대상 배열의 마지막에 하나 이상의 요소를 추가하고, 이 배열의 새로운 길이를 반환합니다.
대상 배열이 요소를 추가한 것으로 변경됩니다.

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

const arrLength = arr.push(10, 20);

console.log(arrLength);    //7
console.log(arr);          //[ 1, 2, 3, 4, 5, 10, 20 ]


.reduce()

대상 배열의 길이만큼 주어진 콜백을 실행하고, 마지막에 호출되는 콜백의 반환 값을 반환합니다.
각 콜백의 반환 값은 다음 콜백으로 전달됩니다.

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

const sum = arr.reduce((acc, cur) =>  acc + cur, 0); 

//0은 acc의 초기값, 
//현재 요소가 cur에 들어갑니다
//acc에 acc + cur의 결과가 반환됩니다


console.log(sum);    //15


.reverse()

대상 배열의 순서를 반전합니다
대상 배열의 원본이 반전한 것으로 변경됩니다.

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

const reversed = arr.reverse();

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


.slice()

대상 배열의 일부를 추출해 새로운 배열을 반환합니다.
첫번째 인수는 추출할 첫 요소의 인덱스입니다.
두 번째 인수 직전까지 추출하고, 두 번째 인수를 생략하면 대상 배열의 끝까지 추출합니다.
인수가 없다면 배열의 처음 값부터 마지막 값까지 전체가 복제됩니다.

const arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];

console.log(arr.slice(2, 5));   //[ 'C', 'D', 'E' ]
console.log(arr.slice(6));      //[ 'G', 'H' ]
console.log(arr.slice());       //['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H']


.some()

대상 배열의 요소가 하나라도 콜백 테스트를 통과하는지 확인합니다.

const arr = [1, 2, 3, 4, 5, 6, 7, 8];
const result = arr.some(item => item>7);

console.log(result);   //true


.sort()

대상 배열을 콜백의 반환 값(양수, 음수 0)에 따라 정렬합니다.
콜백을 제공하지 않으면 요소를 문자열로 변환하고 유니코드 코드 포인터 순서로 정렬합니다.
대상 배열의 원본이 변경됩니다.

const nums = [5, 10, 9, 25, 14, 1];

nums.sort((a,b) => a-b);
console.log(nums);       //[ 1, 5, 9, 10, 14, 25 ]

nums.sort((a,b) => b-a);
console.log(nums);       //[ 25, 14, 10, 9, 5, 1 ]


.splice()

대상 배열에 요소를 추가하거나 삭제하거나 교체합니다.
첫 번째 인수는 요소를 추가하거나 삭제하거나 교체하려고 하는 인덱스의 번호입니다.
두 번째 인수에는 삭제하고자 하는 아이템의 갯수입니다.
세 번째 인수에는 추가할 값이 들어갑니다.

대상 배열 원본이 변경됩니다.

const arr = ['A', 'B', 'C', 'D', 'E'];
arr.splice(1, 2, '사과');

console.log(arr);


.unshift()

새로운 요소를 대상 배열의 맨 앞에 추가하고 새로운 배열의 길이를 반환합니다.
대상 배열 원본이 변경됩니다.

const arr = ['A', 'B', 'C', 'D', 'E'];
console.log(arr.unshift('Z'));      //6
console.log(arr);                   //[ 'Z', 'A', 'B', 'C', 'D', 'E' ]


Array.from()

유사 배열(Array-like)을 실제 배열로 변환합니다.

각각의 속성이 숫자 0부터 하나씩 증가할 수 있는 구조여야 합니다.
length 속성을 통해 실제 아이템의 개수에 해당하는 숫자가 입력되어 있어야 합니다.

const arraylike = {
  0: 'A',
  1: 'B',
  2: 'C',
  length: 3
}

Array.from(arraylike).forEach(item => console.log(item));  //A B C

indexOf()

특정한 값을 가지는 요소의 첫 번째 인덱스를 반환합니다. 해당하는 원소가 없는 경우 -1를 반환합니다.

const arr = [5, 10, 4, 9, 12, 42];
console.log(arr.indexOf(4));      //2
console.log(arr.indexOf(99));     //-1
profile
꿈꾸는 사람

0개의 댓글

관련 채용 정보