[JS/이론 정리] script 태그 ~ 형 변환

강의가 실습 위주라서 이론을 꼼꼼히 공부해야 할 필요성을 느꼈다.  

아래는 Ilya Kantor 님의 '코어 자바스크립트' 문서를 읽고 주요 이론을 정리하여 기록한 내용이다. 

 

 

 

Hello, World!

• 웹 페이지에 자바스크립트 코드를 추가하기 위해 <script> 태그를 사용한다.
• type 과 language 속성은 필수가 아니다.
• 외부 스크립트 파일은 <script src="path/to/script.js"></script>와 같이 삽입한다.

 

코드 구조

• 문(statement)은 어떤 작업을 수행하는 문법 구조(syntax structure)와 명령어(command)이다.
• 서로 다른 문은 세미콜론으로 구분하며, 코드의 가독성을 높이기 위해 각 문은 서로 다른 줄에 작성한다.
• 줄바꿈이 있다면 세미코론(semicolon)을 생략 가능하다.
  but, 특정 연산자(+ 등)를 끝으로 줄바꿈이 일어나거나 특정 상황에서는 세미콜론이 자동삽입되지 않을 수 있다.
  ex) 대괄호 []는 세미콜론이 있다고 가정하지 않는다.

 

엄격 모드

• ES가 등장 전까지 존재한 js의 불완전한 문법이 기존사이트에 영원히 박제되는 경우가 있었다.
• 해당 사항을 극복하더라도, 호환성 문제를 해결하기 위해 엄격모드에서만 변경사항이 활성화 되도록 해놓았다.
• 'use strict' 는 최상단에 위치시켜야한다. 또한 취소할 수 없다.
• 모던자바스크립트에는 class나 import등의 구조가 존재하는데, 이를 사용하면 자동 적용이 된다.

 

변수와 상수

• var, let, const를 사용해 변수를 선언할 수 있으며, 선언된 변수엔 데이터를 저장할 수 있다.
     let – 모던한 변수 선언 키워드
     var – 오래된 변수 선언 키워드. 잘 사용하지 않는다.
     const – let과 비슷하지만, 변수의 값을 변경할 수 없다.
• 변수명은 변수가 담고 있는 것이 무엇인지 쉽게 알 수 있도록 지어져야 한다.
  
  

자료형

JS의 8가지 기본 자료형

• 숫자형 – 정수, 부동 소수점 숫자 등의 숫자를 나타냄. 정수의 한계는 ±253 이다.
• bigint – 길이 제약 없이 정수를 나타낼 수 있다.
• 문자형 – 빈 문자열이나 글자로 이뤄진 문자열을 나타냄.
• 불린형 – true, false를 나타낼 때 사용한다.
• null – null 값만을 위한 독립 자료형. null은 알 수 없는 값을 나타낸다.
• undefined – undefined 값만을 위한 독립 자료형. undefined는 할당되지 않은 값을 나타낸다.
• 객체형 – 복잡한 데이터 구조를 표현할 때 사용
• 심볼형 – 객체의 고유 식별자를 만들 때 사용

typeof 연산자는 피연산자의 자료형을 알려준다.

• typeof x 또는 typeof(x) 형태로 사용
• 피연산자의 자료형을 문자열 형태로 반환
• null의 typeof 연산은 "object"인데, 이는 언어상 오류이다. null은 객체가 아니다.

 

alert, prompt, confirm 을 이용한 상호작용

• alert: 메시지를 보여준다.
• prompt: 텍스트를 입력하라는 메시지를 띄워주면서 입력 필드를 함께 제공한다. 확인을 누르면 prompt 함수는 사용자가 입력한 문자열을 반환하고, 취소 또는 Esc를 누르면 null을 반환합니다.
• confirm: 사용자가 확인 또는 취소 버튼을 누를 때까지 메시지가 창에 보여진다. 사용자가 확인 버튼을 누르면 true를, 취소 버튼이나 Esc를 누르면 false를 반환한다.
  
  위 함수들은 모두 모달 창을 띄워주는데, 모달 창이 떠 있는 동안은 스크립트의 실행이 일시 중단된다. 사용자가 창을 닫기 전까진 나머지 페이지와 상호 작용이 불가능하다.

단, 이러한 함수에는 2가지 제약사항이 있다.

• 모달 창의 위치는 브라우저가 결정하는데, 대개 브라우저 중앙에 위치한다.
• 모달 창의 모양은 브라우저마다 다릅니다. 개발자는 창의 모양을 수정할 수 없다.
  
  

 

형 변환

 

문자형으로 변환

• 무언가를 출력할 때 주로 일어난다. 
• String(value)을 사용하면 문자형으로 명시적 변환이 가능하다.
• 원시 자료형을 문자형으로 변환할 땐, 대부분 그 결과를 예상할 수 있을 정도로 명시적인 방식으로 일어난다.

숫자형으로 변환

• 수학 관련 연산시 주로 일어난다. 
• Number(value)로도 형 변환을 할 수 있다.
• 숫자형으로의 변환은 다음 규칙을 따른다.

전달받은 값   형 변환 후

undefined	NaN
null	0
true / false	1 / 0
string	전달받은 문자열을 “그대로” 읽되, 처음과 끝의 공백을 무시한다. 문자열이 비어있다면 0이 되고, 오류 발생 시 NaN이 된다.

 

불린형으로 변환

• 논리 연산 시 발생한다. 
• Boolean(value)으로도 변환할 수 있다.
• 불린형으로의 형 변환은 다음 규칙을 따른다.

 

전달받은 값   형 변환 후

0, null, undefined, NaN, ""	false
그 외의 값	true

 

아래는 예외적인 경우이다.

• 숫자형으로 변환 시 undefined는 0이 아니라 NaN이 된다.
• 문자열 "0"과 " "같은 공백은 불린형으로 변환 시 true가 된다.