[#02-1] [Pre-OnBoarding] 자료형
기본 자료형
프로그래밍에서 처리할 수 있는 모든 것을 "자료"라고 부르며, 자료 형태에 따라 나누어 놓은 것을
자료형 이라고 한다.
JS에서 가장 기본적이면서도 많이 사용되는 자료형은 숫자(number), 문자열(string), 불(boolean) 자료형이다.
문자열 자료형
"Hello" // "" or '' 감싼것을 '문자열'이라고 한다.
"안녕하세요"
큰 따옴표와 작은 따옴표 섞어 사용하기
'this is "string"' // this is "string"
"this is 'string'" // this is 'string'
따옴표를 문자 그대로 사용하고 싶다면, 따옴표 앞에 특수한 기능을 수행하는 이스케이프 문자( \ )를 사용한다.
"this is \"string\"" // this is "string"
'this is \'string\'' // this is 'string'
이스케이프 문자 이외에도 여러가지 특수 기능이 있다.
| - \n : // 줄바꿈을 의미 - \t : // 탭을 의미 - \\ : // 역슬레시(\) 그 자체를 의미 |
이스케이프 문자 예시
console.log('동해물과 백두산이\n마르고 닳도록');
// 동해물과 백두산이
// 마르고 닳도록
console.log('이름\t나이\t지역');
// 이름 나이 지역console.log('\\ \\ \\ \\ '); // \ \ \ \
문자열 연산자
문자열 사이에 덧셈 기호를 문자열 연결 연산자라고 한다.
문자열 + 문자열 // 문자열 연결 연산자'가나다' + '라마' + '바사아' + '자차카타' + '파하'
// 가나다라마바사아자차카타파하
문자열 내부에 문자 하나를 선택할 때는 문자 선택 연산자를 사용합니다.
문자열[숫자]'안녕하세요'[0] // '안'
'안녕하세요'[1] // '녕'
'안녕하세요'[2] // '하'
문자열 길이 구하기
"안녕하세요".length // 5
"자바스크립트".length // 6
"".length // 0
Error: Uncaught SyntaxError: Unexpected identifier 'string'
'this is 'string'' // error
숫자 자료형
자바스크립트는 소수점이 있는 숫자와 없는 숫자를 모두 같은 자료형으로 인식합니다.
숫자를 입력하면 숫자 자료가 만들어집니다.
273 // 273
3.14 // 3.14
숫자 연산자(산술 연산자)
| Operator | Name | Purpose | Example |
| + | 더하기 연산자 | 두 개의 숫자를 더합니다. | 6 + 9 |
| - | 빼기 연산자 | 왼쪽에 있는 수를 오른쪽 수로 뺍니다. |
20 - 15 |
| * | 곱하기 연산자 | 두 개의 숫자를 곱합니다. | 3 * 7 |
| / | 나누기 연산자 | 왼쪽의 숫자를 오른쪽 숫자로 나눠서 몫을 구합니다. |
10 / 5 |
| % | 나머지 연산자 | 왼쪽의 숫자를 오른쪽 숫자로 나눠서 나머지를 구합니다. |
8 % 3 ( 2를 반환합니다, 8을 3으로 나눴을 때 몫이 2이기 때문입니다.) |
자바스크립트는 숫자자료형을 연산할 때 연산자 우선순위를 고려한다. 즉, 사칙연산을 따른다. (아래의 예시 참고)
console.log(5 + 3 * 2) // 11
console.log(5 + 3) * 2 // 16
불(Boolean) 자료형
Boolean은 참(true) or 거짓(false)을 표현하는 자료형이다. true와 false 2가지이다.
console.log(true) // true
console.log(false) // false숫자 자료형과 문자열에 false 값을 나타내는 것이 있고, 이 외에 다른 false 값을 알아보자.
console.log(Boolean("")) // false
console.log(Boolean(0)) // false
console.log(Boolean(null)) // false
console.log(Boolean(undefined)) // false
console.log(Boolean(NaN)) // false
비교 연산자
| 연산자 | 설명 |
| === | 양쪽이 같다. |
| !== | 양쪽이 다르다. |
| > | 왼쪽이 더 크다. |
| < | 오른쪽이 더 크다. |
| >= | 왼쪽이 더 크거나 같다. |
| <= | 오른쪽이 더 크거나 같다. |
| [더 알아보기] - 동등연산자(==): 단순히 값만 비교 - 일치연산자(===): 값과 자료형까지 비교, 더 엄격하다. |
코드예시
52 > 273 // false
52 < 273 // true
10 === 10 // true
'가방' > '하마' // false
Boolean 사용 예시
if(불 표현식) {
// 불 표현식이 참일 때 실행할 문장
}
Boolean 표현식 이해하기
if (2 < 3) {
alert('3은 2보다 큽니다.')
} // 실행결과: 3은 2보다 큽니다.
if (2 > 3) {
alert('3은 2보다 큽니다.')
} else {
alert('2는 3보다 작습니다.')
} // 실행결과: 2는 3보다 작습니다.
boolean 부정 연산자
!true // false
!false // true
!!true // true
!!false // false
단항 연산자
!true // false, 피연산자가 true로 1개이항 연산자
10 + 20 // 30, 피연산자가 10과 20으로 2개삼항 연산자
true ? 10 : 20 // 10, 피연산자가 true, 10, 20으로 3개
Boolean 논리합 / 논리곱 연산자
불에는 논리합 연산자와 논리곱 연산자를 적용할 수 있다.
| 연산자 | 설명 |
| && | 논리곱 연산자 |
| || | 논리합 연산자 |
&& 연산자는 양쪽 변의 값이 모두 true일 때 true를 결과로 낸다. 이 외에는 모두 false이다.
쉬운 이해를 위한 예시> "사과 그리고 배 가져와!"
| 좌변 | 우변 | 결과 |
| true | true | true |
| true | false | false |
| false | true | false |
| false | false | false |
|| 연산자는 양쪽 변의 값 중 하나만 true여도 true를 결과로 냅니다.
쉬운 이해를 위한 예시> "사과 또는 배 가져와!"
| 좌변 | 우변 | 결과 |
| true | true | true |
| true | false | true |
| false | true | true |
| false | false | false |
// &&연산자
console.log(true && true) // true
console.log(true && false) // false
console.log(false && true) // false
console.log(false && false) // false
true && console.log('hello') // hello
// ||연산자
console.log(true || true) // true
console.log(true || false) // true
console.log(false || true) // true
console.log(false || false) // false
false || console.log('hello') // hello
자료형 검사
typeof(자료)지금까지 배웠던 문자열, 숫자, 불이 어떻게 출력되는지 확인해봅시다.
typeof('문자열') // "string"
typeof(273) // "number"
typeof(true) // "boolean"
typeof '문자열' // "string"
typeof 273 // "number"typeof 10 === 'number' // true
템플릿 문자열
템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴이다.
`string text ${expression} string text`
// 연결 연산자 사용
console.log('문제: 2 + 3은? ' + (2 + 3) + '입니다.') // 문제: 2 + 3은? 5입니다.
// 템플릿 문자열 사용
console.log(`문제: 2 + 3은? ${2 + 3}입니다.`) // 문제: 2 + 3은? 5입니다.