[카테캠 5주차] 자바스크립트 기초

모듈화

JS 파일이 커지면 언젠가 파일을 여러개로 분리해야한다. 이렇게 각각 분리된 파일을 모듈이라 하는데, 이렇게 모듈로 나눠진 파일을 import, export 하기 위해선 script 태그에 type 을 module 로 선언해주어야한다.

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

 

 

템플릿 리터럴 

흔히 백틱을 사용해서 문자열을 나타내는 것을 템플릿 리터럴 이라고 부른다.

템플릿 리터럴을 사용하면 문자열 안에 변수를 사용할 수 있는 문자열 보간을 사용할 수 있다.

const hello = `Hello ${myName}!`;

 

NaN

데이터 타입은 숫자지만 숫자로 표현할 수 없을 때 사용된다.

console.log(0.1 + undefined)

 

 

부동 소수점 오류

컴퓨터가 10진수를 2진수로 표현하면서 생기는 무한 소수를 유한한 값으로 나타내면서 세부적인 값의 초과나 손실이 발생하는데, 이것을 부동소수점 오류라 한다.

const a = 0.1;
const b = 0.2;
console.log(a + b);  // 0.3000000000004
console.log((a + b).toFixed(1));

 

추가적으로 브라우저 콘솔에 Number 는 파란색, String 은 회색으로 표기된다.

 

 

 

=== 과 == 의 차이

JavaScript는 타입 변환에 대해 유연하게 동작한다.

== 연산자는 두 피연산자의 값의 타입이 다를 경우 자동으로 일부 피연산자의 타입을 변환 후 값을 비교한다.

타입을 비교하지 않으므로 === 연산자에 비해 느슨하다고 할 수 있다.

10 == 10    // true
10 == '10'  // true
true == 1   // true
true == '1' // true
true == 'true' // false

null == undefined // true

 

== 연산자는 값을 비교하기 전에 타입이 다를 경우 타입을 변환 후 값을 비교한다.

하지만, === 연산자는 타입을 변환하지 않으므로 == 연산자에 비해 비교하는 방식이 엄격하다.
즉, === 연산자는 타입이 다르면, false를 반환한다.

10 === 10   // true

10 === '10' // false

true === 1  // false

true === 'true' // false

null === undefined // false

NaN === NaN // false

NaN 값은 자기 자신을 포함하여 어떤 값과도 일치하지 않는다. 즉, === 연산자에 NaN 값이 존재하는 경우에는 항상 false 이다.

 

Object( )와 객체 리터럴 방식 그리고 생성자 함수

// 빈 객체의 생성
const person = new Object();

// 프로퍼티추가
person.name = 'Lee'; 
person.sayHello = function () {
  console.log('Hi! My name is ' +this.name);
};

console.log(person); // {name: "Lee", sayHello: /} 
person.sayHello(); // Hi! My name is Lee

new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환한다. 빈 객체를 생성한 이후 프로퍼티 또는 메서드를 추가하여 객체를 완성할수 있다.

 

그런데 Object 만을 단독으로 사용할만한 이유는 딱히 없어보인다. 객체 리터럴 방식과 생성자 함수를 사용하자.

 

객체 리터럴 방식 vs 생성자 함수

늘 그렇듯 상황에 가장 적합하다고 판단되는 방법을 근거를 가지고 선택하면 된다.

 

객체 리터럴을 사용하여 객체를 만드는 것도 단일 객체를 만들 때 충분히 고려할 수 있다.

 

 

 

하지만 객체를 여러개 생성해야한다면 생성자 함수를 사용하는 것이 더 효율적이다.

 

 

package.json 에서의 버전 명시

버전 명시에는 ~(틸트) , ^(캐롯) 이 주로 쓰입니다.

모듈의 Semantic Version 에는 Major , Minor, Patch 가 존재합니다.

 

Major 

• 하위 버전과 호환되지 않는 변화가 생겼을때
• 대대적인 변화가 일어났을때 
• 클라이언트가 1.0.0 버전의 API 접근 방식으로 2.0.0 에 접속할 수 없을 때

Minor 

• 하위 버전과 호환이 되면서, 새로운 기능이 추가 될때

Patch

• 버그 수정

예시로 확인해보자

• ^1.2.3 
  왼쪽에서 맨 처음 0 이 아닌 요소가 major 이기 때문에 minor, patch 업데이트를 허용합니다.
  1.2.3 <= 버전 <2.0.0
• ^0.2.3
  왼쪽에서 맨 처음 0 이 아닌 요소가 minor 이므로 patch 업데이트를 허용합니다.
  0.2.3 <= 버전 < 0.3.0
• ^0.0.3
  왼쪽에서 맨 처음 0이 아닌 요소가 patch이기 때문에 업데이트를 허용하지 않습니다.

 

OR 연산자 와 Null 병합 연산자 차이

• || 는 첫 번째 truthy 값을 반환
• ?? 는 첫 번째 정의된 값을 반환

 

두 연산자의 차이

let value = 0
let result = value ?? "정의되지 않은 변수" (null과 undefined만 적용)
console.log(result); // 0 

result = value || "falsy한 변수"
console.log(result); // falsy한 변수

 

JavaScript 의 falsy 한 값

  false
  null
  undefined
  0
  -0
  0n
  NaN
  ""

 

 

옵셔널 체이닝

옵셔널 체이닝 연산자 ?.는 좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티를 참조한다

const userA = {
	name: 'HEROPY',
	address: {
		country: 'Korea',
		city: 'Seoul'
	}
};
const userB = {
	name: 'Neo',
};

function getCity(user) {
	return user.address?.city;
}

console.log(getCity(userA));  // Seoul
console.log(getCity(userB));  // undefined

 

 

데이터 타입 확인

//데이터 타입 확인
//typeof: [], {}, null은 구분할 수 없음
console.log(typeof 'Hello' === 'string')
console.log(typeof 123 === 'number')
console.log(typeof false === 'boolean')
console.log(typeof undefined === 'undefined')
console.log(typeof null === 'object')
console.log(typeof [] === 'object')
console.log(typeof {} === 'object')
console.log(typeof function () {} === 'function')


//constructor: null은 구분할 수 없음
console.log([].constructor === Array)
console.log({}.constructor === Object)


//모든 데이터 타입 구분 가능!
function checkType(data) {
    return Object.prototype.toString.call(data).slice(8,-1)
}

console.log(checkType([]) === "Array")

 

 

유사 배열

유사 배열 객체는 마치 배열처럼 인덱스로 프로퍼티 값에 접근할 수 있고 length 프로퍼티를 갖는 객체를 말한다.

대표적 예시로는 arguments, NodeList, HTMLCollection 이 있다. 이들은 유사배열이면서 이터러블하기 때문에 for of 문을 통해 순회할 수 있다.

 

추가적으로 NodeList는 forEach 메서드를 가지고 있지만 HTMLCollection 은 아무런 배열 메서드를 가지고 있지 않다. 결과적으로 제대로된 배열 메서드를 사용하기 위해서는 Array.from 을 사용하여 유사배열을 배열로 바꿔줘야한다.