한글을 처음 배울 때 ㄱ,ㄴ,ㄷ부터
배우고 영어를 배울 때 a, b, c, d 부터 배우는 것처럼 새로운 언어를 처음 접할 때는 문장을
구성하는 가장 기본적인 요소와 구조부터 알아야 한다. 자바스크립트는 전반적으로 C와 자바의 특성을 물려 받아 기존 개발자에게는 친숙한 편이지만 다른 언어와 다른 독특한 특징도 많다. 코드를 구성하는 기본적인 특징부터 정리해 보자.
① 대소문자를 구분한다.
키워드, 변수명, 함수명
등 언어를 구성하는 모든 단어는 대문자와 소문자를 철저하게 구분한다. for, break, switch 등의
키워드는 모두 소문자여서 반드시 소문자로 써야 하며 For, BREAK 따위로 적어서는 안된다. 변수도 score, Score, SCORE 등이 모두 다른 명칭으로
인식된다. HTML 파일 자체는 대소문자를 구분하지 않지만 그 속에 포함되는 스크립트 코드는 그렇지
않으므로 <script> 태그 안에서는 대소문자 구분에 유의해야 한다.
함수 이름도 대소문자를 정확하게 적어야 하는데 특히 여러 단어로 구성된 함수를 호출할 때 주의가 필요하다. getElementById는 반드시 이대로 적어야 하며 getElementByID나
getElementbyId로 적어서는 안된다. 단, 따옴표안에 들어가는 색상값이나 스타일값 등은 자바스크립트의 값이 아니라
CSS의 값이므로 대소문자를 구분하지 않는다.
② 프리포맷을 지원한다.
문장 내의 공백과 탭은 대부분 무시한다. 문서량을 줄이려면 공백없이
따닥따닥 붙여써도 상관없다.
a=b+c;
그러나 너무 붙여 쓰면 읽기 갑갑하고 가독성이 떨어지므로 문장 요소 사이에 적당히 공백을 넣어 시각적으로 구분하는
것이 시원스럽다.
a = b + c;
조건문이나 반복문 등 블록 구조로된 코드를 작성할 때는 앞쪽에 탭이나 공백으로 적당히 들여써 문장 구조를 분명히
표시하는 것이 좋다. 공백이나 탭에 대해서는 완전한 프리포맷을 지원하지만 개행에 대해서는 그렇지 않은
경우가 가끔 있다. 대표적인 예가 return 문인데 다음과
같이 반드시 한 줄에 써야 한다.
return theResult;
리턴하는 대상이 길다거나 복잡한 수식인 경우라도 다음줄로 내려쓰면 안된다.
return
theResult;
return 문은 단독으로 사용되기도 하고 뒤쪽에 리턴값을 명시하기도
하는데 return 키워드 다음에 개행해 버리면 명령이 끝난 것으로 인식하여 리턴값이 없는 것으로 간주해
버린다. ++ 연산자도 마찬가지로 위험한 면이 있다. a++ 이렇게
써야할 것을 두 줄로 개행하여 다음과 같이 쓰면 제대로 증가되지 않는다.
a
++;
개행 코드에 대해서는 일부 부작용이 있어 완전한 프리포맷은 아닌 셈이다. 그러나
일부러 엽기적인 코드를 쓰지 않는 한 개행 코드로 인한 부작용은 거의 없으므로 상식적인 범위 내에서 보기 좋게 편집하면 큰 말썽은 없다.
③ 문장과 문장은 세미콜론으로
구분하며 보통 한 문장의 끝에 세미콜론을 붙인다. 다음은 두 개의 대입문을 작성한 것이며 각 문장 끝에는
세미콜론이 있어 다른 문장임을 명확하게 알 수 있다.
a = 1;
b = 2;
해석기는 두 문장을 별도의 명령으로 인식하여 따로 실행한다. 세미콜론
외에 개행 코드로도 문장을 끝낼 수 있다. 다음 코드도 정상적으로 실행된다.
a = 1
b = 2
문장별로 줄이 다르므로 해석기는 두 개의 다른 명령으로 해석한다. 그러나
다음과 같이 두 문장을 한 줄에 같이 적어서는 안된다.
a = 1 b = 2
이렇게 되면 어디까지가 한 문장인지 명확하게 구분되지 않는다. 정
한 줄에 두 문장을 적고 싶다면 문장 사이에 세미콜론을 넣어 구분한다. 마지막 문장의 세미콜론은 뒤쪽에
다른 명령이 없으므로 생략 가능하다.
a = 1; b = 2;
C나 자바에서 세미콜론은 문장 종결자이며 모든 문장은 세미콜론으로
끝나야 한다. 마치 문단의 끝에 마침표를 찍듯이 세미콜론이 문장의 끝을 표시하는 것이다. 그러나 자바스크립트의 세미콜론은 문장 종결자가 아닌 문단 구분자의 역할을 하며 한 줄에 두 개의 문장이 있을
때 문장을 분리하는 역할만 한다. 문장을 끝내는 것이 아니라 구분만 하므로 개행된 문장에는 세미콜론을
생략해도 상관없다.
그러나 세미콜론을 생략하면 특수한 상황에서 여러 가지 부작용이 발생할 수 있다.
이런 복잡한 규칙을 신경쓰고 싶지 않다면 문장 끝에 무조건 세미콜론을 붙이면 된다. 꼭
필요한 곳에 누락하는 것은 문제가 되지만 남는 것은 빈 명령으로 해석되어 무시되므로 문제되지 않는다. C나
자바처럼 모든 문장은 세미콜론으로 끝난다고 생각해 버리면 된다. 실제로 기존 개발자의 손가락은 문장
끝에 항상 세미콜론을 붙이는 습관이 있으므로 큰 불편은 없는 셈이다.
④ 주석은 두 가지 종류가
있다.
한 줄 주석을 달 때는 // 를 사용하고 여러 줄을 주석 처리할 때는 /* */ 블록으로 감싼다. 한 줄 주석은 // 뒤에서 개행할 때까지 주석 처리되므로 꼭 새 줄에서 시작할 필요없이 코드의 오른쪽에도 달 수 있다. 자바나 C의 주석과 같다. 주석은
코드에 설명을 붙일 때 사용하지만 특정 코드를 임시적으로 삭제할 때도 종종 사용한다.
<script>
/*
작성자 : 김상형
작성일자 : 2014년 6월 29일
*/
var
a = 3; // 주석입니다.
if
(a == 3) {
document.write("a는 3입니다.");
}
else {
document.write("a는 3이 아닙니다.");
}
</script>
자바스크립트의 코드에 대해 HTML 주석인 <!-- --> 도 주석으로 인정하는 브라우저가 있지만 표준은 아니므로 가급적이면 언어 자체의 주석을
사용하는 것이 좋다. 블록 주석 안에 또 다른 블록 주석을 작성하는 중첩은 허용되지 않는다.