[混攻]Javascript-10

19840 ワード

Object


  • one of the Javascript's data types
    (JavaScriptのデータ型の1つ)

  • a collection of related data and|or functionality
    (関数に関連するデータセット)

  • Nearly all object in Javascript are instances of Object
    (ほとんどのJavaScriptオブジェクトのインスタンス)
  • Literals and properties

    const obj1 = {}; // object literal syntax
    const obj2 = new Object(); // object constructor syntax
    
    function print(person){
        console.log(person.name);
        console.log(person.age);
    }
    
    //object 생성
    
    const ellie = {
        //key : value 의 집합체
        name : 'ellie',
        age : 24
    }
    
    print(ellie);
    
    //자바스크립은 다이나믹 런타임 language 이라서 객체에 값을 추가할 수 있다.
    
    ellie.hasJob = true;
    //객체를 살펴보면 hasJob이 추가되었다.
    
    console.log(ellie);
    
    //객체의 삭제 가능
    delete ellie.hasJob;
    console.log(ellie)

    Computed properties

    // 아래와 같이 객체(object)를 생성 할 수 있다. 
    function print(person){
        console.log(person.name);
        console.log(person.age);
    }
    
    const kangmin = {name : 'kangmin', age : 24};
    print(kangmin);
     
    //배열 타입으로 가져올 수도 있다. 이것을 Computed properties라고 한다.
    console.log(kangmin['name'])
    
    // 또한 객체에 값을 넣을 수 있다.
    kangmin['gender'] = 'male';
    console.log(kangmin.gender);
    
    // computed properties는 어떤 key를 가져올지 모를 때 사용한다.
    function printValue(obj,key){
        console.log(obj.key);
    //obj의 key라는 value로 찾게 되서 undefined.
        console.log(obj[key]); 
    //따라서 computed properties 로 사용해야 값을 할당할 수 있다. 
    }
    
    printValue(kangmin, 'name');

    properties value shorthand


    keyのnameは、同じ入力と重複する入力がある場合に関数を使用してコードを減らすことができます.
    const person1 = {name : 'bob', age: 22};
    const person2 = {name : 'steve', age: 32};
    const person3 = {name : 'dave', age: 42};
    // 아래의 함수를 이용해 name이라는 매개변수를  받아 name이라는 key에 다가 넣음
    function makePerson(name, age){
        return {name: name, age: age};
    //객체{ }로 return 한다. 
    }
    const person4 = makePerson('kangmin', 23) 
    //함수에 매개변수로 value를 넣음
    console.log(person4)

    constructor function

    //클래스처럼 사용할 수도 있다.
    function Person(name, age){
    //클래스처럼 클래스명은 대문자로 시작하고 함수처럼 매개변수를 만든다.
    // 클래스처럼 this.객체로 만든다. 
        this.name = name;
        this.age = age;
    }
    
    //사용할때도 클래스처럼 사용한다. 
    const person5 = new Person('hyehwa', 23) 
    //class를 초기화하여 값을 할당시킴. 
    //클래스는 자동으로 객체로 만들어줌
    console.log(person5); 

    in operator : property existence check (key in obj)


    これは、キーがobjにあるか否かを不確定にする方法である.
    console.log('name' in kangmin) //true
    console.log('character' in kangmin) //false
    console.log(kangmin.character) // undefined
    
    console.clear();

    for ... in vs for ... of

    //for(key in obj)
    // kangmin이라는 object가 가지고 있는 key를 출력할 수 있다. 
    //for in은 숫자형이 출력된다.
    for(key in kangmin){
        console.log(key)
    }
    
    //array가 가진 배열들을 순차적으로 출력할 수 있다.
    //배열, 객체의 value를 출력한다. 
    const array = [1,2,3,4]
    for(key of array){
        console.log(key)
    }

    cloning

    //다른이름의 object의 reference를 동일한 값으로 지정시킬 수 있다. 
    const user = {name: 'kangmin', age : 24};
    const user2 = user; 
    // 2개의 object의 referencrt는 동일한 value를 가르킴.
    user2.name = 'ellie'; 
    console.log(user); 
    //동일한 값을 가르키고 동일한 값을 수정하였으니 user가 가르키는 값은 변화 하였다.
    
    //예전에는 완전히 값을 복사해서 사용했다, 
    const user3 = {}; //user3의 빈 객체를 만들고
    for(key in user){
        //user의 값을 for..in을 이용하여 key에다가 할당하는 방식으로 복사하였음.
        //첫번째 동작만 보면 key에 name이 할당되고 user3[name] = 'ellie'; 되는 것과 같다. user[name]의 값은 ellie다.     
        user3[key] = user[key];
    }
    
    console.log(user3)
    
    user3.name = 'kangming';
    //user3의 값은 따로 있기때문에 user3의 값만 변경되고 user,user2가 가르키는 값은 별도의 값이 되었다.
    console.log(user);
    
    //assign 메소드는 target과 합치고자 하는 resource를 매개변수로 받는다. 
    const user4 = {};
    Object.assign(user4, user);
    console.log(user4)
    
    //another example
    const fruit1 = {color: 'red'}
    const fruit2 = {color: 'blue', size: 'big'};
    const mixed = Object.assign({}, fruit1, fruit2);
    console.log(mixed)
    //뒤에 나오는 매개변수는 앞의 매개변수의 동일한 값을 덮어씌운다.