코드 블록 만드는 방법
문
문(statement)은 어떤 작업을 수행하는 문법 구조(syntax structure)와 명령어(command)를 의미
이 전 글에서 alert('hello world')를 통해 메세지 보여주는 걸 확인했다.
코드엔 원하는 만큼 문을 작성할 수 있는데 서로 다른 문은 세미콜론으로 구분한다. (어디서는 생략 가능이고 어디서는 필수이기도)
alert('Hello'); alert('World');
이렇게 두개로 나눈 alert 문은 hello를 확인하고 나면 world 가 나온다
코드의 가독성을 높이기 위해 각 문은 서로 다른 줄에 작성하는 것이 일반적.
alert('Hello');
alert('World');
세미콜론
줄 바꿈이 있다면 세미콜론(semicolon)을 생략할 수 있다.
alert('Hello')
alert('World')
자바스크립트는 줄 바꿈이 있으면 '암시적' 세미콜론으로 해석한다고 한다.
이런 동작 방식 > 세미콜론 자동 삽입(automatic semicolon insertion)
대부분의 경우 줄 바꿈을 세미콜론으로 인식하지만 아닌 경우도 있다.
alert(3 +
1
+ 2);
이 경우 6이 출력되는데 어떤 줄이 '+'로 끝나면
그 줄은 불완전한 표현식 이므로 세미콜론으로 해석하지 않는다.
반대로 정말 세미콜론이 필요하지만 자바스크립트가 추정하지 못하는 상황도 있다.
[1, 2].forEach(alert)
이 코드는 1, 2가 하나씩 출력되는데
alert("에러가 발생합니다.")
[1, 2].forEach(alert)
이걸 출력하면 에러가 발생합니다 출력 후 에러 메세지가 출력된다!
alert("제대로 동작합니다.");
[1, 2].forEach(alert)
이렇게 하면 제대로 동작한다.
alert말고 console.log에서도 이런 상황이 있었다. (알 수 없는 자바스크립트 세계,,,,3년째 낯설어,,늘 새로워,,,)
여기서 세미콜론이 없을 때 에러가 났던 이유는
[] 대괄호 앞에는 세미콜론이 있다고 가정하지 않기 때문이다.
- 세미콜론 자동 삽입이 일어나지 않고 단일문으로 처리된다.
alert("에러가 발생합니다.")[1, 2].forEach(alert)
자바스크립트 엔진은 이렇게 본다는 뜻이다.
서로 다른 두 개의 문이었지만 단일 문으로 해석,, 이 외에도 비슷한 에러들이 있을 수 있다.
따라서 줄 바꿈으로 나눴어도 세미콜론을 넣는 것이 좋다는 것이다.
세미콜론을 생략할 수 있지만 안전성을 위해 세미콜론을 사용하는 것을 권장한다.
주석
시간이 흐름에 따라 자바스크립트 코드가 더 복잡해지면서
무슨 일이 벌어지고 있는지 설명해 줄 주석(comment)의 필요성이 요구되었다.
주석은 스크립트 어디에나 작성할 수 있다.
- 자바스크립트의 엔진이 주석을 무시하기 때문에 어느 위치에 있어도 실행에 영향을 주지 않는다.
// 이 주석은 한 줄을 다 차지합니다.
alert('Hello');
alert('World'); // 이 주석은 문 다음 이어집니다.
/**/ 이걸 사용하면 여러 줄의 주석도 가능하다.
/* 두 줄짜리 주석 예제
이것은 여러 줄의 주석입니다.
*/
alert('Hello');
alert('World');
주석 안에 코드를 써도 무시된다.
/* 코드 주석 처리하기
alert('Hello');
*/
alert('World');
*단축키
대부분의 에디터에서는 주석 처리 단축키를 지원하는데
Ctrl + / 를 사용하면 한 줄 주석
Ctrl + Shift + / 를 사용하면 여러 줄 주석이 된다.
(맥은 Ctrl 대신 Cmd, Shift 대신 Option)
여러 줄 주석의 경우 중첩은 지원하지 않는다.
/*
/* 중첩 주석 ?!? */
*/
alert( 'World' );
// // 한 줄 중첩 주석
alert( '이건 된다' )
주석을 달면 코드 길이가 길어지지만
서버에 배포하기 전에 코드를 압축해주는 도구가 많이 있고 이 도구들은 주석을 삭제해준다.
실행 중인 스크립트엔 주석이 들어가지 않으므로
주석은 최종으로 배포되는 코드에 부정적인 영향을 끼치지 않는다.
주석을 잘 쓰는 방법에 대해서는 나중에 자세하게 나온다.
