JavaScript Drill #1

Part 1 - 코어 자바스크립트 / 1.1 ~ 2.9

javascript.info 웹사이트의 모던 자바스크립트 튜토리얼을 정독하며 새로 알게된, 기억하고 싶은 내용들을 기록해두는 지극히 개인적인 시리즈이다.

각설하고 바로 시작하겠다.

스크립트 태그를 사용하고 src 로 JS 파일을 불러오는 이유

HTML 안에 script 태그를 이용하여 스크립트를 추가할 때, 별도의 파일을 불러오지 않고 그대로 태그 안에 스크립트를 작성하는 경우는 스크립트가 아주 간단할 때만 적용한다는 것은 이미 알고 있었다. 스크립트가 많이 길어질 경우 보기에 많이 복잡해지고 가독성도 떨어지기 때문이다.

새로 배운 내용을 덧붙이자면,

• 스크립트를 별도의 파일에 작성하면 브라우저가 그 스크립트를 다운받아 캐시에 저장하기 때문에, 여러 페이지에서 동일한 스크립트를 사용하는 경우에 브라우저는 페이지가 바뀔 때마다 그 파일을 매번 다운받을 필요 없이 캐시에서 파일을 불러올 수 있는 성능상의 이점이 있다.

• script 태그 안에 src 속성을 추가하면 태그 내에 있는 코드는 무시된다.

코드 구조

• 자바스크립트는 줄바꿈이 있다면 세미콜른이 있다고 가정한다. 따라서 다음의 코드는 문제가 없다.

alert("Hi")
alert("Hello")

• 세미콜른이 없다고 가정하는 경우 (대괄호 앞) 도 있다.

alert("Hello")
[1, 2].forEach(alert)

위 코드는 에러가 발생한다.

• 그러므로, 줄 바꿈으로 문을 나누더라도 문 사이에는 세미콜른을 꼭 넣어야한다. 생략할 수는 있으나 사용하는 것이 더 안전하다.

"use strict"

• 지시자 "use strict" 를 스크립트의 첫 줄에 작성하면 스크립트 전체가 "모던한" 방식으로 동작한다. 과거에 사용했던 문법을 사용해서는 안된다. 첫 줄에 사용하지 않으면 "use strict" 는 무시된다.

• Class 와 Module 을 사용한 코드라면 use strict 가 자동으로 적용되기 때문에 굳이 명시할 필요가 없다.

변수와 상수

• 상수에 하드코딩한 값을 할당할 때는 대문자로 상수명을 만들어 사용한다. 반대로 런타임 때 상수 값이 할당될 때는 일반적인 카멜케이스로 상수명을 지어준다.

• 변수명은 간결하고 명확해야하지만, 그렇다고 a, b, c, 와 같은 짧은 이름은 피하는게 좋다.

• 변수명을 지을 때는 자신만의 규칙이나 팀의 규칙을 따르는 게 좋다. 예를 들어 사이트의 방문객을 'user' 라고 하기로 했다면 관련된 변수명은 'currentCustomer', 'newGuest' 가 아닌 'currentUser' 와 'newUser' 로 지어야 한다.

• 변수를 추가하는 것은 좋은 습관이다. 모던 자바스크립트 압축기 (minifier) 와 브라우저는 코드 최적화를 잘해주기 때문에 변수를 추가한다고 해서 성능에 유의미한 변화는 일어나지 않는다. 오히려 코드 최적화에 도움을 줄 수도 있다.

자료형

• 1 / 0 는 Infinity 를 반환한다.
• NaN 은 계산 도중에 에러가 발생했다는 걸 나타내준다. 따라서 다음 코드는 NaN을 반환한다.

alert("숫자 아님" / 4) // 문자열을 숫자로 나눌 수 없으므로 NaN 반환.

• 자바스크립트에서는 최소 -2^53-1 부터 최대 2^53-1 까지 숫자형을 사용해 나타낼 수 있다. 이상의 숫자는 BigInt 형을 사용해야하고, 이는 정수 끝에 다음과 같은 코드처럼 'n' 을 붙여서 만들어줄 수 있다.

const bigInt = 213712984729387529837592375923ㅜ;

• null 값은 독자적인 자료형이다. 문자열, 숫자열 등 어디에도 속하지 않는다. 존재하지 않는, 비어있는, 알 수 없는 값을 나타낼 때 사용한다.

• undefined 또한 null 과 같이 독자적인 자료형이다. 할당되지 않은 상태를 나타낼 때 사용한다. 변수를 선언했지만 값을 할당하지 않았다면 자동으로 undefined 가 할당된다. 직접 undefined를 할당할 수는 있으나 이는 권장되지 않는다.

prompt

• IE 에서 prompt 함수를 사용할 때, 두 번째 매개변수가 비어있을 경우에 "undefined" 를 꼭 명시하도록 하자.

• 모달 창이 떠 있는 동안은 스크립트의 실행이 일시 중단된다.

형 변환

alert("6" / 2); // 3
alert("4" - 2); // 2
alert(5 * "3"); // 15
alert("1" + 5); // 15

• 위와 같이 문자형의 숫자에 뺄셈, 곱셈, 나눗셈을 적용하면 자동으로 숫자형으로 변환하여 연산을 진행한다

• 숫자 외의 글자가 들어있는 문자열을 숫자형으로 변환하려 하면 NaN을 반환한다.

• 숫자 외의 공백이 들어가 있는 문자열을 숫자열로 변환하려 하면 공백을 잘라내고 숫자만 반환해준다.

• 문자열 "0" 은 true 를 반환한다. 자바스크립트에서 비어있지 않은 문자열은 언제나 true 다.

• 숫자 0, 빈 문자열, null, undefined, NaN 은 모두 false다.

• 숫자형으로 변환 시 null 은 0 을, undefined 는 NaN 을 반환한다.

기본 연산자와 수학

alert(+true); // 1
alert(+""); // 0

• 단항 덧셈 연산자는 짧은 문법으로 Number(...) 의 역할을 대신할 수 있다.

let a = (1 + 2, 3 + 4);
alert(a); // 7

• 쉼표 연산자는 여러 표현식을 코드 한 줄에서 평가할 수 있게 해주고, 마지막 표현식의 결과만 반환된다.

비교 연산자

• 피연산자의 형을 비교하려면 === 연산자를 사용하면 된다.

• null == undefined 는 true 를 반환하지만, null === undefined 는 false 를 반환한다.

• null 은 >, <, <=, >= 을 사용할 때 0으로 형변환을 하지만, == 연산자를 사용할 때는 형변환을 하지 않는다. 따라서 null == 0 는 false 를 반환한다.