Js 기초 문법.06

🤯객체(Object)?

자바스크립트는 객체 기반의 스크립트 언어입니다.
자바스크립트의 객체는 키(key), 값(value)으로 구성된 프로퍼티(Property)의 집합입니다. 프로퍼티 값이 함수일 경우에는 이것을 메소드라고 부릅니다.

🥇프로퍼티

프로퍼티는 키(이름) 과 값 으로 구성됩니다. 프로퍼티는 프로퍼티 키로 유일하게 식별할수 있습니다. 즉, 프로퍼티 키는 프로퍼티를 식별하기 위한 식별자(identifier)입니다.

프로퍼티 키: 빈 문자열을 포함하는 모든 문자열 또는 symbol값
프로퍼티 값: 모든 값

프로퍼티 키에 문자열이나 symbol 값 이외의 값을 지정하면 암묵적으로 타입이 변환되어 문자열이 된다. 이미 존재하는 프로퍼티 키를 중복 선언하면 나중에 선언한 프로퍼티가 먼저 선언한 프로퍼티를 덮어쓴다. 배열과는 달리 객체는 프로퍼티를 열거할 때 순서를 보장하지 않는다.

🥈객체 리터럴

일반적인 객체 생성방식이다. {} 를 사용하며 프로퍼티가 없으면 빈 객체, 하나의 프로퍼티를 기술하면 객체를 생성할 수 있다.

var emptyObject = {};
console.log(typeof emptyObject); // object

var hyundai = {
  model : 'avante',
  color :'white',
  introduce: function () { // <--- 메소드
    console.log('Hi! I am ' + this.model);
  }
};

console.log(typeof hyundai); // object
console.log(hyundai); // {model : 'avante', color : 'white', introduce: f}

hyundai.introduce(); // Hi~ I am avante
/*
체의 프로퍼티 값에 접근하려면 
.(쩜) 또는 ['프로퍼티 이름'](ex. hyundai['introduce'])
이용합니다.
/*

🥉Object 생성자 함수

생성자 함수란 new 키워드와 함께 객체를 생성하고 초기화 하는 함수이다. 생성자 함수를 통해 생성된 객체를 인스턴스라 합니다.
객체가 소유하고 있지 않은 프로퍼티 키에 값을 할당하면 해당 객체에 프로퍼티를 추가하고 값을 할당합니다.
이미 존재하는 프로퍼티 키에 새로운 값을 할당하면 프로퍼티 값은 할당한 값으로 변경됩니다.

// 빈 객체를 생성할수 있다.
var kia  = new Object();
// 프로퍼티를 추가합니다.
kia.model = 'sorrento';
kia.color =  'red';
kia.introduce = function () {
  console.log('Hi! I am ' + this name);
};

`console.log`를 이용하여 kia의 타입을 출력해 보시기바랍니다.
`console.log`를 이용하여 kia 를 출력해보시기 바랍니다.
`kia`의 `introduce`를 출력해보시기 바랍니다.

🏅생성자 함수

생성자 함수를 사용하여 프로퍼티가 동일한 객체를 여러개를 간편히 생성할 수 있다.

//생성자 함수
function Car(name, color) {
  this.name = name;
  this.color = color;
  this.introduce = function() {
    console.log('Hi! My name is ' + this.name);
  };
}

//인스턴스의 생성
var hyundai = new Car('avante', 'white');
var kia = new Car('sorrento', 'red');
/*
여기서 new Car의 이해는 
hyundai 만 사용할수 있는 새로운 공간에 Car함수를 가지고 와서 쓴다고 저는 이해하였습니다. 
그래서 hyundai 를 호출하면 avante가 나오고 white가 불립니다.
*/

console.log('hyundai: ', hyundai);
console.log('kia: ', kia);

hyundai.introduce();
kia.introduce();

🌈Reference

PoiemaWeb object의 더 깊게 보려는 분은 여기클릭