1. 문자형 String
const name1 = "Mike"; //큰 따옴표(double quoto)
const name2 = 'Mike'; //작은 따옴표(single quoto)
const name3 = `Mike`; //백틱(backtick)
const message = "I'm a boy";
const message2 = 'I\\'m a boy';
const message3 = `My name is ${name}`;
const message4 = `나는 ${30-2}`살 입니다.`;
문자형은 위에서 보는 것과 같이 3가지로 사용이 가능하며,
message2처럼 작은 따옴표를 사용하고 싶을 때에는 '\'를 앞에 넣어주면 특수문자로 인식한다.
백틱은 문자열 내부에 변수를 넣을 때 편리하다.
2. 숫자형
const age = 28; //숫자형 Number
const PI = 3.14;
console.log(1 + 2); // 더하기
console.log(9 - 3); // 빼기
console.log(3 * 2); // 곱하기
console.log(6 / 3) // 나누기
console.log(6 % 4) // 나머지(나머지값을 반환)
숫자는 정수와 실수 모두 가능하다.
3. 무한대와 NaN
const x = 1 / 0;
console.log(x);
const name = "Mike";
const y = name/2;
console.log(y); // NaN = Not a number
위와 같이 1을 0으로 나누게 되면 Infinity라고 뜬다. '무한대'라는 의미이다.
문자열(String)을 숫자로 나누면 NaN가 나타나는데 '숫자가 아니라는 뜻'이다.
4. boolean
const a = true; //참
const b = false; //거짓
const name = "Mike";
const age = 28;
console.log(name == "Mike"); //true
console.log(age > 40); //false
boolean은 논리적인 요소를 나타내며, 참과 거짓으로 구분된다.
위의 console.log와 같이 name은 Mike이므로 true이며, age는 40보다 작으므로 false이다.
null과 undefined
null은 존재하지 않는 값을 의미하며, undefined은 값이 할당되지 않았다는 것을 의미한다.
let age;
let user = null //유저는 존재하지않는다는 의미
변수를 할당하고 값이 존재하지 않을 때, undefined가 나타난다.
5. typeof 연산자
const name = "Mike";
console.log(typeof 3); //number
console.log(typeof name); //string
console.log(typeof true); //boolean
console.log(typeof "xxx"); //string
console.log(typeof null); //object
console.log(typeof undefined); //undefined
typeof 연산자의 경우 타입을 알려주며, 보통 다른 개발자가 작성한 타입을 알아야 하거나 API에서 받아온 데이터를 타입에 따라 다르게 처리해야 할 때 사용된다.
위에서 null의 경우 object가 나오는데 "객체형"이라는 의미이다. 하지만 null은 객체가 아니다.
Tip
const name = "Mike";
const message = `My name is ${name}`;
const message2 = "My name is ${name}";
console.log(message2);
데이터를 받아오는 경우 백틱()을 써야 하며, 쌍따옴표(" ")를 사용 시 데이터 부분이 그대로 나타나게 된다.
const name = "Mike";
const a = "나는 ";
const b = " 입니다.";
console.log(a + name + b);
const age = "28"; //number
console.log(a + age + "살" + b);
숫자형에서 더하기가 사용 가능하듯, 문자형도 가능하다.
'Study > JavaScript' 카테고리의 다른 글
[JS]멀티선택 | 다중선택 Multi Select Box (0) | 2021.12.10 |
---|---|
[JS]자바스크립트 기초 | 연산자 Opertors (0) | 2021.11.29 |
[JS]자바스크립트 기초 | 형변환 (0) | 2021.11.29 |
[JS]자바스크립트 기초 | alert, prompt, confirm (0) | 2021.11.29 |
[JS] 자바스크립트 기초 | 변수 (0) | 2021.11.24 |