JS学習集


へんすう


変数の生成と定義

  • var
  • 宣言および初期化フェーズ
  • 割当フェーズ
  • let
  • 宣言フェーズ
  • 初期化フェーズ
  • 割当フェーズ
  • const
  • 宣言+初期化+割当
  • 初期化フェーズ
    :未定義のステップを割り当てる

    スキャン

  • 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();

    計算プロパティ

    // [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()assign()assign()assign()assign()assign()assign()assign()assign()assign()assign()assign()assign()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.fromEntreats():キー値配列をオブジェクトとする

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