모던 JavaScript 튜토리얼 스터디 - 1

1. script 태그

HTML상에서 자바스크립트 프로그램을 삽입하기 위해 사용.

script 태그의 attribute

• src : 외부 스크립트 불러오기 ( 파일과 URL을 불러올 수 있다. )

<script src="/path/to/script.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>

• 스크립트가 길어진다면 별도의 분리된 파일로 만들어 저장하는 것이 유리하다.
  • 브라우저의 작동방식과 관련이 있는데, HTML에 스크립트 파일을 삽입했을 시 다운받아 캐시에 저장한다. 여러 페이지에서 동일한 스크립트를 사용하는 경우, 캐시에서 바로 가져와 사용할 수 있기 때문에 때문에 HTML 내부에서 작성했을 시보다 유리하다.
• src attribute가 있으면, script 태그 내부의 코드는 실행되지 않는다.

<script src="file.js">
  alert(1); // src 속성이 사용되었으므로 이 코드는 무시됩니다.
</script>

2. 엄격 모드

ES5 배포 당시 새로운 기능이 추가되고 기존 기능 중 일부가 변경되었다. 기존 기능이 변경됨에 따라 하위 호환성 문제가 생길수 있기 때문에, 변경사항이 대부분 ES5에서 기본적으로 실행되지 않게 설계되었다. 대신 use strict라는 지시자를 사용해 엄격 모드(strict mode)를 활성화 했을 때만 이 변경사항이 활성화 되게 설계하였다.

use strict

"use strict"는 문자열처럼 생겼지만, 자바스크립트 최상단에 오면 전체가 모던한 방식으로 동작한다.
하지만 ES6의 배포 이후 class와 import 등의 구조를 사용하게 되면, 자동적으로 엄격 모드가 적용되기 때문에 이 둘의 구조를 사용하게 된다면 스크립트에 "use strict"를 삽입할 필요가 없다.

3. 변수

변수의 명명 규칙

• 관습적으로 camelCase가 사용된다.
• '$'와 '_'는 변수명에 사용할 수 있다.
• 변수명은 숫자로 시작될 수 없다.
• 변수명에 하이픈 '-'은 사용될 수 없다.
• 변수명에 예약어(let, return등)는 사용할 수 없다.
• const를 사용할 때 대문자로 작성하는 경우가 있는데, 색의 Hex코드 등 일반적으로 '하드코딩'한 값으 별칭을 만들 때 사용한다.

const COLOR_RED = "#F00";
const COLOR_GREEN = "#0F0";
const COLOR_BLUE = "#00F";
const COLOR_ORANGE = "#FF7F00";

// 색상을 고르고 싶을 때 별칭을 사용할 수 있게 되었습니다.
let color = COLOR_ORANGE;
alert(color); // #FF7F00

바람직한 변수명

• 변수명은 항상 간결하고, 명확해야 한다.
• userName, shoppingCart등 사람이 읽을 수 있는 이름을 사용한다.
• 줄임말이나, a,b,c등의 짧은 이름은 피한다.
• 최대한 서술적이고 간결하게 명명한다. data,value같은 추상적인 이름은 최대한 피한다. 다만, 코드 문맥상 변수가 가리키는 데이터나 값이 아주 명확할 때 이런 이름을 사용하기도 한다.