바닐라 스크립트(Vanilla JS)

• 바닐라 자바스크립트란 플러그인이나, 라이브러리를 사용하지 않은 순수 자바스크립트를 이야기한다.
• 즉 바닐라 스크립트 = 자바스크립트 라고 생각하면 된다.

1. 자바스크립트에 영향을 준 언어

• java
• scheme
• self

2. 자바스크립트 버전

• ECMA
• ES6

<script>
</script>

변수의 사용방법

• 변수를 사용하기 위해서는 '선언'과 '할당'의 두 영역으로 구분해야 한다.
• 변수의 선언

var num;
var hello;

• 변수의 할당

num = 12345;
hello = "안녕하세요";
hello2 = '안녕';

• 규칙이 java처럼 엄격하지 않음

변수의 종류

• JavaScript의 변수는 표현하는 값의 종류에 따라서 형식이 구분된다.
• 이러한 변수의 종류를 데이터 형(type)이라고 한다.

• Number(정수, 실수)
  숫자를 표현하거나 산술 연산을 하는데 사용되는 데이터 타입
• String(문자열)
  문자열을 표현하는데 사용되는 데이터 타입
  쌍따옴표나 호따옴표로 감싸진 문자를 의미한다.
• Boolean(참, 거짓)
  true, false 값을 가지는 논리 데이터 타입
• Object(객체)
  객체를 저장하기 위한 데이터타입이다.
  브라우저 데어 기능, Form 제어, HTML 태그 요소에 대한 제어 등이 가능하다.
• Null(값 없음)
  개발자가 의도적으로 변수의 공간을 비워 놓은 상태를 의미한다.
• Undefined(정의되지 않음)
  처음부터 변수가 선언만 되고 아무런 값도 할당되지 않은 상태를 의미한다. 이 상태의 변수는 어떠한 처리도 불가능하다.

1. Null과 Undefined의 차이

• java :
  • 변수의 선언시에 자료형이 결정
  • 객체의 경우 null, 숫자형태의 변수는 0, boolean은 false로 기본값이 할당되었다고 간주한다.
• javascript :
  • 변수의 선언시에 변수의 존재 여부와 스코프(범위)만 결정되고 자료형은 값을 할당할때 자동으로 결정이 된다.
  • 자료형이 결정되지 않은 상태이기 때문에 기본값이 할당될 수 없다. 무조건 undefined로 할당된다.
  • javascript는 할당되지 않은 변수에 대하여 자동으로 기본값이 적용되지 않는다. 기본값을 설정하기 위해서는 개발자가 직접 값을 할당해주어야 하는데, null은 이 때 사용하는 객체 변수에 대한 기본값으로 사용된다.
  • 즉, null은 기능이 부여되자 않은 비어 있는 객체 상태를 의미한다.

consol.log()

• 인터넷 창에서 개발자모드 (f12)의 consol 창에서 볼 수 있게 만들어 주는 명령어 이다.

<script>
  var num1;
  var msg1;

  num1 = 12345;
  msg1 = 'Hello JavaScript!!!'

  console.log(num1);
  console.log(msg1);

  // null - 의도적으로 null으 대입
  var value1 = null;
  // undefined - 선언만 된 상태
  var value2;
  console.log('value1 : ' + value1);
  console.log('value2 : ' + value2);

  var isMasn = true;
  console.log(isMasn);
</script>

결과창

document.write(출력내용)

• HTML페이지의 태그 안을 javascript에서는 document라고 부른다.
• 태그 안에 새로운 내용을 출력하자 할 경우 자바스크립트에게 "쓰다" 라는 명령어를 전달한다.
• HTML태그 안에 출력되는 내용이므로, 다른 HTML태그를 포함하여 출력할 수 있다.
• document.write("");

  <script>
  document.write("안녕하세요");
  </script>
  결과 값 : 안녕하세요

---

D03

추가된 변수 선언 방식

• let, const

1. let, const 차이점

• let : 변수에 재할당이 가능
  변수 재선언 불가능

• const : 변수 재할당이 불가능
  (자바의 final) 변수 재선언 불가능
  (상수처럼 사용) 재할당이 필요 없는 상수와 객체에는 const를 사용한다.

자바스크립트에서 권장하는 방식은
재할당이 필요할때만 let으로 사용하고
평소에는 const를 사용하는 방법이다