01. 개요 및 프로젝트 구성

ECMA스크립트

자바스크립트의 표준 이름 (ES = JS)

초반 1997년 생겼다.

6판이 2015년에 나오면서 인기를 끌기 시작했고 이때부터는 이름에 년도를 붙여서 매년 출시되고 있다.

02. 원시형 - String, Number

문자열 데이터

const string1 = ""
const string1 = ''
const string1 = `안녕 하세요 ${[데이터]}`

셋 중 하나 선택하면 된다.

템플릿 리터럴: 마지막 백틱은 보간이라는 데이터를 문자 데이터 내부에 채워 넣는 용도로 사용 가능

숫자 데이터

const number = 123
const number = -123
const number = 123.12345
const number = .14 = 0.14

NaN: Not a Number
타입은 숫자 데이터인데 특정한 숫자 값으로 표현할 수 없을 때 이렇게 표현된다.

타입 확인

typeof()

부동 소수점 오류

const a = 0.1
const b = 0.2

console.log(a + b)

// 결과: 0.30000000000...04

컴퓨터는 이진수를 사용하는데 우리는 십진수를 사용하면서 변환하는 과정에서 무한 소수가 발생하게되어 생기는 문제이다.

따라서 아래와 같이 해결한다.

console.log((a + b).toFixed(1))

// 결과: '0.3'

하지만 toFixed를 사용하게되면 문자열로 변환된다.

console.log(Number((a + b).toFixed(1)))

// 결과: 0.3

03. 원시형 - Boolean, null, undefined

Boolean

const a = true
const b = false

if 조건문에서 조건에 Boolean을 가지고 있어서 특정 상황을 분기처리할 수 있다.

null

let a = null

age는 현재 null값으로 존재하지 않는다, 값이 비어있다, 값을 알 수 없다는 의미이다.

undefined

let a = undefined
let b

console.log(a)
console.log(b)

//결과: undefined
//     undefined

null은 명시적으로 값이 없다는 것을 우리가 직접 입력하는 개념이지만 undefined는 암시적이다.

따라서, 우리가 직접 입력할 일은 거의 없을 것이다.

const user = {
  name: "김이름",
  age: 25,
};

console.log(user.name);
console.log(user.age);
console.log(user.email);

// 결과
// 김이름
// 25
// undefined

04. 참조형 - Array

const fruits = new Array()

const fruits = ['Apple', 'Banana', 'Cherry']

배열 인덱싱

console.log(fruits[0])

// Apple

배열 길이

console.log(fruits.length)

// 3

05. 참조형 - Object

const user = new Object()
user.name = "김이름"
user.age = 85

console.log(user) // { name: '김이름', age: 85 }

function User() {
  this.name = "김이름";
  this.age = 85;
}

const user = new User();

console.log(user);

console.log(user) // User { name: '김이름', age: 85 }

new Object() 함수를 통해 만드는 방법과 함수 내부에서 this를 이용해서 객체를 만드는 방법이 있다.

const user = {
  name: "김이름",
  age: 85,
};

console.log(user); // { name: '김이름', age: 85 }

가장 쉽고 많이 사용하는 방법

객체 표기법

console.log(user.name); // "김이름" -> 점 표기법
console.log(user["name"]); // "김이름" -> 대괄호 표기법

06. 참조형 - Function

function gerNumber() {
  return 123;
}

console.log(gerNumber);
console.log(gerNumber());

첫번쨰 결과

두번째 결과

함수 호출 시 괄호를 붙이는 것과 안 붙이는 것은 큰 차이가 있다.

const getNumber = function () {
  return 123;
};

위 함수와 동일하게 동작한다. 하지만 함수 이름이 없기 때문에 익명함수하고 부른다. 익명함수를 변수에 할당한 것이다.

07. 형 변환(Type Conversion)

const a = 1 // Number
const b = '1' // String

일치 연산자

console.log(a === b) // false

타입까지 비교하여 같을 때만 참을 출력한다.

동등 연산자

console.log(a == b) // true

형변환이 일어나서 같은 타입으로 비교하게 되어 참으로 결과가 나온다.

동등 연산자(==) 보다는 타입까지 비교하는 일치 연산자(===) 사용을 권장한다.

08. 참과 거짓(Truthy & Falsy)

참

거의 대부분의 값 (거짓에 있는 값을 제외한 값)

거짓

1. false
2. 숫자데이터 0
3. null
4. undefined
5. NaN
6. ‘ ‘(빈 문자열)
7. -0
8. 0n (BigInt)

09. 데이터 타입 확인

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

typeof로는 null, 배열, 객체의 타입이 똑같이 object로 나와서 구분할 수 없다.

console.log(null.constructor);
// null에서 constructor라는 속성을 읽을 수 없다는 오류가 뜸

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

배열과 객체는 constructor라는 속성을 이용해서 구분할 수 있다.

console.log(Object.prototype.toString.call(null));
// [object Null]

console.log(Object.prototype.toString.call(null).slice(8, -1));
// Null
console.log(Object.prototype.toString.call(null).slice(8, -1) === "Null");

null은 이와 같은 방식으로 구분한다.

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

이 함수를 이용하면 모든 타입을 확인할 수 있다.