모던 자바스크립트 튜토리얼 part 1 - 2.1 ~ 2.4

모던 자바스크립트 튜토리얼 

이 문서를 참고하여 javascript 학습한 내용에 대해 기록한다. 가급적 영문 그대로 보고 이해 안 되는 부분만 한글로 번역해서 학습한다. 평소 알고 있던 내용은 생략하고 새롭게 알게 되거나 짚고 넘어가고 싶은 내용 위주로 기록한다.

 

2.1 Hello, World!

The "script" tag

"<script>" 태그를 통해 거의 모든 html 문서에 자바스크립트 코드를 포함할 수 있다.

지금은 거의 쓰이지 않지만, 아래와 같은 속성들이 존재했다. 업무를 진행하다 보면 레거시에서 보게 될지도 모르겠다.

• type="text/javascript" (더 이상 필요하지 않고, 의미도 좀 달라졌다.)
• <script language=...> (스크립트의 언어를 표현하기 위한 것인데, 기본 언어가 javascript이므로 필요 없어졌다.)

External scripts

src 속성을 통해 외부 파일을 넣을 수 있다. 

<script src="/path/to/script.js"></script>

 

보통 간단한 스크립트는 html 문서에 포함하고, 좀 복잡한 파일은 분리한다. 

분리된 파일은 브라우저에서 캐시에 저장하는 이점이 있다. 이 경우 다른 페이지에서 해당 스크립트를 참조할 때, 새롭게 다운로드하는 것이 아니라 캐시에서 가져오게 된다. (사실상 한 번만 다운로드) 이를 통해 트래픽을 줄이고 페이지를 속도를 빠르게 유지할 수 있다.

 

src 속성과 내부에 코드가 함께 쓰일 수는 없다. 외부 소스를 참조하던, 내부에 스크립트를 작성하던 둘 중 하나만 가능.

 

2.2 Code Structure

세미콜론으로 명령문을 구분할 수 있다. 줄 바꿈으로 세미콜론을 생략할 수도 있지만, 항상 그렇지는 않다. 다음과 같은 경우를 주의하자.

alert("Hello")는 올바르게 수행되지만, 그 이후 코드에서 오류가 발생한다. 위 코드는 실제로 엔진이 alert("hello")[1,2].forEach(alert); 와 같이 인식한다. 이러한 경우 세미콜론이 꼭 필요하다. 사실 일반적으로는 줄 바꿈을 할 때마다 세미콜론을 붙여주는 게 관례이다. (나는 자바를 주로 사용했어서 거의 항상 세미콜론을 사용하긴 한다.)

 

2.3 use strict

"use strict" 또는 'use strict'를 스크립트 상단에 위치시키면 모던하게 스크립트가 동작한다.

브라우저 콘솔에서는 기본적으로 use strict 모드가 실행되지 않는데, 이 때도 최상단에 구문을 포함하여서 수행시키면 된다.

 

아직까지는 use strict 가 정확히 어떤 역할을 하는지 잘 모르겠다.

 

chat gpt 답변을 참고해 봤을 때, 기존 javascript에서 허용된 다소 자유로운 syntax가 제한되어 좀 더 명확하게 사용할 수 있도록 하는 느낌?이다. 좀 더 공부해 보면서 차이를 느껴보자.

 

2.4 Variables

변수는 주로 let 키워드를 통해 선언한다. 과거 var 키워드를 사용했던 기억이 있는데, 이제는 let 을 주로 사용하고 기능도 거의 동일하다. 차이점은 추후 알아보자.

 

• 변수는 일반적으로 카멜 케이스로 네이밍한다.
• use strict가 없는 경우 아래와 같은 코드가 가능(과거 코드와의 호환 때문에)하지만, 이는 use strict가 없는 경우 오류가 발생하기 때문에 지양하는 것이 좋겠다.

num = 5;
alert(num); // 정상 동작

'use strict";
num = 5; // 에러

 

변하지 않는 상수를 선언할 때는 const 키워드를 사용한다. 이 키워드로 변수 값을 할당하면, 다른 값을 새롭게 할당할 수 없다.

const COLOR_RED = "#F00";
const myBirthday = '18.04.1982'