배열과 메서드

JavaScript치트 시트배열

2023년 9월 26일

JavaScript 치트 시트

JavaScript의 배열을 다루는 방법과 자주 사용하는 메서드에 대해 간단히 알아본다.

길이

array.length로 배열의 길이를 얻을 수 있다.

array.length = 0으로 배열을 비울 수도 가능하다.

병합

전개 구문을 활용한다.

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];

const mergedArray = [...array1, ...array2];

또는 array.concat()을 사용할 수 있다.

for문

예시:

const array = ['사과', '오렌지', '배'];

for (let i = 0; i < array.length; i++) {
  console.log(array[i]);
}
// '사과'
// '오렌지'
// '배'

색인(i)이 필요한 상황이 아니라면 아래의 forEach 메서드를 사용한다.

메서드

자주 사용되는 배열 메서드는 다음과 같다.

`forEach`

각 요소에 대해 콜백 함수를 실행한다.

구문:

array.forEach(callback(value[, index, array]))

예시:

const array = ['a', 'b', 'c'];

array.forEach((element) => console.log(element));
// a
// b
// c

`map`

콜백 함수의 실행 결과로 이루어진 새로운 배열을 만든다.

구문:

array.map(callback(value[, index, array]))

예시:

const array = [1, 4, 9, 16];

const map = array.map((x) => x * 2);
console.log(map); // [2, 8, 18, 32]

`reduce`

반환값이 다음 요소에 전달된다.

구문:

array.reduce(callback(accumulator, value[, index, array])[, initialValue])

initialValue는 선택 사항이지만 항상 명시하는 것이 좋다.

예시:

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

const result = array.reduce((sum, current) => sum + current, 0);
console.log(result); // 15

`includes`

특정 요소가 포함되어 있는지 판별한다. 판별에서 일치 연산자(===)를 사용한다.

구문:

array.includes(valueToFind[, fromIndex])

예시:

const pets = ['cat', 'dog', 'bat'];

console.log(pets.includes('cat')); // true
console.log(pets.includes('at')); // false

`filter`

조건에 해당하는 요소로 이루어진 배열을 만든다.

구문:

array.filter(callback(value[, index, array]))

예시:

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter((word) => word.length > 6);
console.log(result); // ['exuberant', 'destruction', 'present']

`sort`

주의

이 메서드는 원본 배열이 보존되지 않는다.

요소를 정렬한다. 정렬 함수를 지정하지 않으면 문자의 유니코드 값에 따라 정렬된다.

구문:

array.sort([compare(a, b)])

비교 함수에서 오름차순으로 정렬하려면 a가 b보다 클 때 양수를 반환하면 된다.

예시:

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

array.sort((a, b) => a - b);
console.log(array);  // [1, 2, 3, 4, 5]

`some`

조건에 해당하는 요소가 하나라도 있는지 확인한다. 해당 요소를 발견하면 즉시 true를 반환한다.

구문:

array.some(callback(value[, index[, array]]))

예시:

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

const result = array.some((element) => element % 2 === 0);
console.log(result); // true

`every`

모든 요소가 조건에 해당하는지 확인합니다. 조건에 해당되지 않는 요소를 발견하면 즉시 false를 반환한다.

구문:

array.every(callback(value[, index[, array]]))

예시:

const array = [1, 30, 39, 29, 10, 13];

const result = array.every((value) => value < 40);
console.log(result); // true

기타 메서드는 MDN을 참고한다.

참고 문헌