S1_U5_CH2. 타입

Judevv·2023년 4월 18일

코드스테이츠 SEB FE BOOTCAMP

목록 보기

14/55

Chapter 2. 타입

학습 목표

데이터 타입이 무엇인지 이해한다.

JavaScript의 데이터 타입 중 Number, String, Boolean이 있다는 것을 기억한다.

Number 타입에 사용가능한 연산자를 사용하여 간단한 연산을 console에 출력할 수 있다.

Math 내장 매서드 중 Math.floor(), Math.sqrt() 등에 대해 설명할 수 있다.

+ 연산자로 문자열과 문자열을 합칠 수 있다.

문자열의 길이를 조회할 수 있다.

Boolean타입의 두 가지 값인 true와 false를 이해한다.

비교연산자(===)와 논리연산자(!, &&, ||)를 이해한다.

타입(type)이란 값(value)의 종류이며, 코드를 다룸에 있어서 각 값을 분류하는데에 큰 도움이 됨

정보를 전달하기 위해서 다양한 표현 사용하는데 자주 쓰는 표현은 분류가 필요

JavaScript의 모든 값은 타입을 가지고 있고, 각 타입은 고유한 속성과 메서드를 가짐(효율적으로 값을 변경하거나 다룰 수 있음)

자바스크립트 타입 목록

	목록
원시 자료형	숫자, 문자열, 불린, undefined, null 등
참조 자료형	함수, 배열, 객체 등

2-1. Number 타입

Number 타입은 숫자를 자바스크립트에서 표현하기 위한 타입
정수(integer)와 실수(float) 모두 표현 가능

100; // 정수를 표현할 수 있습니다.
-100; // 음수를 표현할 수 있습니다.
100.123; // 실수를 표현할 수 있습니다.

typeof 연산자로 해당 값이 숫자 타입인지 확인할 수 있음

typeof 100; // 'number'
typeof -100; // 'number'
typeof 100.123; // 'number'

같은 숫자 값 간에는 간단한 사칙연산이 가능하며, + - * / 를 자바스크립트에서는 산술 연산자(arithmetic operator)라고 함

console.log(1 + 2); // 3
console.log(1 - 2); // -1
console.log(1 * 2); // 2
console.log(1 / 2); // 0.5
console.log(9 % 2); // 1 (9를 2로 나눈 나머지 구하기)

Math 내장 객체

좀더 복잡한 계산을 위해서 사용

Math 내장 객체의 대표적인 메서드
- Math.floor(): 괄호 안의 숫자를 내림하여 반환
- Math.ceil(): 괄호 안의 숫자를 올림하여 반환
- Math.round(): 괄호 안의 숫자를 반올림하여 반환
- Math.abs(): 괄호 안의 숫자의 절대값을 반환
- Math.sqrt(): 괄호 안의 숫자의 루트값을 반환
- Math.pow() : 괄호 안의 첫 번째 숫자를 밑, 두 번째 숫자를 지수인 숫자를 반환

Math.floor(100.621); // 100
Math.ceil(100.621);  // 101
Math.round(100.621); // 101
Math.round(100.421); // 100
Math.abs(-100); // 100
Math.abs(100); // 100
Math.sqrt(4); // 2
Math.sqrt(2); // 1.4142135623730951
Math.pow(2, 5); // 32

2-2. String 타입

