[03.31] 모던 JavaScript 튜토리얼

💀TIL

• 선배 특강 / 현직자 특강
• 모던 JavaScript 튜토리얼을 읽고 공부해보고자 한다.
• 모든 출처:  https://ko.javascript.info/

모던 JavaScript 튜토리얼

---

자바스크립트(JavaScript)

 ‘웹페이지에 생동감을 불어넣기 위해’ 만들어진 프로그래밍 언어

 ECMAScript라는 고유한 명세를 갖춘 독립적인 언어

ECMAScript - Wikipedia

자바스크립트는 브라우저뿐만 아니라 서버에서도 실행할 수 있습니다

자바스크립트 엔진(JavaScript engine)이라 불리는 특별한 프로그램이 들어 있는 모든 디바이스에서도 동작

JavaScript engine - Wikipedia

브라우저엔 '자바스크립트 가상 머신’이라 불리는 엔진이 내장되어 있습니다.

 

엔진의 종류는 다양한데, 엔진마다 특유의 코드네임

• V8 – Chrome과 Opera에서 쓰입니다.
• SpiderMonkey – Firefox에서 쓰입니다.
• IE는 버전에 따라 'Trident’나 'Chakra’라 불리는 엔진을 사용합니다. 'ChakraCore’는 Microsoft Edge에 사용되며, 'SquirrelFish’는 Safari에 사용

엔진은 어떻게 동작하나요?

1. 엔진(브라우저라면 내장 엔진)이 스크립트를 읽습니다(파싱).
2. 읽어 들인 스크립트를 기계어로 전환합니다(컴파일).
3. 기계어로 전환된 코드가 실행됩니다. 기계어로 전환되었기 때문에 실행 속도가 빠릅니다.

엔진은 프로세스 각 단계마다 최적화를 진행

 

브라우저에서 할 수 있는 일

자바스크립트란?

 

모던 자바스크립트는 ‘안전한’ 프로그래밍 언어

메모리나 CPU 같은 저수준 영역의 조작을 허용하지 않습니다

자바스크립트의 능력은 실행 환경에 상당한 영향을 받습니다

브라우저 환경에선 웹페이지 조작, 클라이언트와 서버의 상호작용에 관한 모든 일을 할 수 있습니다.

• 페이지에 새로운 HTML을 추가하거나 기존 HTML, 혹은 스타일 수정하기
• 마우스 클릭이나 포인터의 움직임, 키보드 키 눌림 등과 같은 사용자 행동에 반응하기
• 네트워크를 통해 원격 서버에 요청을 보내거나, 파일 다운로드, 업로드하기(AJAX나 COMET과 같은 기술 사용)
• 쿠키를 가져오거나 설정하기. 사용자에게 질문을 건네거나 메시지 보여주기
• 클라이언트 측에 데이터 저장하기(로컬 스토리지)

 

브라우저에서 할 수 없는 일

자바스크립트란?

 

브라우저는 보안을 위해 자바스크립트의 기능에 제약을 걸어놓았습니다

이런 제약은 악성 웹페이지가 개인 정보에 접근하거나 사용자의 데이터를 손상하는 것을 막기 위해 만들어졌습니다.

 

자바스크립트만의 강점

자바스크립트란?

 

• HTML/CSS와 완전히 통합할 수 있음
• 간단한 일은 간단하게 처리할 수 있게 해줌
• 모든 주요 브라우저에서 지원하고, 기본 언어로 사용됨

자바스크립트 ‘너머의’ 언어들

자바스크립트란?

 근래엔 브라우저에서 실행 되기 전에 자바스크립트로 트랜스파일(transpile, 변환) 할 수 있는 새로운 언어들이 많이 등장했습니다.

 

• TypeScript는 개발을 단순화 하고 복잡한 시스템을 지원하려는 목적으로 '자료형의 명시화(strict data typing)'에 집중해 만든 언어입니다. Microsoft가 개발하였습니다.
• Dart는 모바일 앱과 같이 브라우저가 아닌 환경에서 동작하는 고유의 엔진을 가진 독자적 언어입니다. Google이 개발하였습니다.

---

‘script’ 태그

  <p>스크립트 전</p>

  <script>
    alert( 'Hello, world!' );
  </script>

  <p>스크립트 후</p>

외부 스크립트

 

<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>
…

 

HTML 안에 직접 스크립트를 작성하는 방식은 대개 스크립트가 아주 간단할 때만 사용합니다

