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

JavaScript에서 배열의 첫 번째 요소를 가져오려면 간단한 for 루프와 if-else 조건문을 함께 사용할 수 있습니다. 이 방법은 배열에 요소가 존재하는지 먼저 검사한 후, 존재할 경우에만 첫 번째 값을 추출하므로 빈 배열로 인한 오류를 안전하게 처리할 수 있다는 장점이 있습니다.

동작 원리

핵심 로직은 다음과 같습니다.

먼저 배열의 길이가 1보다 큰지 확인합니다. 만약 길이가 1 이상이 아니라면 배열에 요소가 없다는 의미이므로, else 블록으로 이동하여 값을 undefined로 설정하고 콘솔에 적절한 메시지를 출력합니다. 반대로 배열에 요소가 있다면 첫 번째 인덱스의 값을 변수에 할당한 뒤, break 문으로 루프를 즉시 종료하고 결과를 콘솔에 출력합니다.

예제 코드

var studentDetails = [
    {
        "firstName": "John"
    },
    {
        "firstName": "David"
    },
    {
        "firstName": "Bob"
    },
    {
        "firstName": "Mike"
    },
    {
        "firstName": "Carol"
    }
]

var firstObjectValue = "";

if (studentDetails.length > 1) {
    for (var index = 0; index < studentDetails.length; index++) {
        firstObjectValue = studentDetails[index].firstName;
        break;
    }
} else {
    firstObjectValue = undefined;
}

if (firstObjectValue != undefined)
    console.log(firstObjectValue);
else
    console.log("There is no element in the array");

실행 방법

위 프로그램을 실행하려면 Node.js 환경에서 다음 명령어를 사용합니다.

node fileName.js

여기서는 파일 이름이 demo184.js라고 가정합니다.

출력 결과

위 코드를 실행하면 다음과 같은 출력을 확인할 수 있습니다.

PS C:\Users\Amit\javascript-code> node demo184.js
John

배열의 첫 번째 객체에 담긴 이름인 "John"이 정상적으로 출력되었습니다. 만약 배열이 비어 있었다면 "There is no element in the array"라는 메시지가 대신 출력됩니다.

참고: 더 간단한 대체 방법들

for 루프 방식은 로직을 명확히 보여주지만, 실무에서는 더 간결한 문법을 자주 사용합니다.

1. 인덱스 접근

const firstValue = studentDetails[0]?.firstName;

옵셔널 체이닝(?.)을 사용하면 빈 배열일 때 undefined를 안전하게 반환받을 수 있습니다.

2. 구조 분해 할당(Destructuring)

const [firstStudent] = studentDetails;
console.log(firstStudent?.firstName); // John

3. Array.prototype.at()

const firstItem = studentDetails.at(0); // 첫 번째 요소 반환
// studentDetails.at(-1)처럼 음수 인덱스로 마지막 요소도 조회 가능

상황에 맞는 방법을 선택하되, 배열이 비어 있는 경우를 항상 고려하는 것이 안전한 코드 작성의 핵심입니다.