[JS] 자바스크립트 기본 (2) - 데이터 타입

🔷 ~ 기본편 강의를 끝내며 ~

그간 코딩을 해 온 경력(?) 이 있기 때문에 기본 강의는 빠르게 끝낼 수 있었다. 자바스크립트 언어에서 사용되는 특징이나, 그간 다른 언어에서 다루어 보지 못했던 것 위주로 꼼꼼하게 정리하며 공부했다. 다음 주차는 심화! 편이라 적혀 있는데 새로 배울 내용에 기대가 된다. 👀 아! 그리고 완주반은 따로 과제가 주어진다는 사실을 뒤늦게 알았다. 자꾸 강사님이 과제, 과제 하시길래 과제…… 뭐지? 하며 강의자료를 뒤적였는데 거기에 과제 파일도 있었다! 왜 강의록 다운 받을 때 못 봤지? 하여튼, 그것도 해야겠다.

🔷 자바스크립트 데이터 타입

🔸 Boolean

• 값의 True와 False를 판별하는 데이터 타입.
• 값이 없거나 0, -0, null, false, NaN, undefined, 빈 문자열 ("")이라면 객체의 초기값은 false이다.
• 데이터 타입을 불리언으로 변경할 때는, Boolean()으로 감싸면 된다.
  
  
• 느슨한 비교 == VS 엄격한 비교 ===
  느슨한 비교는 단순히 값이 동등한지 판별하고, 엄격한 비교는 값의 자료형까지 동일한지 비교한다.
  
  

🔸 NaN

숫자로 표현이 불가할 때 사용되는 데이터 타입이다. 다음과 같은 예시가 있다.

Number(undefined)
parseInt('숫자로 변경 불가한 문자열')
Math.log(-1)
10 + NaN
'가나다라' / 10 // 문자열과 숫자의 덧셈이 아닌 경우

isNaN 키워드로 값이 숫자인지 아닌지 판별할 수 있다. isNaN 함수는 몇몇 혼란스러운 케이스를 가지고 있기 때문에, ES2015 이후 자바스크립트에서는 Number.isNaN()을 사용하는 것이 권고된다.

• 혼란스러운 isNaN

isNaN(undefined);
isNaN({});
isNaN('1')

=> 위의 경우 모든 결과가 true이지만, ES2015 이후로는 엄격하게 검사하기 때문에 false 값이 나온다.

🔸 Infinity

값이 너무 크거나 작아서 무한대임을 의미한다. 일반적인 값은 지수 1023까지만 허용한다.

• isFinite() : infinity를 확인할 수 있다.
• Number.MAX_VALUE : JS에서 표현할 수 있는 가장 큰 수이다.
• Number.MAX_SAFE_INTEGER : JS에서 안전한 가장 큰 정수이다.

• 주어진 값의 Number의 범위를 넘어설만큼 크다면, 자바스크립트 내장 객체인 BigInt를 사용할 수 있다. BigInt()를 호출하거나 숫자 뒤에 n을 붙여 값을 생성할 수 있다. (ex, 1234234n)
  
  

🔸 String

• String('123') : 문자열 변환
• str.split('') : 문자열을 잘라서 각 배열에 입력. '' 내부에 값을 넣으면 해당 값을 기준으로 잘라서 배열에 넣어준다.
• Array.join('') : 문자열을 합친다. '' 내부에 값을 넣으면 사이사이에 해당 값을 추가한다.
• [...str] : 앞에 ... 을 붙여서 배열로 문자열을 변환한다.
  
  

🔷 Template Literals

템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴이다. 여러 줄로 이루어진 문자열과 문자 보간 (개행) 기능을 사용할 수 있다. 이중 따옴표나 작은 따옴표 대신 백틱을 이용하며, 플레이스 홀더를 이용해 표현식을 넣을 수 있다. 이는 $ {expression} 으로 표기할 수 있다.

1. 자유로운 멀티라인

템플릿 리터럴의 경우 이스케이프 줄바꿈을 사용하지 않더라도, `` <- 백틱을 이용해 줄바꿈을 표현할 수 있다.

const multiLine = `
1
2
3
4
`

처럼 작성하면 개행된 형태로 값을 주고 받을 수 있다.


2. Basic String Formatting

보간법을 활용해 표현식이나 문자열을 포함할 수 있다.

function genHello(name) {
	return '안녕하세요, ' + name + '님 반갑습니다.'
}

function genHello(name) {
	return '안녕하세요, ${name} 님 반갑습니다.'

3. HTML Escaping

XSS, SQL Injection 같은 공격에서 안전한 HTML 문서를 작성할 수 있도록 돕는다.

const htmlTemplate = '<div>' + '안녕하세요' + '</div>'
body.innerHTML = htmlTemplate;

위처럼 HTML 태그를 멋대로 삽입하는 것을 막을 수 있다.

🔷 InstanceOf

instanceof 연산자는 생성자의 프로토타입 속성이 객체의 프로토타입 체인 어딘가 존재하는지 판별할 때 사용한다.

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}
const auto = new Car('Honda', 'Accord', 1998);

console.log(auto instanceof Car);
// expected output: true

console.log(auto instanceof Object);
// expected output: true

// MDN

이걸 정리하기 전에 인스턴스란 무엇인지 정리를 하고 싶은데 이걸 명확히 뭐라고 글로 정리할 수 있을지 잘 모르겠지만 내가 알고 있는 인스턴스란 이렇다. … 객체의 프로토타입을 이용해 만들어 낸… 새로운 객체…? 위 예제의 function Car은 객체의 프로토타입이다. (여러 객체를 만들어 낼 수 있는 구조틀 같은 거라고 생각하면 될 것 같다.) 이 원본 프로토타입을 이용해 auto = new Car() 이라는 새로운 객체를 만들 수 있다. 이 뿐만 아니라 수많은 객체를 만들어 낼 수 있다.

프로토타입 체인~ 부분은 조금 더 자세히 공부해야 알겠지만 instanceOf 라는 건 auto 라는 생성자가 Car 이라는 원본을 이용해 만들어진 객체인지 아닌지 판별할 때 사용된다. auto 는 객체이기도 하니 당연히 Object 에도 해당된다.