데이터 타입의 종류와 특징

Lemon·2022년 3월 29일
0

JavaScript

목록 보기
2/17
post-thumbnail

문자열 (String)

const name1 = "Lemon"
const name2 = 'Lemon'
const name3 = `Lemon`

자바스크립트에서 문자열은 따옴표로 감싸야합니다. 작은따옴표, 큰따옴표 차이 없습니다.

그러나 작은 따옴표를 사용할 일이 있으면 큰따옴표를 쓰는게 좋습니다.

const message = "I'm hungry";

만약 작은 따옴표만 사용하고 싶다면 문자로 나타낼 ' 앞에 백슬러스를 넣으면 특수문자로 인식합니다.

const message2 = 'I\'m hungry';

변수를 사용할 문자열에는 ``(백틱)을 사용합니다. ``(백틱)안에서 변수를 사용할 때는 ${ }안에 변수명을 넣으면 됩니다.
(``(백틱)은 키보드 ~(물결)부분을 shift를 빼고 누르면 나옵니다.)

const message3 = `My name is${name}`;
console.log(message3) // "My name is Lemon"

표현식도 가능합니다.
const message4 = `나는 ${20+8}살 입니다.`;
console.log(message4) // "나는 28살 입니다."

실수로 일반 따옴표에 변수를 넣으면 ${}까지 그대로 출력되니 주의해야합니다.
const name = "lemon";
const message = 'My name is ${name}';
console.log(message); //"My name is ${name}"

두 문자열을 + 연산자로 합칠 수 있습니다.

console.log("Hello, " + "World") // Hello, World

문자열과 숫자형을 합하면 문자열로 변경됩니다.

const age = 28; // number
const a = "나는 ";
const b = "입니다";

console.log(a + age + "살" + b); // "나는 28살입니다" 

.length() 함수를 이용해서 문자열의 길이를 알 수 있습니다.

let fullName = "lemon";
console.log(fullName.length); // 5

.length()를 이용해서 두 문자열 길이 값의 평균을 구할 수 있습니다.

let word1 = 'tree'
let word2 = 'assignment'

let length1 = word1.length;
let length2 = word2.length;

console.log( (length1+length2) / 2 ) // 7

숫자열 (Number)

const age = 28;
const PI = 3.14;

숫자열은 사칙연산이 가능합니다.

console.log(1 + 2); // 더하기
console.log(2 - 1); // 뻬기 
console.log(3 * 2); // * 곱하기
console.log(4 / 2); // / 나누기
console.log(5 % 2); // % 나머지 값

0으로 나누면 무한대를 얻을 수 있습니다.

const x = 1/0; 
console.log(x); // Infinity

숫자열이 아닌 타입을 사칙연산 할 경우에는 NaN(Not a Number)이 출력됩니다.

const name = "lemon"
console.log(name/2) // NaN

Boolean

참(true)거짓(false)을 나타냅니다.

const a = true; // 참
const b = false; // 거짓

조건에 맞는지를 참과 거짓으로 판단할 수 있습니다.

const name = "lemon";
const age = 28;

console.log(name === "lemon"); // true
console.log(age > 30); // false

조건이 참인지 것짓인지를 알기 위해 비교를 해야하기 때문에 비교연산자를 사용합니다.

비교연산자설명
==왼쪽 값과 오른쪽 값이 같으면 참을 반환한다.
===왼쪽 값과 오른쪽 값이 같으면서 타입까지 같아야 참을 반환한다.
!=왼쪽 값과 오른쪽 값이 같지 않으면 참을 반환한다.
!==왼쪽 값과 오른쪽 값이 같지 않거나, 타입이 다르면 참을 반환한다.
>왼쪽 값이 오른쪽 값보다 크면 참을 반환한다.
>=왼쪽 값이 오른쪽 값보다 크거나 같으면 참을 반환한다.
<왼쪽 값이 오른쪽 값보다 작으면 참을 반환한다.
<=왼쪽 값이 오른쪽 값보다 작거나 같으면 참을 반환한다.

타입까지 엄격하게 비교하는 ===!==를 사용하는 것이 좋습니다.

console.log("22" == 22); // true
console.log("22" === 22); // false

null 과 undefined

null과 undefined는 모두 자바스크립트의 데이터 타입입니다.
undefined는 선언은 됐지만 아직 값이 할당되지 않은 경우를 의미합니다. null은 '빈 값(blank)'을 의미하는데 사용자가 준 값입니다. 그래서 undefined와 다르게 자바스크립트가 자동적으로 null 이란 값을 줄 수는 없습니다.

let age; // 할당된 값이 없다.
console.log(age); //undefined

let user = null; // 존재하지않는다
console.log(user); // null

typeof 연산자

변수의 자료형을 알아볼 수 있습니다.

const name = "lemon";

console.log(typeof 3); // number
console.log(typeof name); // string
console.log(typeof true); // boolean
console.log(typeof "Good"); // string
console.log(typeof null); // object 객체형
console.log(typeof undefined); // undefined

다른 개발자가 작성한 변수의 타입을 알아야할 경우나 API 통신등을 통해 받아온 데이터를 타입에 따라 다른 방식으로 처리해야할 때 많이 사용합니다.



✍🏻최종 정리

자료형 데이터 타입은 문자열, 숫자형, Boolean, null과 undefined 가 있습니다.

profile
프론트엔드 개발자 가보자고~!!

0개의 댓글