학습 목표
- 데이터 타입이 무엇인지 이해한다.
- JavaScript의 데이터 타입 중 Number, String, Boolean이 있다는 것을 기억한다.
- Number 타입에 사용가능한 연산자를 사용하여 간단한 연산을 console에 출력할 수 있다.
- Math 내장 매서드 중 Math.floor(), Math.sqrt() 등에 대해 설명할 수 있다.
+
연산자로 문자열과 문자열을 합칠 수 있다.- 문자열의 길이를 조회할 수 있다.
- Boolean타입의 두 가지 값인 true와 false를 이해한다.
- 비교연산자(===)와 논리연산자(!, &&, ||)를 이해한다.
타입(type)이란 값(value)의 종류이며, 코드를 다룸에 있어서 각 값을 분류하는데에 큰 도움이 됨
정보를 전달하기 위해서 다양한 표현 사용하는데 자주 쓰는 표현은 분류가 필요
JavaScript의 모든 값은 타입을 가지고 있고, 각 타입은 고유한 속성과 메서드를 가짐(효율적으로 값을 변경하거나 다룰 수 있음)
자바스크립트 타입 목록
목록 | |
---|---|
원시 자료형 | 숫자, 문자열, 불린, undefined, null 등 |
참조 자료형 | 함수, 배열, 객체 등 |
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.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
String(문자열)은 인간의 언어, 자연어를 JavaScript에서 표현하기 위한 데이터 타입
따옴표(’), 큰따옴표(”), 백틱(`)으로 감싸서 작성
한자나 이모지와 같은 특수문자도 문자열로 만들 수 있고, 숫자와 문자를 조합해서 문자열로 만들 수도 있음
특히 백틱으로 만든 문자열은 줄바꿈도 가능
'사과'
"JavaScript"
"欢迎你"
"😇"
"최초의 JavaScript는 Netscape의 Brendan Eich에 의해 만들었다."
`JavaScript (줄여서 JS)는 일급 함수를 사용하는 가벼운 객체 지향 인터프리터 언어이며
웹페이지의 스크립트 언어로 잘 알려져 있지만, 브라우저가 아닌 환경에서도 많이 사용된다.
프로토타입 기반, 다중 패러다임 스크립트 언어이며, 동적이고 명령어, 객체 지향, 함수 프로그래밍
스타일을 지원한다.`
+
로 문자열을 이어 붙일 수 있으며, 문자열과 문자열을 이어 붙일 때의 +
는 문자열 연결 연산자로써 쓰임
다른 타입과 이어 붙이려고 하면 모두 문자열로 변함
특히, 숫자와 이어 붙이기 조심
위 이유로 가능하면 다른 타입 간의 연산을 하지 않도록 조심
"안녕하세요" + "!!"; // 안녕하세요!!
"감사합니다." + " " + "🙏" // 감사합니다. 🙏
1 + "1" // 11
문자열의 길이를 확인할 수 있음
문자열 값에 .length
를 붙임
console.log('欢迎你'.length); // 3
console.log('최초의 JavaScript는 Netscape의 Brendan Eich에 의해 만들었다.'.length); // 48
문자열의 각 문자는 순서를 가지고 있으며,
각 문자가 몇 번째에 위치하는지 인덱스(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()
가 조금 헷갈려서 찾아보니까 시작점에서 자름
slice(0, 6)
했을 때, 공백이 포함이 되는가trim()
)car.split(' ')[0]
- 공백 기준으로 첫번째 문자 가져오라고 할 수 있음indexOf()
: 문자열 내에 특정 문자나 문자가 몇 번째 위치하는지 확인'🍎🍓🍉🍇'.indexOf('🍎'); // 0
'🍎🍓🍉🍇'.indexOf('🖥'); // -1
'최초의 JavaScript는 Netscape의 Brendan Eich에 의해 만들었다.'.indexOf('Eich'); // 34
'최초의 JavaScript는 Netscape의 Brendan Eich에 의해 만들었다.'.indexOf('Dahl'); // -1
'🍎🍓🍉🍇'.includes('🍎'); // true
'🍎🍓🍉🍇'.includes('🖥'); // false
'최초의 JavaScript는 Netscape의 Brendan Eich에 의해 만들었다.'.includes('Eich'); // true
'최초의 JavaScript는 Netscape의 Brendan Eich에 의해 만들었다.'.includes('Dahl'); // false
Boolean(불리언)은 사실 관계를 구분하기 위한 타입
불리언 타입의 값은 true 혹은 false 둘 중 하나
falsy 값 : 불리언 타입은 아니지만 자바스크립트에서 false
로 여겨지는 일부 값
truthy 값 : true
로 여겨지는 값
* truthy 값은 매우 많기 때문에 falsy 값을 암기하여 구분
// 대표적인 falsy 값
false
0
-0
0n
""
''
``
null
undefined
NaN
두 값이 같은지 다른지 확인할 때 유용
===
, !==
: 엄격한 동치 연산자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보다 작거나 같다."는 거짓)
두 값 간의 논리 관계를 확인
||
: 논리합(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
!0 // true
!'' // true
!1 // false
!'코드스테이츠' // false