JavaScript에서 문자열 경로로 파일 이름 추출하는 방법

파일 경로가 담긴 문자열을 입력받아 해당 파일의 이름을 반환하는 함수가 필요한 경우가 종종 있습니다. 파일 이름은 일반적으로 경로의 맨 끝에 위치하므로, 정규표현식(regex)으로 해결할 수도 있지만, JavaScript의 split() 메서드를 활용하면 훨씬 간단하게 처리할 수 있습니다.

예를 들어 다음과 같은 파일 경로가 있다고 가정해 보겠습니다.

/app/base/controllers/filename.js

split() 메서드를 활용한 구현

split() 메서드는 지정한 구분자를 기준으로 문자열을 나누어 배열로 반환합니다. 슬래시(/)를 구분자로 사용하면 경로의 각 요소가 배열로 분리되고, 그중 마지막 요소가 곧 파일 이름이 됩니다.

예제 코드

const filePath = "/app/base/controllers/filename.js";
const extractFilename = (path) => {
    const pathArray = path.split("/");
    const lastIndex = pathArray.length - 1;
    return pathArray[lastIndex];
};
console.log(extractFilename(filePath));

실행 결과

이 코드를 실행하면 콘솔에 다음과 같이 출력됩니다.

filename.js

코드 동작 원리

위 코드의 동작 과정을 단계별로 살펴보면 다음과 같습니다.

• split("/")을 호출하면 경로가 ["app", "base", "controllers", "filename.js"] 형태의 배열로 변환됩니다.
• 배열 길이에서 1을 빼면 마지막 요소의 인덱스를 구할 수 있습니다.
• 해당 인덱스의 값을 반환하면 파일 이름이 추출됩니다.

더 간결한 대안: pop() 활용하기

배열의 pop() 메서드를 사용하면 코드를 한 줄로 더욱 간결하게 작성할 수 있습니다.

const extractFilename = (path) => path.split("/").pop();
console.log(extractFilename(filePath)); // filename.js

pop() 메서드는 배열의 마지막 요소를 반환하므로, 별도의 인덱스 계산 없이 바로 파일 이름을 얻을 수 있습니다. 상황에 따라 가독성이 좋은 방식을 선택해 사용하시면 됩니다.