크립트가 길어지면 별개의 분리된 파일로 만들어 저장하는 것이 좋습니다.

스크립트를 별도의 파일에 작성하면 브라우저가 스크립트를 다운받아 캐시(cache)에 저장하기 때문에, 성능상의 이점이 있습니다.

Web cache - Wikipedia

이를 통해 트래픽이 절약되고 웹 페이지의 실제 속도가 빨라집니다.

---

코드 구조

문(statement)

떤 작업을 수행하는 문법 구조(syntax structure)와 명령어(command)를 의미

코드의 가독성을 높이기 위해 각 문은 서로 다른 줄에 작성하는 것이 일반적입니다.

 

세미콜론

 

줄 바꿈이 있다면 세미콜론(semicolon)을 생략할 수 있습니다.

alert('Hello')
alert('World')

자바스크립트는 줄 바꿈이 있으면 이를 ‘암시적’ 세미콜론으로 해석합니다. 이런 동작 방식을 세미콜론 자동 삽입(automatic semicolon insertion)이라 부릅니다.

ECMAScript® 2023 Language Specification

대부분의 경우, 줄 바꿈은 세미콜론을 의미합니다. 하지만 '대부분의 경우’가 '항상’을 의미하진 않습니다.

alert(3 +
1
+ 2);

세미콜론 자동 삽입이 일어나지 않았기 때문에 6이 출력

떤 줄이 "+" 로 끝나면, 그 줄은 '불완전한 표현식’이므로 세미콜론이 필요하지 않다

 

반면, 세미콜론이 정말로 필요하지만 자바스크립트가 이를 추정하지 ‘못하는’ 상황도 존재합니다.

alert("에러가 발생합니다.")

[1, 2].forEach(alert)

alert("에러가 발생합니다.")[1, 2].forEach(alert)

alert("제대로 동작합니다.");

[1, 2].forEach(alert)

 

엄격 모드

새롭게 제정된 ES5에서는 새로운 기능이 추가되고 기존 기능 중 일부가 변경

기존 기능을 변경하였기 때문에 하위 호환성 문제가 생길 수 있다

변경사항 대부분은 ES5의 기본 모드에선 활성화되지 않도록 설계되었습니다

 

대신 use strict라는 특별한 지시자를 사용해 엄격 모드(strict mode)를 활성화 했을 때만 이 변경사항이 활성화되게 해놓았습니다.

 

use strict

 

이 지시자가 스크립트 최상단에 오면 스크립트 전체가 “모던한” 방식으로 동작합니다.

"use strict";

// 이 코드는 모던한 방식으로 실행됩니다.
...

"use strict"는 스크립트 최상단이 아닌 함수 본문 맨 앞에 올 수도 있다

 이렇게 하면 오직 해당 함수만 엄격 모드로 실행

엄격 모드는 대개 스크립트 전체에 적용

 

자바스크립트 엔진을 이전 방식으로 되돌리는 "no use strict"같은 지시자는 존재하지 않습니다.

일단 엄격 모드가 적용되면 돌이킬 방법은 없습니다.

 

개발한 기능을 테스트하기 위해 브라우저 콘솔을 사용하는 경우, 기본적으로 use strict가 적용되어있지 않는다는 점에 주의

 

그렇다면 어떻게 해야 콘솔에서 use strict를 사용할 수 있을까요?

'use strict’를 입력한 후, Shift+Enter키를 눌러 줄 바꿈 해 원하는 스크립트를 입력하면 됩니다

'use strict'; <Shift+Enter를 눌러 줄 바꿈 함>
//  ...테스트하려는 코드 입력
<Enter를 눌러 실행>

'use strict’를 꼭 사용해야 하나요

 

누군가는 스크립트 맨 윗줄엔 "use strict"를 넣는 게 좋다고 권유할 수 있습니다

모던 자바스크립트는 '클래스’와 '모듈’이라 불리는 진일보한 구조를 제공합니다

이 둘을 사용하면 use strict가 자동으로 적용되죠

 따라서 이 둘을 사용하고 있다면 스크립트에 "use strict"를 붙일 필요가 없습니다.

 

---

변수와 상수

 

변수

자바스크립트에선 let 키워드를 사용해 변수를 생성합니다.

데이터를 저장할 때 쓰이는 ‘이름이 붙은 저장소’ 

let message;

message = 'Hello'; // 문자열을 저장합니다.

변수 명명 규칙

