JS 공부 모음

변수

변수의 생성과정

• var

1. 선언 및 초기화 단계
2. 할당 단계

• let

1. 선언 단계
2. 초기화 단계
3. 할당 단계

• const

1. 선언 + 초기화 + 할당

초기화 단계
: undefined를 할당하는 단계

스코프

• var : 함수 스코프
• let, const : 블록 스코프

생성자 함수

// constructor function (생성자 함수)

//  객체 리터럴
let user = {
    name : 'Mike',
    age : '30'
}

// 객체를 여러개 만들어야할 때 생성자 함수를 사용한다.
// 생성자 함수는 객체를 생성하는 역할을 하는 함수이다.
// 생성자 함수의 첫 글자는 대문자로 쓰는 것이 관례

function User(name, age) {
    this.name = name;
    this.age = age;
}

let user1 = new User('Mike', 30);
let user2 = new User('Jane', 22);
let user3 = new User('Tom', 17);

// 생성자 함수 : 상품 객체를 생성해보자.

function Item(title, price) {
    // this = {}
    this.title = title;
    this.price = price;
    this.showPrice = function() {
        console.log(`가격은 ${price}원 입니다.`);
    }
    // return this;
}
const Item1 = new Item('인형', 3000);
const Item2 = new Item('가방', 4000);
const Item3 = new Item('지갑', 9000);

console.log(Item1, Item2, Item3);

Item3.showPrice();

Computed property (계산된 프로퍼티)

// [x] : a라는 문자열이 아닌 변수 a에 할당된 값을 의미함

let x = 'age';

const user = {
    name : 'Mike',
    [x] : 30 // age : 30
}

// 식 자체를 넣는 것도 가능함

const hello = {
    [1 + 4] : 5,
    ['안녕'+'하세요'] : 'Hello'
} // {5: 5, 안녕하세요: 'Hello'}

object methods

1. Object.assign() : 객체 복제

const user2 = {
    name :  'Mike',
    age : 30
}

const newUser = Object.assign({}, user2);
newUser // {name: 'Mike', age: 30}

Object.assign({ gender:'male'}, user2);
// {gender: 'male', name: 'Mike', age: 30}

Object.assign({ name:'Tom'}, user2);
// {name: 'Mike', age: 30}

// 두 개 이상의 객체도 합칠 수 있다.
const user3 = {
    name : 'Mike'
}

const info1 = {
    age : 30
}

const info2 = {
    gender : 'male'
}

Object.assign(user, info1, info2); // name: 'Mike', age: 30, gender: 'male'}

Object.keys() : 키 배열 반환

const user4 = {
    name : 'Mike',
    age : 30,
    gender : 'male'
}

Object.keys(user4); // ['name', 'age', 'gender']

Object.values() : 값 배열 반환

const user5 = {
    name : 'Mike',
    age : 30,
    gender : 'male'
}

Object.values(user5); // ['Mike', 30, 'male']

Object.entries() : 키/값 배열 반환

const user6 = {
    name : 'Mike',
    age : 30,
    gender : 'male'
}

Object.entries(user6);
// ['name', 'Mike']
// ['age', 30]
// ['gender', 'male']

Object.fromEntries() : 키/값 배열을 객체로

const arr = [
    ['name', 'Mike'],
    ['age', 30],
    ['gender', 'male']
];

Object.fromEntries(arr); // {name: 'Mike', age: 30, gender: 'male'}