객체란 무엇일까?

자바스크립트에서 객체(Object)란 무엇일까?

자바스크립트에서 객체(Object)가 뭘까?
사람, 자동차 등 우리 주변에 있는 모든 사물을 객체라고 한다. 어려운 말로 하면 실샐황에서 우리가 인식할 수 있는 사물이라고 생각하면 된다.
자바스크립트의 기본 타입(data type)은 객체(object)입니다.
객체란이름(name)과 값(value)로 구성된 프로퍼티(property)의 정렬되지 않은 집합 인데 여기서 프로퍼티의 값으로 함수가 올 수도 있는 데, 이러한 프로퍼티들을 메소드(method)라고 한다.
말이 너무 어렵다. 실전으로 한번 해보자

let person = {ㅉ
	name : '홍길동',
    age : '15',
    address : '대한민국 호호마을',
	//이 부분을 속성 프로퍼티 라고 하고 여기에는 객체에 포함되는 요소 지금은 사람으로 예를 들었으니 이름, 나이, 주소 등이 들어올 수 있다.
	see: function(){
	console.log("보기");
	},
	hear: function(){
	console.log("듣기");
	},
	say: function(){
	console.log("말하기");
	}
//여기 부분 같은 경우 기능(method)을 얘기 합니다. 
}

즉 자바스크립트에서 객체라는 개념을 이용하여 프로그램을 좀 더 체계적으로 만드는 거 라고 생각하면 된다.

우리가 레고 가지고 이것 저것 만들듯이 자바스크립트는 "객체" 라는 것을 활용하여 집을 짓는다.

그러면 이러한 객체를 어떻게 생성할까?!

객체 변수를 이용하기 위해서는 변수 선언이 필요하다.
나는 es6 에서 사용하는 "let" 으로 통일했다.
첫 째 속성은 하나 이상으로 정의될 수 있다. 즉 프로퍼티가 여러 개 일수도 있다.
두 번째 메소드는 하나의 함수로 구성되며, [메소드명:function(){}]의 형태로 표현이 된다.
세 번째 객체의 속성은 [객체명.속성명]으로, 메소드는 [객체명.메소드명()]으로 접근이 가능하다.
(참고로 바벨 없이 es6 let 사용하면 낭패를 일으킬 수 있다. es6도 호환 안되는 게 있기 때문에 함부로 쓰다가는 먹통된다.)

간단한 풀이를 보자

let car = {
  company : '규',
  model : '그렌저',
//여기서 property는 company와 model이다. 보면 속성은 하나 이상으로 정의될 수 있다와 속성이 내용의 접근할 수 있다.
  myCarInfo :function(){
    console.log('내 차는' + this.company + '의' + this.model + '입니다.');
  }
// 여기서 메소드는 메소드당 하나의 함수로 구별이 된다. 즉 메소드는 객체에 대한 기능이고
속성은 객체 내부에 가지고 있는 속성들의 값이다.
}

console.log('회사이름' + car.company);
console.log('차의 모델명' + car.model);
car.myCarInfo();

콘솔로 찍으면 대충 이런 값이 나온다.

이제 이 내용을 안 까먹고 활용만 해보면 된다. 가즈아!!
기 전에 정리를 해보자
자바스크립트에서 객체란?
객체란이름(name)과 값(value)로 구성된 프로퍼티(property)의 정렬되지 않은 집합 인데 여기서 프로퍼티의 값으로 함수가 올 수도 있는 데, 이러한 프로퍼티들을 메소드(method)라고 한다.
나는 es6 에서 사용하는 "let" 으로 통일했다.
첫 째 속성은 하나 이상으로 정의될 수 있다. 즉 프로퍼티가 여러 개 일수도 있다.
두 번째 메소드는 하나의 함수로 구성되며, [메소드명:function(){}]의 형태로 표현이 된다.
세 번째 객체의 속성은 [객체명.속성명]으로, 메소드는 [객체명.메소드명()]으로 접근이 가능하다.
강조도 했으니 이제 이 내용을 활용 해보자

이제 이 내용을 안 까먹고 활용만 해보면 된다.

활용 예제1)

조건을 달자!!
1. 아메리카노라는 자바스크립트 객체(object)를 만들고
2. 제조한 사람, 아메리카노의 이름, 가격을 받아서 몇개를 사면 갑싱 나오는 객체를 만들어 보자!
첫 째는 아메리카노란 객체를 만들자
let americano ={
  manufacturer : '듀-인',
  name : '듀메리카노',
  price : 428000,
  showPrice: function(number){
    let totalPirce = this.price * number;
    return totalPirce;
  }
}
console.log('아메리카노 만든 인간' + americano.manufacturer);
console.log('아메리카노의 이름' + americano.name);
console.log('아메리카노의 특별 제조 가격' + americano.price);
console.log('아메리카노 3개의 가격' + americano.showPrice(3));

이거를 확인 해보자!

생성자 함수를 이용한 객체 생성 방식!!을 알아보자

첫 째는 우리가 방금전부터 자주 사용한 리터럴 표기법이다.
객체와 객체명을 선언하고 프로퍼티와 값을 할당하거나 메소드를 할당하는 방법!

let sisibibi = {
	프로퍼티1이름 : 프로퍼티1의값,
    프로퍼티2이름 : 프로퍼티2의값,
    ...
}

여기서 리터럴이란 {} 이걸 얘기한다. 이 부분은 나중에 후술 하겠다.
(다음 시리즈에 하든 언제가는 할거입니다. 언젠가!)
두 번째는 중요한 생성자를 이용한 객체의 생성이다.
사실 이 주제를 꺼낸 이유는 생성자 함수 때문이다
객체 변수를 이용하여 객체를 생성하게 되면 하나의 객체를 생성하고자 할 때만 사용이 되는 데 이러한 틀을 계속 사용하기 위해 틀만 만들어 놓고, 그 틀을 바탕으로 여러 개의 객체를 생성하고자 할 때는 생성자(constructor) 함수를 이용하는 객체생성방식을 활용하게 된다.

이게 무슨 얘기냐! 차에 대한 객체를 만들었는 데 한 변수에 대한 값만 할당하기에는 너무 아쉽지 않은가? 이거를 여러 곳에 대입하기 위해 보통 생성자 함수를 사용하게 된다.
즉 객체를 재사용 하기 위한 함수라고 생각하면 된다.

예를 들어서

function Car(company, model){
  this.company = company;
  this.model = model;
  this.myCarinfo = function(){
    console.log('내 차는' + this.company + '의' + this.model +'입니다.');
  }
}

let car1 = new Car('bmw','세단');
console.log('car1의 정보');
console.log('car1의 회사' + car1.company);
console.log('car1의 회사' + car1.model);
car1.myCarinfo();

이런 식으로 재활용이 가능하게 해준다. 하지만 너무 잦은 사용은 오히려 더 지저분해지니 조심하자

세 번째는 Object.create() 메소드를 이용한 객체의 생성인데 Object.create() 메소드를 이용하여 객체를 생성하여 지정된 프로토타입 객체와 프로퍼티를 가지고 새로운 객체를 만든다. 따라서 이 메소드는 사용자가 프로토타입 객체를 직접 명시할 수 있어 상당히 유용하다.
인데 여기서 "프로토타입"은 각자 공부 하자

이만 기영이와 함께 가보겠다.