JavaScript에서 배열의 첫 번째 요소를 가져오는 방법 (slice() 활용)

JavaScript 배열에서 처음 몇 개의 요소에 접근해야 할 때가 있습니다. 이럴 때는 자바스크립트의 내장 메서드인 slice()를 사용하면 됩니다.

예제: 배열의 첫 3개 항목 가져오기

예를 들어, 배열의 첫 3개 항목을 조작해야 한다고 가정해 보겠습니다. 여기서 배열은 운동 목록입니다:

const exerciseList = [
  "Deadlift",
  "Squat",
  "Push-up",
  "Pull-up",
  "Turkish Get-up",
  "Kettlebell Swing",
]

먼저 접근하고 싶은 항목의 개수를 정의합니다:

// 첫 3개 항목 가져오기
const numberOfItems = 3

그다음, 첫 3개 항목에 대한 참조를 담을 새로운 변수를 선언합니다:

const firstThreeExercises = exerciseList.slice(0, numberOfItems)

console.log()를 사용해 exerciseList와 firstThreeExercises의 값을 출력해 직접 확인해 보세요:

console.log(exerciseList)
// 출력: ["Deadlift", "Squat", "Push-up", "Pull-up", "Turkish Get-up", "Kettlebell Swing"]

console.log(firstThreeExercises)
// 출력: ["Deadlift", "Squat", "Push-up"]

slice() 메서드의 동작 원리

slice()는 두 개의 매개변수를 받습니다. 첫 번째는 추출을 시작할 인덱스이고, 두 번째는 추출을 종료할 인덱스입니다. 단, 종료 인덱스에 해당하는 요소는 결과에 포함되지 않습니다. 위 예제에서 slice(0, 3)은 인덱스 0부터 2까지, 즉 세 개의 요소를 반환합니다.

참고로 이 방식은 원본 exerciseList 배열을 수정하지 않습니다. slice()는 원본 배열을 변경하지 않고(always non-destructive) 항상 새로운 배열을 반환하기 때문에, 원본 데이터를 그대로 유지한 채 안전하게 부분 배열을 얻을 수 있다는 장점이 있습니다.