JavaScript로 객체 값에서 첫 번째 단어만 추출하는 방법

JavaScript에서 객체에 담긴 문자열 값 중 첫 번째 단어만 필요한 경우가 종종 있습니다. 예를 들어 'JavaScript HTML'처럼 공백으로 구분된 기술 스택 문자열에서 앞쪽 단어만 분리하고 싶다면 split() 메서드를 활용하면 됩니다.

예제 데이터

먼저 다음과 같은 객체 배열이 있다고 가정해 보겠습니다.

const employeeDetails = [
    {
        employeeName: "John Smith",
        employeeTechnology: "JavaScript HTML"
    },
    {
        employeeName: "David Miller",
        employeeTechnology: "Java Angular"
    }
]

해결 방법: split() 활용하기

공백을 기준으로 split() 메서드를 사용하면 문자열을 손쉽게 나눌 수 있습니다. 정규 표현식 /\s/를 사용하면 공백 문자를 기준으로 분할되며, 배열 구조 분해(Destructuring)를 통해 각 단어를 변수에 바로 할당할 수 있습니다.

전체 코드

const employeeDetails = [
    {
        employeeName: "John Smith",
        employeeTechnology: "JavaScript HTML"
    },
    {
        employeeName: "David Miller",
        employeeTechnology: "Java Angular"
    }
]
const objectValues = employeeDetails.map(emp => {
    var [technology1, technology2] = emp.employeeTechnology.split(/\s/);
    return {
        technology1, technology2,
        employeeName: emp.employeeName
    }
});
console.log(objectValues);

실행 방법

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

node fileName.js

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

출력 결과

콘솔에 출력되는 결과는 다음과 같습니다.

PS C:\Users\Amit\javascript-code> node demo244.js
[
    {
        technology1: 'JavaScript',
        technology2: 'HTML',
        employeeName: 'John Smith'
    },
    {
        technology1: 'Java',
        technology2: 'Angular',
        employeeName: 'David Miller'
    }
]

핵심 포인트 정리

• split(/\s/): 정규 표현식을 사용해 공백을 기준으로 문자열을 분리합니다.
• 배열 구조 분해: [technology1, technology2] 형태로 분할된 값을 한 번에 여러 변수에 할당합니다.
• map(): 원본 배열을 변경하지 않고 새로운 객체 배열을 생성하므로 안전하게 데이터를 가공할 수 있습니다.

이 방법은 두 개 이상의 단어가 있는 문자열에서도 응용 가능하며, 나머지 단어들을 함께 처리하려면 전개 연산자(spread operator)나 slice()를 추가로 활용하면 됩니다.