모던 JavaScript 스터디 노트 #1

자료형(Data Types)

기본 자료형

  • string
  • number
  • boolean
  • null
    값이 없음
  • undefined
    정의되지 않은 값
  • symbol(ES6에서 추가됨)
    고유하고 변경할 수 없는 값

객체

const car = {
  wheels: 4, // key
  color: "red", // value
};
const car = {
  wheels: 4, 
  color: "red", 
  drive: function() { // method
    console.log("wroom wroom")
  },
};

console.log(Object.keys(car)[0]); // wheels
console.log(typeof Object.keys(car)[0]); // string
car.drive();
// wroom wroom

빈 객체 생성하기

객체를 생성할 때에는 속성을 선언할 필요가 없다.

빈 객체를 만드는 방법에는 다음과 같이 두 가지 방법이 있다.

const car = new Object();
const car = {}; // 객체 리터럴(object literal)
car.color = 'red'; // dot notation
console.log(car);
// {color: "red"}
const car = {
  wheels: 4, 
  color: "red",
}

console.log(car.wheels);
// 4
console.log(car['color']); // bracket notation
// red
const car = {
  wheels: 4, 
  color: "red", 
  "goes fast": true
};
//console.log(car.goes fast);
// syntax error
console.log(car['goes fast']);
// true

객체의 복사

객체가 대입될 때에 메모리 ‘주소 값’이 복사되는 듯하다.

let car = {
  color: 'red', 
};
let secondCar = car;

car.wheels = 4;
console.log(car);
// {color: 'red', wheels: 4};
console.log(secondCar);
// {color: 'red', wheels: 4};

console.log(car == secondCar);
// true
console.log(car === secondCar);
// true

객체를 각각 선언하고 초기화 시켜주면 각각의 다른 객체가 된다.

const emptyObj1 = {};
const emptyObj2 = {};

console.log(emptyObj1 == emptyObj2);
// false
console.log(emptyObj1 === emptyObj2);
// false

const obj1 = {a: 1};
const obj2 = {a: 1};

console.log(obj1 == obj2);
// false
console.log(obj1 === obj2);
// false

객체를 복사본을 만들 때 이런 방법도 있다.

const car = {
  color: 'red',
};

const secondCar = Object.assign({}, car);

car.wheels = 4;

console.log(car);
// {color: 'red', wheels: 4}
console.log(secondCar);
// {color: 'red'}

배열

자바스크립트(JavaScript)에서의 배열 관련 기본적인 메서드들이다.

const fruitBasket = ['apple', 'banana', 'orange'];
console.log(fruitBasket.length);
// 3

fruitBasket.push('pear');
console.log(fruitBasket);
// ["apple", "banana", "orange", "pear"]

fruitBasket.unshift('melon');
console.log(fruitBasket);
// ["melon", "apple", "banana", "orange", "pear"]

fruitBasket.pop();
console.log(fruitBasket);
// ["melon", "apple", "banana", "orange"]

fruitBasket.shift();
console.log(fruitBasket);
// ["apple", "banana", "orange"]

typeof로 자료형 확인하기

const myStr = "Hello?";
typeof(myStr);
// "string"

const myNumber = 12;
typeof(myNumber);
// "number"

const myObj = {prop: 'value'};
typeof(myObj);
// "object"

array도 object도 분류된다.

const myArr = [1, 2, 3];
typeof(myArr);
// "object"

null이 object로 분류되는 것은 JS 초기의 구현 오류라고 한다.

typeof(null);
// "object"