JavaScript에서 배열의 첫 번째 요소 가져오기

JavaScript 배열은 인덱스가 0부터 시작하므로 array[0]으로 배열을 변경하지 않고 첫 요소를 읽을 수 있습니다. 조건에 맞는 첫 요소가 필요하면 find()를 사용하고, 첫 요소를 제거하려는 경우에만 shift()를 사용하세요.

JavaScript에서 array[0]으로 배열의 첫 요소 가져오기

배열의 첫 번째 위치의 인덱스는 0이고 두 번째 위치는 1입니다. 다음 예제는 첫 항목을 읽은 뒤 배열을 출력하므로 원본 배열이 바뀌지 않았음을 확인할 수 있습니다.

const fruits = ["apple", "banana", "cherry"];
const firstFruit = fruits[0];
console.log(firstFruit);
console.log(fruits);

예제의 출력은 다음과 같습니다.

apple
[ 'apple', 'banana', 'cherry' ]

배열이 비어 있으면 array[0]의 값은 undefined입니다. 코드에서 값이 필요하다면 항목이 있는지 확인하세요. 조건에 맞는 항목을 찾을 때는 모든 항목을 직접 확인하는 대신 배열의 find() 메서드를 사용하면 됩니다.

JavaScript에서 구조 분해 할당으로 배열의 첫 요소 가져오기

배열 구조 분해 할당을 사용하면 첫 항목을 변수에 할당할 수 있습니다. 예를 들어 const [firstFruit] = fruits;는 fruits[0]과 같은 값을 읽으며 fruits는 변경하지 않습니다. 배열에 항목이 없으면 firstFruit의 값은 undefined입니다. 첫 항목이나 여러 앞쪽 항목을 변수에 할당하는 편이 주변 코드를 더 명확하게 만들 때 이 방식을 사용하세요.

JavaScript에서 find()로 조건에 맞는 첫 배열 요소 찾기

조건 함수가 원하는 항목을 정할 때는 find()를 사용하세요. find()는 항목을 순서대로 확인하고 조건 함수의 반환값이 참으로 판정되는 첫 항목을 반환합니다. 일치하는 항목이 없으면 결과는 undefined이므로 사용 전에 이 경우를 처리해야 합니다.

예를 들어 const firstLongWord = words.find(word => word.length > 5);는 길이가 5자를 넘는 첫 단어를 찾습니다. 값과 관계없이 첫 항목을 원한다면 array[0]을 사용하는 편이 더 간단합니다. 자세한 내용은 JavaScript 배열 find 참조 문서를 확인하세요. 이 링크는 영어 참조 문서로 연결되며 한국어 버전은 제공되지 않습니다.

JavaScript에서 shift()로 배열의 첫 요소를 가져오고 제거하기

인수 없이 shift()를 호출하면 첫 항목을 가져와 제거합니다. 제거된 값을 반환하고 원본 배열을 변경합니다. 배열이 비어 있으면 undefined를 반환합니다. 원본 배열을 변경하려는 경우에만 이 메서드를 선택하세요. 배열을 변경하지 않고 읽으려면 array[0]이나 구조 분해 할당을 사용하면 됩니다.

첫 번째 일치 항목을 가져올 때 filter()가 보통 최선이 아닌 이유

filter()는 조건을 통과하는 모든 항목을 담은 새 배열을 반환합니다. 일치 항목을 모두 모으기 위해 배열을 계속 순회하므로 결과 하나만 필요한 경우에는 불필요한 작업을 하고 새 배열도 만듭니다. 첫 번째 일치 항목만 필요하다면 해당 항목을 바로 반환하고 찾는 즉시 멈추는 find()가 더 적합합니다.

필터링한 복사본에서 첫 결과를 matches[0]으로 읽을 수 있지만, 하나만 찾을 때는 복사본이 필요하지 않습니다. 복사본에 shift()를 호출하면 원본 배열이 아니라 복사본에서 항목이 제거됩니다. 일치하는 항목을 모두 가져와야 할 때 filter()를 사용하세요.