자바스크립트에서 공백(Whitespace)과 줄 바꿈이란?
자바스크립트는 프로그램 코드에 포함된 공백(space), 탭(tab), 그리고 줄 바꿈(newline)을 모두 무시합니다. 즉, 이러한 공백 문자들은 실행 결과에 아무런 영향을 주지 않으므로, 개발자는 코드를 자유롭게 정렬하고 들여쓰기하여 깔끔하고 일관성 있는 형태로 작성할 수 있습니다. 잘 정리된 코드는 읽기 쉬울 뿐만 아니라 유지보수성도 크게 향상됩니다.
공백은 문법에 영향을 주지 않는다
자바스크립트는 공백을 무시하기 때문에, 아래 두 코드는 완전히 동일하게 동작합니다.
var employee = "Amit"; var employee="Amit";
첫 번째 코드는 연산자 앞뒤에 공백을 넣어 가독성을 높인 것이고, 두 번째 코드는 공백 없이 작성한 것입니다. 하지만 실행 결과는 같습니다. 다만 협업 시에는 첫 번째처럼 공백을 활용해 코드를 정리하는 스타일이 권장됩니다.
자바스크립트가 인식하는 공백 문자
- 공백(Space): 단어 사이에 사용되는 가장 기본적인 공백 문자
- 탭(Tab): 들여쓰기에 자주 사용되는 공백 문자
- 줄 바꿈(Newline): 코드의 한 줄을 끝내고 새 줄로 이동
실제 화면에서 줄 바꿈 적용하기
위에서 설명한 것처럼 자바스크립트는 소스 코드 내의 줄 바꿈을 무시하지만, 화면에 출력되는 텍스트에서 줄을 바꾸려면 이스케이프 문자인 \n을 사용해야 합니다. 아래 예제는 alert 창 안에서 줄 바꿈을 구현한 코드입니다.
<!DOCTYPE html>
<html>
<body>
<p>alert 박스에서 줄 바꿈하기. 아래 버튼을 클릭하세요.</p>
<button onclick="alert('안녕하세요\n튜토리얼포인트에 오신 것을 환영합니다')">클릭</button>
</body>
</html>
버튼을 클릭하면 alert 창에 두 줄의 메시지가 표시됩니다. 이처럼 \n은 코드의 가독성을 위한 줄 바꿈이 아니라, 문자열 출력 결과에 실제 줄 바꿈을 삽입할 때 사용한다는 점을 기억하면 좋습니다.