자바스크립트 데이터

임채은·2023년 5월 29일

JavaScript

js

목록 보기

2/8

01 개요 및 프로젝트 구성

1-1) ECMA 스크립트란?

자바스크립트를 표준화하기 위해 만들어진 스크립트 프로그래밍 언어입니다.

1-2) 프로젝트 구성

① cmd창에 아래 명령어를 입력하여 npm 프로젝트를 생성합니다.

$ npm init -y
$ npm i parcel -D

② 아래와 같이 초기 파일을 설정합니다.

index.html

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script type="module" defer src="main.js"></script>
</head>

<body>
  Hello HTML!!
</body>

</html>

main.js

console.log("Hello JavaScript!!");

package.json

{
  "name": "javascript",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "dev": "parcel ./index.html",
    "build": "parcel build ./index.html"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "parcel": "^2.9.1"
  }
}

③ cmd창에 아래 명령어를 입력하여 개발 서버를 오픈합니다.

$ npm run dev

02 자바스크립트 데이터

2-1) 원시형

String

문자 데이터

const str1 = "Hello";
const str2 = "JavaScript";
const str3 = `${str1} ${str2} !!`;

console.log(str3);  // Hello JavaScript !!

Number

숫자 데이터
const num1 = 123;
const num2 = -123;

console.log(num1 + num2);  // 0
const num1 = 0.1;
const num2 = 0.2;

console.log(num1 + num2);  // 0.30000000000000004
console.log((num1 + num2).toFixed(1));  // 0.3
console.log(Number((num1 + num2).toFixed(1)));  // 0.3
toFixed(n) 은 Number 객체의 메서드로, 소수점 n-1 번째 자리수로 반올림된 값을 문자열로 반환합니다.

Boolean

true 혹은 false 값을 가지는 논리 데이터
const yes = true;
const no = false;

console.log(yes);  // true
console.log(no);  // false

null 과 undefined

null 은 명시적으로 데이터가 없음을 나타내는 값이고,
undefined 는 암시적으로 데이터가 없음을 나타내는 값입니다.
let name = null;
let age;

console.log(name);  // null
console.log(age);  // undefined
const user = {
  name: "im-channel",
  age: null,
};

console.log(user.name);  // im-channel
console.log(user.age);  // null
console.log(user.email);  // undefined

2-2) 참조형

Array

배열 데이터

const fruits = ["Apple", "Banana", "Cherry"];

console.log(fruits);  // ["Apple", "Banana", "Cherry"]
console.log(fruits.length);  // 3
console.log(`${fruits[0]} ${fruits[1]} ${fruits[2]}`);  // Apple Banana Cherry

Object

객체 데이터

const user = {
  name: "im-channel",
  age: 28,
  phone: "010-0000-0000",
};
const key = "phone";

console.log(user);  // {name: 'im-channel', age: 28, phone: '010-0000-0000'}
console.log(user.name);  // im-channel
console.log(user["age"]);  // 28
console.log(user[key]);  // 010-0000-0000

Function

함수

function hello1() {
  console.log("Hello1");
}
hello1();  // Hello1

const hello2 = function () {
  console.log("Hello2");
};
hello2();  // Hello2

function getNumber1() {
  return 1;
}
console.log(getNumber1());  // 1

const getNumber2 = function () {
  return 2;
};
console.log(getNumber2());  // 2

function hello(name) {
  console.log(`Hello ${name}~`);
}
hello("chan");  // Hello chan~

const bye = function (name) {
  console.log(`Bye ${name}~`);
};
bye("chan");  // Bye chan~

03 거짓에 해당하는 값

false
0
null
undefined
NaN
''
0n

04 데이터 타입 확인

4-1) typeof

console.log(typeof "abc" === "string");  // true
console.log(typeof 123 === "number");  // true
console.log(typeof true === "boolean");  // true
console.log(typeof undefined === "undefined");  // true
console.log(typeof null === "object");  //true
console.log(typeof [] === "object");  // true
console.log(typeof {} === "object");  // true
console.log(typeof function () {} === "function");  // true

4-2) constructor

console.log([].constructor === Array);  // true
console.log({}.constructor === Object);  // true

4-3) 공용화된 데이터 타입 확인 함수

function checkType(data) {
  return Object.prototype.toString.call(data).slice(8, -1);
}

console.log(checkType("abc") === "String");  // true
console.log(checkType(123) === "Number");  // true
console.log(checkType(true) === "Boolean");  // true
console.log(checkType(undefined) === "Undefined");  // true
console.log(checkType(null) === "Null");  // true
console.log(checkType([]) === "Array");  // true
console.log(checkType({}) === "Object");  // true
console.log(checkType(function () {}) === "Function");  // true