1일 차: 자바스크립트의 객체

객체란 무엇입니까?



An object is a collection of properties, and a property is an association between a name (or key) and a value.



const myCar = {
  make: 'Ford',
  model: 'Mustang',
  year: 1969
};


자바스크립트에서 객체를 생성하는 다양한 방법




// 1
const obj = new Object();

// 2
const obj = Object.create(null);

// 3 => Most common way
const series = {
     name: "Game of thrones",
     season: 8,
     case: getCast() // can use function as well
};

// 4 => function constructor 
function cast(name) {
  this.name = name;
  this.id = 2;
  this.item = [1,2,3,4
}
var object = new Person("Jon snow");

And Many more..


트릭과 팁


  • 특정 키가 있는지 여부를 개체에 체크인하려면

  • obj.hasOwnProperty(key) // returns true if key exists otherwise false.


  • 개체에서 모든 속성을 가져오려면

  • const cast = {
      name: 'jon snow',
      age: 22,
      active: false
    };
    
    console.log(Object.keys(cast));
    // expected output: Array ["name", "age", "active"]
    


    모범 사례




    Object creation 
    // bad
    const item = new Object();
    
    // good
    const item = {};
    
    function getKey(k) {
      return `a key named ${k}`;
    }
    
    Use computed property names when creating objects with dynamic property names.
    // bad
    const obj = {
      id: 5,
      name: 'San Francisco',
    };
    obj[getKey('enabled')] = true;
    
    // good
    const obj = {
      id: 5,
      name: 'San Francisco',
    
    };
    
    
    Use object method & property shorthand.
    // bad
    const atom = {
      value: 1,
    
      addValue: function (value) {
        return atom.value + value;
      },
      name: name
    };
    
    // good
    const atom = {
      value: 1,
    
      addValue(value) {
        return atom.value + value;
      },
      name
    };
    
    Only quote properties that are invalid identifiers. 
    // bad
    const bad = {
      'foo': 3,
      'bar': 4,
      'data-blah': 5,
    };
    
    // good
    const good = {
      foo: 3,
      bar: 4,
      'data-blah': 5,
    };
    
    Do not call Object.prototype methods directly, such as hasOwnProperty, propertyIsEnumerable, and isPrototypeOf. 
    
    Why? These methods may be shadowed by properties on the object in question - consider { hasOwnProperty: false } - or, the object may be a null object (Object.create(null)).
    
    // bad
    console.log(object.hasOwnProperty(key));
    
    // good
    console.log(Object.prototype.hasOwnProperty.call(object, key));
    
    // best
    const has = Object.prototype.hasOwnProperty; // cache the lookup once, in module scope.
    console.log(has.call(object, key));
    
    /* or */
    import has from 'has'; // https://www.npmjs.com/package/has
    console.log(has(object, key));
    
    
    


    읽어 주셔서 감사합니다..

    리소스 및 크레딧
  • https://github.com/airbnb/javascript#objects
  • https://github.com/sudheerj/javascript-interview-questions#what-are-the-possible-ways-to-create-objects-in-javascript

  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects
  • 좋은 웹페이지 즐겨찾기