Javascript 문자 자료형

자바스크립트는 특정 값이 할당된 변수에, 다른 자료형의 값을 넣는 것이 가능하다.

자바스크립트는 다음과 같은 자료형이 있다.

1) undefined, 언디파인드
2) number
3) string
4) boolean
5) function
6) object

자료형을 확인할 수 있는 연산자는 typeof 를 사용할 수 있다.

01. 문자열 (string) 데이터

문자 자료형인 string에는 큰 따옴표와 작은 따옴표 모두 사용 가능하다.

let word = '안녕하세요! 🙂'; // 작은 따옴표
let word2 = "반갑습니다~ 👋"; // 큰 따옴표

문자열 안에 따옴표를 사용할 때는 서로 다른 따옴표를 사용해야 한다.
작은따옴표안에 작은따옴표를, 큰따옴표 안에 큰따옴표를 사용할 수 없다.

let word1 = '작은따옴표 안에 "큰따옴표" 사용';
let word2 = "큰따옴표 안에 '작은따옴표' 사용";

📌 자주 사용되는 이스케이프 표현

이스케이프 표현	대체
\'	작은따옴표
\"	큰따옴표
\n	줄바꿈
\t	탭
\	백슬래시

// ⭐️ 이스케이프 표현(escape sequence)
let word1 = '작은따옴표 안에 \'작은따옴표\' 사용';
let word2 = <"큰따옴표 안에 \"큰따옴표\" 사용";
console.log(word1, word2);

👉 이스케이프 표현 MDN문서

백틱 ``

let word = `안녕하세요~		반갑습니다!
저는 \\홍길동\\입니다.`;

따옴표 대신 백틱을 사용하면 백틱 안에 사용한 줄바꿈이나 탭 등이 이스케이프 표현 없이도 그대로 적용된다.

템플릿 리터럴

const NAME = '홍길동';
let age = 20;
let married = false;

console.log(
`제 이름은 ${NAME}, 나이는 ${age}세구요, \
${married ? '기혼' : '미혼'}입니다.`
);

=> "제 나이는 홍길동, 나이는 20세구요,
미혼입니다."

백틱 안에 템플릿 리터럴을 사용하여 ${} 안에 변수, 상수, 표현식 등을 삽입하여 사용 가능하고 다른 자료형에서도 사용할 수 있다.

02. 문자열 연산자

연산자	의미 - ⭐️ 반환하는 여부	권장
x == y	값이 같다.
x === y	자료형도 값도 같다.	권장
x != y	값이 다르다.
x !== y	자료형 또는 값이 다르다.	권장
x < y	사전순상 x가 먼저 온다.
x <= y	사전순상 x가 먼저 오거나 같다.
x > y	사전순상 y가 먼저 온다.
x >= y	사전순상 y 먼저 오거나 같다.

연결 연산자

연산자	의미 - ⭐️ 반환하는 여부	부수효과
x + y	x와 y를 이어붙인 값을 반환
x += y	x에 y를 이어붙이고 그 결과를 반환	O

// + 사용하기
let str1 = 'Hello';
let str2 = ' ' + 'World';
let str3 = str1 + str2;

// +- 사용하기
let str1 = '헬로';
str1 += ' 월드';

let str2 = str1 += '~~~';

// 중요!
// ⚠️ 오류. 왼쪽 값은 부수효과의 대상(변수)이어야 함
let str = '헬로' += '월드';

const STR = '안녕~';
STR += ' 반가워요!';

+- 연결 연산자의 왼쪽(앞)에는 변수(let)만 사용 가능하다.

📌 다른 자료형들과 더하면 문자열로 반환됨

let result = '안녕' + 1 + true;

console.log(result); // =>안녕1true
console.log(typeof result); // => string