javascript 개념정리 : 객체

ex) 노트북을 표현하기 위한 데이터들
변수명을 명시적으로 하는 것 이외에는 이 데이터들의 관계를 표현해줄 수 있는 방법이 없음

const notebook_name = 'Macbook'
const notebook_price = 200
const notebook_company = 'Apple'

이름, 가격, 제조사와 같은 정보를 다 담을 수 있는 좀 더 큰 범위의 데이터 타입이 있으면 좋지 않을까?

객체(Object)

const 객체명 = {
	key1 : value1,		*속성 (값이 함수가 X 유형)
    key2 : value2,		*속성
    
    key3 : function(){	*메소드 (값이 함수 O 유형)    
    }
}

• 속성 : 객체가 갖고 있는 고유한 특징
• 메소드 : 객체가 갖고있는 동작/ 객체에 주는 명령

🔔 속성호출시
→ 객체명.속성명 / 객체명['속성명']

🔔 메소드호출시
→ 객체명.메소드명()

※ 메소드명뒤의 ()는 매개변수가 없는 경우에도 반드시 작성한다

객체의 생성방식

① 클래스선언 방식

클래스를 미리 정의해놓으면 필요할 때마다 그 클래스를 사용해서 동일한 모양을 가진 객체를 만들 수 있다

class Notebook {						*class명 첫글자는 꼭 대문자로 작성
	constructor(name, price, company) {
		this.name = name
		this.price = price
		this.company = company
	}
}

• class = 설계도

• constructor(생성자) = 객체가 '생성'이 될 때 자바스크립트 내부에서 호출이 되는 함수

• this = 클래스를 사용해 만들어질 객체 자기 자신

• this. 다음에 오는 name, price, company = 객체의 속성

• = 다음에 오는 name, price, company = 매개변수

🔔 객체만들기

const notebook1 = new Notebook('MacBook', 200, 'Apple')

🔔 속성 하나하나에 접근해 데이터를 갖고와야 할 때

console.log(notebook) // Notebook {name: 'Macbook', price: 200, company: 'Apple'} 
console.log(notebook.name) // MacBook
consoel.log(notebook.price) // 200
console.log(notebokk.company) // Apple

② 객체리터럴 방식

클래스와 같은 템플릿 없이 빠르게 객체를 만들 수 있는 방법

const 변수명(객체명) = {

	속성명: 데이터,

	메소드명: function () { 메소드 호출시 실행할 코드들 }

}

예제)

const computer = {
	name: 'Apple Macbook',
	price: 200,
	printInfo: function () {
		console.log(`상품명: ${this.name}, 가격: ${this.price}원`)
	}
}

computer.printInfo()

③ new연산자 활용

const jane= new Object();
jane.firstName = 'Jane';
jane.lastName = 'R';
jane.body = new Object();
jane.body.height = 170;
jane.body.weight = 65;

console.log(jane) //
{
	firstName: 'Jane',
    lastName: 'R',
    body: { height: 170, weight: 65 }
}

④ new연산자 + 생성자함수 활용

function User(name, age){
	this.name = name;
    this.age = age;
}

let user1 = new User('Jane', 30)
let user2 = new User('Bella', 20)
let user3 = new User('Mike', 15)

배열과 객체

굳이 키가 필요하지 않고 값만 많이 나열하고 싶을 때 배열을 사용한다.

let name = ['Jane', 'notten'];

배열 안의 요소를 선택하려면 뒤에 몇 번째 요소인지 index번호를 붙여주면 된다. js에서는 0부터 시작하므로 [0]을 붙이면 첫 번째 요소 'Jane'이 선택되고, [1]을 붙이면 두 번째 요소 'notten'이 선택된다.

참조 : https://www.zerocho.com/category/JavaScript/post/572c6f759a5f1c4db2481ee3