1. 변수명에는 오직 문자와 숫자, 그리고 기호 $와 _만 들어갈 수 있습니다.
2. 첫 글자는 숫자가 될 수 없습니다.

여러 단어를 조합하여 변수명을 만들 땐 카멜 표기법(camelCase)이 흔히 사용

달러 기호 '$' 와 밑줄 '_' 를 변수명에 사용할 수 있다

 

예약어(reserved name) 목록에 있는 단어는 변수명으로 사용할 수 없습니다.

이 단어들은 자바스크립트 내부에서 이미 사용 중이기 때문입니다.

예약어 예시: let, class, return, function

 

 

상수

 

변화하지 않는 변수를 선언할 땐, let 대신 const를 사용합니다.

const myBirthday = '18.04.1982';

 

 

대문자 상수

 

기억하기 힘든 값을 변수에 할당해 별칭으로 사용하는 것은 널리 사용되는 관습

이런 상수는 대문자와 밑줄로 구성된 이름으로 명명

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

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

 

자료형

 

자바스크립트에서 값은 항상 문자열이나 숫자형 같은 특정한 자료형에 속합니다.

자바스크립트에는 여덟 가지 기본 자료형이 있습니다

 

// no error
let message = "hello";
message = 123456;

이처럼 자료의 타입은 있지만 변수에 저장되는 값의 타입은

언제든지 바꿀 수 있는 언어를 ‘동적 타입(dynamically typed)’ 언어라고 부릅니다.

 

 

숫자형

숫자형(number type) 은 정수 및 부동소수점 숫자(floating point number)를 나타냅니다.

숫자형과 관련된 연산은 다양한데, 곱셈 *, 나눗셈 /, 덧셈 +, 뺄셈 - 등이 대표적입니다.

숫자형엔 일반적인 숫자 외에 Infinity, -Infinity, NaN같은 '특수 숫자 값(special numeric value)'이 포함됩니다.

let n = 123;
n = 12.345;

Infinity를 직접 참조할 수도 있습니다.

alert( 1 / 0 ); // 무한대
alert( Infinity ); // 무한대

NaN은 계산 중에 에러가 발생했다는 것을 나타내주는 값입니다

alert( "숫자가 아님" / 2 ); // NaN, 문자열을 숫자로 나누면 오류가 발생합니다.
alert( "숫자가 아님" / 2 + 5 ); // NaN

 

BigInt

내부 표현 방식 때문에 자바스크립트에선 (253-1)(9007199254740991) 보다 큰 값

혹은 -(253-1) 보다 작은 정수는 '숫자형’을 사용해 나타낼 수 없습니다.

 

암호 관련 작업같이 아주 큰 숫자가 필요한 상황이거나

아주 높은 정밀도로 작업을 해야 할 때는 이런 큰 숫자가 필요합니다.

BigInt형 값은 정수 리터럴 끝에 n을 붙이면 만들 수 있습니다.

 

// 끝에 'n'이 붙으면 BigInt형 자료입니다.
const bigInt = 1234567890123456789012345678901234567890n;

 

문자형

자바스크립트에선 문자열(string)을 따옴표로 묶습니다.

let str = "Hello";
let str2 = 'Single quotes are ok too';
let phrase = `can embed another ${str}`;

 

1. 큰따옴표: "Hello"
2. 작은따옴표: 'Hello'
3. 역 따옴표(백틱, backtick): `Hello`

 

큰따옴표와 작은따옴표는 ‘기본적인’ 따옴표로, 자바스크립트에서는 이 둘에 차이를 두지 않습니다.

역 따옴표로 변수나 표현식을 감싼 후 ${…}안에 넣어주면,

아래와 같이 원하는 변수나 표현식을 문자열 중간에 손쉽게 넣을 수 있습니다.

 

let name = "John";

// 변수를 문자열 중간에 삽입
alert( `Hello, ${name}!` ); // Hello, John!

// 표현식을 문자열 중간에 삽입
alert( `the result is ${1 + 2}` ); // the result is 3

 

 

불린형

불린형(논리 타입)은 true와 false 두 가지 값밖에 없는 자료형입니다.

불린형은 긍정(yes)이나 부정(no)을 나타내는 값을 저장할 때 사용합니다. true는 긍정, false는 부정을 의미합니다.

 

let nameFieldChecked = true; // 네, name field가 확인되었습니다(checked).
let ageFieldChecked = false; // 아니요, age field를 확인하지 않았습니다(not checked)

 

‘null’ 값

