Basic Data Types
기본 자료형 3가지:
숫자형(Number), 문자열(String), 불린형(Boolean)과 각 자료형에 사용하는 연산자
숫자형(Number)
정수와 소수를 숫자형이라고 합니다.
선언
let i = 1;
let j = 1.5;
let k = -3;수학 연산
대부분의 수학 연산은 파이썬과 완전히 똑같습니다. 유일한 예외 케이스는 파이썬의 버림 나눗셈(//)인데요. 자바스크립트에는 버림 나눗셈이 따로 없습니다. //는 버림 나눗셈이 아닌 코멘트로 인식되니까 유의해 주세요.
/* 덧셈 */
console.log(1 + 8); // 9
/* 뺄셈 */
console.log(6 - 7); // -1
/* 곱셈 */
console.log(2 * 2); // 4
/* 나눗셈 */
console.log(4 / 2); // 2
console.log(3 / 2); // 1.5
/* 나머지 */
console.log(7 % 3); // 1
/* 거듭제곱 */
console.log(2 ** 3); // 8
/* 버림 나눗셈은 없음 */
console.log(3 // 2); // //가 코멘트로 인식됨수학 + 할당 연산자
파이썬과 마찬가지로 수학 연산과 할당 연산을 동시에 할 수 있습니다.
let i = 3;
i += 2;
console.log(i); // 5
let j = -5;
j *= 3;
console.log(j); // -15
증가, 감소 연산자
파이썬에는 없는 연산자인데요. 1을 증가하거나 감소할 때는 더 간결하게 ++와 --를 사용할 수 있습니다.
let i = 5;
i++; // i += 1과 똑같음
console.log(i); // 6
i--; // i -= 1과 똑같음
console.log(i); // 5특히 반복문에서는 숫자를 1증가하거나 감소할 때가 많은데요. 그럴 때 사용하면 좋습니다.
/* 1부터 10까지 출력하는 반복문 */
let i = 1;
while (i <= 10) {
console.log(i);
i++;
}1
2
3
4
5
6
7
8
9
10
문자열(String)
글자 데이터를 문자열이라고 합니다.
선언
파이썬처럼 큰따옴표(")를 사용해도 되고, 작은따옴표(')를 사용해도 됩니다.
/* 큰따옴표 */
let str1 = "Hello World!";
/* 작은따옴표 */
let str2 = 'Hello World';문자열 붙이기 (concatenation)
파이썬에서는 덧셈 연산(+)을 이용해서 문자열을 쉽게 붙일 수 있었는데요. 자바스크립트도 마찬가지입니다.
/* 문자열 붙이기 */
console.log('Hello ' + 'Codeit!'); // Hello Codeit!
/* 문자열 변수 붙이기 */
let x = 'Hello ';
let y = 'Codeit!';
console.log(x + y); // Hello Codeit!
/* 문자열에도 더하기 할당 연산자 사용 가능 */
x += y;
console.log(x); // Hello Codeit!그리고 파이썬처럼 문자열이 아닌 다른 자료형도 문자열로 바꿔서 연결해 줍니다.
let first = '치즈버거 가격은 ';
let second = 8000;
let third = '원입니다.';
console.log(first + second + third); // 치즈버거 가격은 8000원입니다.
문자열 포매팅 (템플릿 문자열)
파이썬에서는 str.format() 또는 f-string을 사용해서 문자열 사이사이에 변숫값을 넣었는데요. 자바스크립트도 비슷한 문법이 있습니다. 문자열을 백틱(```) 기호로 선언하고, 변수를 ${}로 감싸주면 됩니다.
let name = "서준"
let greeting = `안녕하세요 ${name} 님!`;
console.log(greeting); // 안녕하세요 서준 님!
let i = 8;
let j = 13;
let message = `${i} 더하기 ${j}는 ${i + j}입니다.`;
console.log(message); // 8 더하기 13은 21입니다.
특수 문자열
특정 문자들은 그대로 입력하면 안 되고 특수 문자열을 사용해야 합니다. 파이썬에서는 줄바꿈(\\n), 작은따옴표(\\'), 큰따옴표(\\") 같은 것들이 있었는데요. 자바스크립트도 똑같은 특수 문자열을 사용합니다. 아래는 자주 사용하는 특수 문자열들입니다.
| \n | 줄바꿈 |
|---|---|
| \t | 탭 |
| ' | 작은따옴표 |
| " | 큰따옴표 |
| \ | 백슬래시 |
console.log('특정 문자들은 앞에\\n백슬래시(\\\\)를 붙여줘야 합니다.');
특정 문자들은 앞에
백슬래시(\\)를 붙여줘야 합니다.
작은따옴표나 큰따옴표는 문자열에 사용한 따옴표와 다르면 특수 문자열을 사용하지 않아도 됩니다.
console.log('작은따옴표 안에서는 "를 그냥 사용할 수 있습니다.');
console.log("큰따옴표 안에서는 '를 그냥 사용할 수 있습니다.");
console.log(`백틱 안에서는 '와 "를 그냥 사용할 수 있습니다.`);
console.log('작은따옴표 안에서 '를 사용하면 문자열이 중간에 끝나기 때문에 오류가 납니다.');
작은따옴표 안에서는 "를 그냥 사용할 수 있습니다.
큰따옴표 안에서는 '를 그냥 사용할 수 있습니다.
백틱 안에서는 '와 "를 그냥 사용할 수 있습니다.
Uncaught SyntaxError: missing ) after argument list
불린형(Boolean)
불린형은 참(true)과 거짓(false) 둘 중 하나의 값을 가지는 데이터입니다.
선언
자바스크립트에서는 true와 false에 소문자를 사용합니다.
let x = true;
let y = false;
비교 연산자
파이썬과 비슷하지만 일치, 불일치는 등호 기호를 하나 더 씁니다.
- 파이썬:
==,!= - 자바스크립트
===,!==
/* 초과, 미만, 이상, 이하 */
console.log(2 > 1); // true
console.log(2 < 1); // false
console.log(3 >= 2); // true
console.log(3 <= 3); // true
/* 일치, 불일치 */
console.log(3 === 3); // true
console.log(3 !== 3); // false
console.log('Codeit' === 'Codeit'); // true
console.log('Codeit' === 'Codeeat'); // false
===과 ==
사실 자바스크립트에도 == 연산자가 있는데요. == 연산자는 자동으로 형 변환(type conversion)을 해줍니다.
/* == */
console.log('3' == 3); // true
/* === */
console.log('3' === 3); // false
문자열 '3'을 알아서 숫자형 3으로 바꿔서 비교한 거죠. 반면 ===는 값을 그대로 비교하기 때문에 false가 출력됩니다.
자동으로 형 변환을 해주면 편한 면도 있지만, 언제 형 변환을 해주는지, 어떻게 변환을 해주는지를 정확히 이해하고 있지 못하면 예상치 못한 결과가 나올 수 있기 때문에 ===을 사용하시는 걸 추천드립니다.
조합 연산자
파이썬에서는 불린 값을 조합할 수도 있었습니다.
# 두 값이 모두 참이어야 참
print((1 < 2) and (3 == 3)) # True
print((2 < 1) and (3 == 3)) # False
# 두 값 중 하나만 참이어도 참
print((1 < 2) or (3 == 3)) # True
print((2 < 1) or (3 == 3)) # True
# 값 부정
print(not (1 < 2)) # False
print(not (2 < 1)) # True
자바스크립트에서도 불린 값을 조합할 수 있는데, and, or, not 단어 대신 &&, ||, ! 기호를 사용합니다.
/* 두 값이 모두 참이어야 참 */
console.log((1 < 2) && (3 === 3)); // true
console.log((2 < 1) && (3 === 3)); // false
/* 두 값 중 하나만 참이어도 참 */
console.log((1 < 2) || (3 === 3)); // true
console.log((2 < 1) || (3 === 3)); // true
/* 값 부정 */
console.log(!(1 < 2)); // false
console.log(!(2 < 1)); // true