모던 JavaScript 스터디 노트 #1

스터디 노트 소개

이 스터디 노트는 ‘모던 자바스크립트 핵심 가이드(알베르토 몬탈레시 지음, 임지순/권영재 옮김)’라는 ES6 속성 코스 느낌의 책을 공부하며 중요하게 짚고 싶은 것들 위주로 작성되어 졌습니다.

‘모던 자바스크립트 핵심 가이드’라는 책은 과거의 ES6 이전의 자바스크립트 사용자들을 모던 JS(ES6 이상)에 안착시키는 목적으로 쓰였다고 도서의 시작부 추천사에 언급되어 있습니다.

여기 있는 대부분의 소스 코드나 설명은 그 책에서 가져온 것들이며, 저자나 역자들에게 공이 돌아가야 합니다.

자료형(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"