HTML이 태그와 속성 이름에서 대소문자를 엄격하게 구분하지 않는 것과 달리, 자바스크립트(JavaScript)는 대소문자를 철저하게 구분하는 언어입니다. 이 차이는 처음 웹 개발을 배우는 사람들에게 혼란을 주곤 하는데, 두 언어가 밀접하게 연동되어 사용되기 때문입니다. 이 글에서는 자바스크립트가 대소문자를 구분하는 이유와 실제 개발 시 주의해야 할 사항을 살펴보겠습니다.
자바스크립트가 대소문자를 구분하는 이유
HTML은 마크업(markup) 언어로, 브라우저가 관대하게 해석하도록 설계되었습니다. 반면 자바스크립트는 일반 텍스트로 작성되는 프로그래밍 언어로, 엄격한 문법 규칙을 따릅니다. 예를 들어 while이라는 키워드는 반드시 소문자인 "while"로 작성해야 하며, "While"이나 "WHILE"로 쓰면 문법 오류(syntax error)가 발생합니다.
자바스크립트 엔진은 클라이언트 측 스크립트를 정확하게 처리하기 위해 엄격한 문법 체계를 갖추고 있으며, 식별자(identifier)의 대소문자까지 하나의 고유한 정보로 취급합니다.
HTML과 자바스크립트의 이름 충돌 문제
흥미롭게도 HTML의 일부 태그와 속성은 자바스크립트의 객체나 속성과 같은 이름을 공유합니다. HTML에서는 태그와 속성 이름의 대소문자를 구분하지 않기 때문에, 두 언어의 긴밀한 연관성으로 인해 개발자가 혼동하기 쉽습니다.
대표적인 예가 이벤트 핸들러입니다. HTML에서는 onClick, ONCLICK처럼 어떻게 쓰든 동일하게 동작하지만, 자바스크립트 코드 안에서는 반드시 소문자인 onclick으로 작성해야 합니다.
대소문자에 따라 완전히 다른 변수
자바스크립트에서는 철자가 같아도 대소문자가 다르면 서로 전혀 다른 변수로 인식됩니다.
var demo; var DEMO;
위 코드의 demo와 DEMO는 이름은 비슷해 보이지만, 자바스크립트 입장에서는 완전히 별개의 두 변수입니다.
객체와 생성자 함수에서의 대소문자 구분
객체를 다룰 때도 마찬가지입니다. 아래 예제에서 Employee라는 생성자 함수와 employee라는 변수는 대소문자가 다르기 때문에 충돌 없이 공존할 수 있습니다.
function Employee(id, name, subject){
this.id = id;
this.name = name;
}
var employee = new Employee("ee1", "John", "30");참고로 자바스크립트 커뮤니티에서는 생성자 함수나 클래스 이름은 첫 글자를 대문자로(PascalCase), 일반 변수와 함수 이름은 카멜 케이스(camelCase)로 작성하는 네이밍 컨벤션이 널리 사용됩니다. 이러한 규칙을 지키면 대소문자로 인한 혼란을 크게 줄일 수 있습니다.
마무리: 꼼꼼한 대소문자 확인이 버그를 줄입니다
자바스크립트로 작업할 때는 변수, 함수, 객체 이름의 대소문자를 항상 꼼꼼히 확인하는 습관이 중요합니다. 사소한 대소문자 차이 하나가 문법 오류나 예상치 못한 런타임 에러로 이어질 수 있기 때문입니다. 코드 에디터의 자동 완성 기능과 린터(linter) 도구를 활용하면 이런 실수를 효과적으로 예방할 수 있습니다.