1. 'Script' tag

"script" 태그를 이용하면 JavaScript을 HTML 문서 대부분의 위치에 삽입할 수 있다.

2. 외부 스크립트

2-1. js의 코드의 양이 많은 경우

js의 코드의 양이 많은 경우 파일로 따로 나누어 저장이 가능하며
src 속성을 사용하여 HTML에 삽입이 가능하다.

<script src="main.js"></script>

2-2. URL을 이용하는 경우

URL 전체를 아래의 코드와 같이 사용이 가능하며 여러개도 같은 형식으로 사용이 가능하다.

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

2-3. script tag와 src 속성이 동시에 존재하는 경우

script tag와 src속성은 동시에 사용되지 못하며, 동시에 사용되는 경우 src 속성이 먼저 선언되므로 src의 js만 실행된다.

<script src="main.js">
  alert(Hello world!); // src 속성이 먼저 사용되었으므로 이 코드는 실행되지 않는다.
</script>

위의 js를 둘 다 실행 시키려면 각각 분리해서 사용하면 된다.

<script src="main.js"></script>
<script>
  alert(Hello world!);
</script>

3. 코드 구조

3-1. statement(명령문)

한 줄에 하나의 명령문만을 입력하는 것이 일반적이다.

  // 잘못 된 예시
  alert('Hello');  alert('world'); 

  // 옳게 된 예시
  alert('Hello');
  alert('world'); 

3-2. ; (세미콜론)

줄 바꿈이 있다면 세미콜론은 생략할 수 있다.
하지만 세미콜론을 사용하는 것이 안전하므로 마지막에 항상 세미콜론을 붙이는 습관을 들이자!

3-2. 주석

주석은 아래와 같이 사용하며, 단축키는 ctrl + / 이다.

<script>
/*주석*/
</script>

4. 변수(variable)

4-1. 변수

변수 : 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 혹은 메모리 공간을 식별하기 위해 붙힌 이름이다.
쉽게 말하자면 데이터를 저장할 때 쓰이는 '이름이 붙은 저장소'이다.
변수는 크게 3가지의 종류가 있다.

• var : 예전에 자주 사용하던 변수 선언 키워드이다.
  문제점이 많아 최근엔 사용을 하지 않는 변수이며 아래와 같은 문제점을 가지고 있다.

1. 변수 중복 선언이 가능하여 예기치 못한 값을 반환할 수 있
   다.
2. 함수 레벨 스코프로 인해 외부에서 선언한 변수는 모두 전역 변수로 된다.
3. 변수 선언문 이전에 변수를 참조하면 언제나 undefined를 반환한다.

• let : 최신 변수 선언 키워드이다.
  변수 중복 선언이 불가능, 재할당이 가능하다.

let name = 'bsh'
console.log(name) // output: bsh

// 변수를 연달아 선언하는 것은 불가능 하다
let name = 'study' // output: Uncaught SyntaxError: Identifier 'name' has already been declared

name = 'study'
console.log(study) // output: study

• const : 주로 변경하지 않는 값, 즉 상수일 때 사용한다.
  let과 같은 특징을 가지지만, 반드시 선언과 초기화를 동시에 진행되어야 한다.

// 원시값의 재할당
const name = 'bsh'
name = 'study' // output: Uncaught TypeError: Assignment to constant variable.

// 객체의 재할당
const name = {
  eng: 'bsh',
}
name.eng = 'study'

console.log(name) // output: { eng: "study" }

4-2. 스코프(scope)

위에서 나온 스코프(scope) 용어에 대하여 설명하고자 한다.
스코프 : 식별자(변수명, 함수명, 클래스명 ...)의 유효 범위를 뜻한다.
선언된 위치에 따라 유효 범위가 달라지며 전역에 선언된 변수는 전역 스코프, 지역에 선언된 변수는 지역 스코프를 가진다.

• 전역 변수 : 어디에서든지 참조가 가능한 값이다.
• 지역 변수 : 함수 몸체 내부를 말한다. 따라서 지역변수는 자신의 지역과 그 하위 지역 스코프에서 유효하다.
• 블록 레벨 스코프 : javascript에서 모든 코드 블록(if, for, while, try/catch ...)이 지역 스코프를 만드는데 이러한 특성을 지칭하는 말이다.
• 함수 레벨 스코프 : var 키워드로 선언된 변수는 오직 함수의 코드 블록만을 지역 스코프로 인정하는 것을 지칭한다.

4-3. 변수 명명 규칙

javascript엔 변수 명명 시 규칙을 가지고 있다.

1. 변수명에는 오직 문자와 숫자, 그리고 기호 $와 _만 들어갈 수 있다.
2. 첫 글자는 숫자가 될 수 없다.
3. 여러 단어를 조합할 경우 카멜 표기법을 따라야한다.
   첫 단어는 소문자로 그 다음에 올 단어들은 첫 글자를 대문자로 작성해야 한다.
   ex) userName