null 값은 오로지 null 값만 포함하는 별도의 자료형을 만듭니다

let age = null;

자바스크립트의 null은 자바스크립트 이외 언어의 null과 성격이 다릅니다

다른 언어에선 null을 '존재하지 않는 객체에 대한 참조’나 '널 포인터(null pointer)'를 나타낼 때 사용합니다.

하지만 자바스크립트에선 null을

‘존재하지 않는(nothing)’ 값, ‘비어 있는(empty)’ 값, ‘알 수 없는(unknown)’ 값을 나타내는 데 사용합니다.

let age = null;은 나이(age)를 알 수 없거나 그 값이 비어있음을 보여줍니다.

 

‘undefined’ 값

undefined는 '값이 할당되지 않은 상태’를 나타낼 때 사용합니다.

변수는 선언했지만, 값을 할당하지 않았다면 해당 변수에 undefined가 자동으로 할당됩니다.

let age;

alert(age); // 'undefined'가 출력됩니다.

 

 

객체와 심볼

객체(object)형은 특수한 자료형입니다.

객체형을 제외한 다른 자료형은 문자열이든 숫자든 한 가지만 표현할 수 있기 때문에 원시(primitive) 자료형이라 부릅니다.

 

반면 객체는 데이터 컬렉션이나 복잡한 개체(entity)를 표현할 수 있습니다.

심볼(symbol)형은 객체의 고유한 식별자(unique identifier)를 만들 때 사용됩니다.

 

typeof 연산자

typeof 연산자는 인수의 자료형을 반환합니다

1. 연산자: typeof x
2. 함수: typeof(x)

괄호가 있든 없든 결과가 동일합니다.

typeof undefined // "undefined"

typeof 0 // "number"

typeof 10n // "bigint"

typeof true // "boolean"

typeof "foo" // "string"

typeof Symbol("id") // "symbol"

typeof Math // "object"  (1)

typeof null // "object"  (2)

typeof alert // "function"  (3)

Math는 수학 연산을 제공하는 내장 객체이므로 "object"가 출력

typeof null의 결과는 "object"

typeof는 피연산자가 함수면 "function"을 반환합니다. 그러므로 typeof alert는 "function"을 출력해줍니다. 

그런데 '함수’형은 따로 없습니다. 함수는 객체형에 속합니다. 이런 동작 방식이 형식적으론 잘못되긴 했지만, 아주 오래전에 만들어진 규칙이었기 때문에 하위 호환성 유지를 위해 남겨진 상태입니다. 한편, 실무에선 이런 특징이 매우 유용하게 사용되기도 합니다.

 

---

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

alert

이 함수가 실행되면 사용자가 ‘확인(OK)’ 버튼을 누를 때까지 메시지를 보여주는 창이 계속 떠있게 됩니다.

alert("Hello");

메시지가 있는 작은 창은 모달 창(modal window) 이라고 부릅니다.

'모달’이란 단어엔 페이지의 나머지 부분과 상호 작용이 불가능하다는 의미가 내포되어 있습니다.

따라서 사용자는 모달 창 바깥에 있는 버튼을 누른다든가 하는 행동을 할 수 없습니다.

확인 버튼을 누르기 전까지 말이죠.

prompt

브라우저에서 제공하는 prompt 함수는 두 개의 인수를 받습니다.

result = prompt(title, [default]);

함수가 실행되면 텍스트 메시지와 입력 필드(input field), 확인(OK) 및 취소(Cancel) 버튼이 있는 모달 창을 띄워줍니다.

 

title 사용자에게 보여줄 문자열

default 입력 필드의 초깃값(선택값)

 

인수를 감싸는 대괄호 [...]의 의미

default를 감싸는 대괄호는 이 매개변수가 필수가 아닌 선택값이라는 것을 의미합니다.

 

prompt 함수는 사용자가 입력 필드에 기재한 문자열을 반환합니다. 사용자가 입력을 취소한 경우는 null이 반환됩니다.

 

let age = prompt('나이를 입력해주세요.', 100);

alert(`당신의 나이는 ${age}살 입니다.`); // 당신의 나이는 100살입니다.

 

Internet Explorer(IE)에서는 항상 '기본값’을 넣어주세요.

 

컨펌 대화상자

result = confirm(question);

confirm 함수는 매개변수로 받은 question(질문)과 확인 및 취소 버튼이 있는 모달 창을 보여줍니다.

사용자가 확인 버튼을 누르면 true, 그 외의 경우는 false를 반환합니다.