String(문자열)은 인간의 언어, 자연어를 JavaScript에서 표현하기 위한 데이터 타입
따옴표(’), 큰따옴표(”), 백틱(`)으로 감싸서 작성

한자나 이모지와 같은 특수문자도 문자열로 만들 수 있고, 숫자와 문자를 조합해서 문자열로 만들 수도 있음

특히 백틱으로 만든 문자열은 줄바꿈도 가능

'사과'
"JavaScript"
"欢迎你"
"😇"
"최초의 JavaScript는 Netscape의 Brendan Eich에 의해 만들었다."
`JavaScript (줄여서 JS)는 일급 함수를 사용하는 가벼운 객체 지향 인터프리터 언어이며 
웹페이지의 스크립트 언어로 잘 알려져 있지만, 브라우저가 아닌 환경에서도 많이 사용된다.
프로토타입 기반, 다중 패러다임 스크립트 언어이며, 동적이고 명령어, 객체 지향, 함수 프로그래밍
스타일을 지원한다.`

+ 로 문자열을 이어 붙일 수 있으며, 문자열과 문자열을 이어 붙일 때의 + 는 문자열 연결 연산자로써 쓰임

다른 타입과 이어 붙이려고 하면 모두 문자열로 변함

특히, 숫자와 이어 붙이기 조심

위 이유로 가능하면 다른 타입 간의 연산을 하지 않도록 조심

"안녕하세요" + "!!"; // 안녕하세요!!
"감사합니다." + " " + "🙏" // 감사합니다. 🙏
1 + "1" // 11

문자열의 length 속성

문자열의 길이를 확인할 수 있음

문자열 값에 .length를 붙임

console.log('欢迎你'.length); // 3
console.log('최초의 JavaScript는 Netscape의 Brendan Eich에 의해 만들었다.'.length); // 48

인덱스(Index)

문자열의 각 문자는 순서를 가지고 있으며,

각 문자가 몇 번째에 위치하는지 인덱스(Index)로 확인할 수 있음

첫 번째 문자의 인덱스는 0

JavaScript는 우리 일상생활에서 순서를 셀 때 0부터 세는 점을 주의(Zero-based numbering)

let str = 'codestates';
console.log(str[0]); // 'c'
console.log(str[4]); // 's'

문자열 주요 메서드

toLowerCase() : 문자열을 소문자로 변경
toUpperCase() : 문자열을 대문자로 변경
concat() : 문자열 연결 연산자 +처럼 문자열을 이어 붙일 수 있음
slice() : 문자열의 일부를 자를 수 있음

'HELLO WORLD'.toLowerCase(); // 'hello world'
'hello world'.toUpperCase(); // 'HELLO WORLD'
'hello '.concat('world'); // 'hello world'
'hello world'.slice(0, 5); // 'hello'

💡 slice()가 조금 헷갈려서 찾아보니까 시작점에서 자름

0번째 시작점은 h 앞이니까 h부터 시작하고, 5의 시작점은 공백의 시작이니까 o까지 자름
여기서 의문점 그럼 slice(0, 6) 했을 때, 공백이 포함이 되는가
- 공백 포함됨
- 예를 들면, 아이디값 사이에 공백이 있는지를 확인해야하기 때문에... (trim())
- 예를 들면, car.split(' ')[0] - 공백 기준으로 첫번째 문자 가져오라고 할 수 있음

indexOf() : 문자열 내에 특정 문자나 문자가 몇 번째 위치하는지 확인
- 만약 찾는 문자가 2개 이상일 경우, 가장 앞에 있는 문자의 인덱스를 조회
- 포함되어 있지 않으면 -1을 반환

'🍎🍓🍉🍇'.indexOf('🍎'); // 0
'🍎🍓🍉🍇'.indexOf('🖥'); // -1
'최초의 JavaScript는 Netscape의 Brendan Eich에 의해 만들었다.'.indexOf('Eich'); // 34
'최초의 JavaScript는 Netscape의 Brendan Eich에 의해 만들었다.'.indexOf('Dahl'); // -1

includes() : 문자열 내에 특정 문자나 문자가 포함되어 있는지 확인

'🍎🍓🍉🍇'.includes('🍎'); // true
'🍎🍓🍉🍇'.includes('🖥'); // false
'최초의 JavaScript는 Netscape의 Brendan Eich에 의해 만들었다.'.includes('Eich'); // true
'최초의 JavaScript는 Netscape의 Brendan Eich에 의해 만들었다.'.includes('Dahl'); // false

2-3. Boolean 타입

Boolean(불리언)은 사실 관계를 구분하기 위한 타입

불리언 타입의 값은 true 혹은 false 둘 중 하나

falsy

falsy 값 : 불리언 타입은 아니지만 자바스크립트에서 false로 여겨지는 일부 값

truthy 값 : true로 여겨지는 값

	* truthy 값은 매우 많기 때문에 falsy 값을 암기하여 구분

// 대표적인 falsy 값
false
0
-0
0n
""
''
``
null
undefined
NaN

비교연산자(comparison operator)

두 값이 같은지 다른지 확인할 때 유용

===, !== : 엄격한 동치 연산자
- 두 피연산자의 값과 타입이 같으면 true, 다르면 false를 반환
- 보이는 값이 같아도, 두 값의 타입이 다르면 false

123 === (100 + 23); // true ("123의 값과 100 + 23의 값은 같다."는 사실이기 때문에 true)
123 === '123'; // false ("123의 값과 '123'의 값은 같다."는 사실이 아니기 때문에 false)
123 !== (100 + 23); // false ("123의 값과 100 + 23의 값은 같지 않다."는 사실이기 아니기 때문에 false)
123 !== '123'; // true ("123의 값과 '123'의 값은 같지 않다."는 사실이기 때문에 true)

==, != : 느슨한 동치 연산자
- 대체로 타입이 달라도 값이 같으면 true, 다르면 false 반환
- 느슨하게 동치 여부를 판단하기 때문에 예외가 많음(현대 웹 개발에서는 사용 권장하지 않음)
- 다른 프로그래밍에서는 ==, !=를 주로 사용하지만, JavaScript에서는 ===, !==로 비교
>, <, >=, <= : 대소 관계 비교 연산자
- 두 피연산자 값의 크기를 비교 / 수학 부등호 기호와 유사

100 > 200; // false ("100은 200보다 크다."는 거짓)
200 > 100; // true ("200은 100보다 크다."는 참) 
100 >= 100; // true ("100은 100보다 크거나 같다."는 참)
200 <= 100; // false ("200은 100보다 작거나 같다."는 거짓)

논리연산자(logicla operator)

두 값 간의 논리 관계를 확인

|| : 논리합(OR)

두 값 중 하나만 true여도 true로 판단

true || false; // true
false || true; // true
100 > 200 || 200 > 100; // true ("100은 200보다 크다" 혹은 "200은 100보다 크다" 중 하나는 true)

두 값이 모두 false면 false로 판단

false || false // false
200 < 100 || 20 < 10; // false

&& : 논리곱(AND)

두 값이 모두 true면 true로 판단

true && true // true
200 > 100 && 20 > 10; // true

두 값 중 하나만 false여도 false로 판단

true && false // false
false && true // false
100 > 200 && 200 > 100; // false

논리 부정 연산자(!)의 경우, 사실 관계를 반대로 표현

! : 부정(NOT)
- 오른쪽 피연산자와 반대의 사실을 반환
```
!true // false
!(100 > 200) // true
```
- falsy, truthy의 반대 값을 반환
```
!0 // true
!'' // true
!1 // false
!'코드스테이츠' // false
```