이 글은 모던 자바스크립트 튜토리얼 2장 1 ~ 3 을 읽고 정리한 글입니다.
'script' 태그
script 태그를 이용하면 HTML 문서 안에 자바스크립트를 삽입할 수 있습니다.
<body>
<script>
alert( 'Hello, world!' );
</script>
</body>script 태그에는 자바스크립트 코드가 들어가고 브라우저는 이 태그를 만나면 자동으로 실행합니다.
외부 스크립트
자바스크립트 코드를 파일로 소분하여 저장할 수 있습니다.
저장한 파일을 src 속성을 사용해 불러와 사용할 수 있습니다.
<script src="/path/to/script.js"></script>세미콜론
문(statement)은 어떤 작업을 수행하는 문법 구조와 명령어를 의미합니다.
코드에 원하는 만큼 문을 작성할 수 있습니다. 이때, 서로 다른 문은 세미콜론으로 구분합니다.
줄바꿈이 있다면 세미콜론을 생략할 수 있습니다.
아래코드는 에러없이 동작합니다.
alert('Hello')
alert('World')자바스크립트는 줄 바꿈이 있으면 이를 '암시적' 세미콜론으로 해석합니다. 이런 동작 방식을 세미콜론 자동 삽입이라 부릅니다.
대부분의 경우, 줄 바꿈은 세미콜론을 의미하지만 항상 그렇지는 않습니다.
아래와 같이 그렇지 않은 경우도 있습니다.
alert(3 +
1
+ 2);줄바꿈으로 문을 나눴더라도, 문 사이엔 세미콜론을 넣는 것이 좋습니다. 커뮤니티에서도 이를 규칙으로 정해 권장하고 있습니다.
주석
시간이 흐름에 따라 프로그램은 더욱 더 복잡해졌습니다. 이로 인해 설명을 해주는 주석의 필요성이 요구되었습니다.
주석은 스크립트의 어느 곳에서나 작성할 수 있고, 실행에 영향을 주지 않습니다.
// 한줄짜리 주석은 이렇게 작성합니다.
/*
여러줄의 주석은
이렇게 작성합니다.
*/
/*
/* 중첩 주석은 지원하지 않습니다!!! 에러 발생!!! */
*/주석을 달면 코드의 전체적인 길이가 증가합니다. 단점이라고 볼 수 있지만 적절한 주석은 오히려 코드의 이해와 협업의 긍정적인 영향을 가져옵니다.
엄격모드
자바스크립트는 오랫동안 호환성 이슈 없이 발전해왔습니다. 기존의 기능을 변경하지 않으면서 새로운 기능이 추가되었습니다.
덕분에 기존에 작성한 코드는 절대 망가지지 않는다는 장점이 있지만 자바스크립트 창시자들이 했던 실수나 불완전한 결정이 언어 안에 영원히 박제된다는 단점도 있습니다.
이러한 상황은 ES5 등장하기 전까지 지속되었습니다. 그런데 새롭게 제정된 ES5에서는 새로운 기능이 추가되고 기존 기능 중 일부가 변경되었습니다. 기존 기능을 변경했기 때문에 하위 호환성 문제가 생길 수도 있습니다. 그래서 변경사항 대부분은 ES5의 기본모드에선 활성화되지 않도록 설계가 되었습니다.
대신 use strict이라는 특별한 지시자를 통해 엄격모드를 활성화 했을 때만 이 변경사항이 활성화되게 했습니다.
"use strict";
// 스크립트 최상단에 추가합니다.
// 이 코드는 모던한 방식으로 실행됩니다.
...최상단 뿐 아니라 함수 앞에도 올 수 있습니다. 파일 전체 또는 함수의 개별적으로 적용할 수 있습니다.
(function() {
'use strict';
// ...테스트하려는 코드...
})()정리
- script 태그를 사용하여 스크립트 문을 작성하고 브라우저가 태그를 만나게 되면 자동으로 실행된다.
- 세미콜론 자동 삽입으로 인해 암시적으로 세미콜론을 생략할 수 있다.
- 적절한 주석은 코드를 읽는데 도움이 된다.
