window.location이란?
JavaScript에서 window.location은 읽기 전용(read-only) 속성으로, 현재 문서의 위치(URL)에 대한 정보를 담고 있는 Location 객체를 반환합니다. 이 객체를 활용하면 현재 페이지의 주소를 확인하거나, 필요에 따라 다른 페이지로 이동시키는 등의 작업을 할 수 있습니다.
Location 인터페이스는 객체가 연결된 위치(URL)를 나타내며, 아래와 같은 다양한 속성들을 제공합니다.
Location 객체의 주요 속성
- Location.href − 전체 URL을 담고 있는 문자열(DOMString)입니다. 값을 변경하면 해당 문서가 새 페이지로 이동하며, 다른 출처(origin)의 값으로도 설정할 수 있습니다.
- Location.protocol − URL의 프로토콜 스킴으로, 마지막 ':'(콜론)까지 포함됩니다. (예:
https:) - Location.host − 호스트명과 포트 번호를 함께 나타냅니다. (예:
example.com:8080) - Location.hostname − URL의 도메인 이름입니다. (예:
example.com) - Location.port − URL의 포트 번호입니다.
- Location.pathname − 시작 '/'(슬래시)와 그 뒤의 경로를 나타냅니다. (예:
/path/page.html) - Location.search − '?' 뒤에 오는 파라미터, 즉 쿼리스트링(querystring)입니다. 최신 브라우저에서는
URLSearchParams와URL.searchParams를 제공하여 쿼리스트링의 파라미터를 손쉽게 파싱할 수 있습니다. - Location.hash − '#' 뒤에 오는 프래그먼트 식별자(fragment identifier)입니다. (예:
#section1) - Location.username − 도메인 이름 앞에 지정된 사용자 이름입니다.
- Location.password − 도메인 이름 앞에 지정된 비밀번호입니다.
사용 예제
다음은 window.location의 각 속성값을 확인하는 간단한 예제입니다.
// 현재 URL: https://example.com:8080/path/page.html?id=10#section1
console.log(window.location.href); // https://example.com:8080/path/page.html?id=10#section1
console.log(window.location.protocol); // https:
console.log(window.location.host); // example.com:8080
console.log(window.location.hostname); // example.com
console.log(window.location.port); // 8080
console.log(window.location.pathname); // /path/page.html
console.log(window.location.search); // ?id=10
console.log(window.location.hash); // #section1마무리
window.location은 현재 문서의 URL 정보를 다룰 때 반드시 알아야 하는 핵심 API입니다. 특히 href를 활용한 페이지 이동과 searchParams를 활용한 쿼리 파라미터 처리는 실무에서 자주 사용되므로 미리 익혀두면 큰 도움이 됩니다.