TIL 2주 4일차

[자바 스크립트]

- 클래스와 객체

 

객체(Object) 타입

 

// 노트북1을 것을 표현하기 위한 데이터들
// 변수명을 명시적으로 하는 것 이외에는 이 데이터들의 관계를 표현해줄 수 있는 방법이 없음
const notebook1Name = 'Macbook'
const notebook1Price = 2000000
const notebook1Company = 'Apple'

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

 

클래스(Class) 선언

 

class Notebook {
constructor(name, price, company) {
this.name = name
this.price = price
this.company = company
}
}

 

1. class 키워드와 클래스명
2. class는 클래스를 선언하는 문구이고 그 뒤에 바로 클래스 명이 나옵니다. 클래스명도 마치 변수명처럼 내가 표현하고자 하는 데이터를 잘 나타낼 수 있는 이름이 좋겠죠? 위의 예에서 Notebook 대신 Person 같은 이름을 쓴다면 다른 사람들이 코드를 봤을 때 이상하다고 생각할 겁니다.
3. 생성자 (constructor)
4. 중괄호 안에는 생성자라는 것을 적어줍니다. 혹시 생성자가 함수와 많이 비슷하다는 것 눈치채셨나요? 이 생성자는 말 그대로 나중에 객체가 '생성'이 될 때 자바스크립트 내부에서 호출이 되는 함수라고 생각해주시면 됩니다. 생성자를 좀 더 살펴보면 3개의 매개변수를 정의했고 각각의 이름은 name, price, company 네요.
5. this와 속성(property)
6. 생성자의 바디를 보면 this 라는 키워드가 등장하네요. 이 this는 클래스를 사용해 만들어질 객체 자기 자신을 의미하고 this 뒤에 붙는 name, price, company는 객체의 속성입니다. 생성자의 바디에서는 함수 호출시 전달할 매개변수 name, price, compay를 객체의 속성 name, price, company에 각각 할당하고 있는 것입니다.

 

객체 만들기

 

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

 

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

 

메소드(method)

 

// 클래스 선언
class Product {
constructor(name, price) {
this.name = name
this.price = price
}

printInfo() {
console.log(`상품명: ${this.name}, 가격: ${this.price}원`)
}
}

// 객체 생성 및 메소드 호출
const notebook = new Product('Apple Macbook', 2000000)
notebook.printInfo() // 상품명: Apple Macbook, 가격: 2000000원

 

객체 리터럴 (Object Literal)

 

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

computer.printInfo()

 

 

 

-배열

 

// 1번째 방법
const arr1 = new Array(1, 2, 3, 4, 5)

// 2번째 방법
const arr2 = [1, 2, 3, 4, 5]

 

배열 안 데이터

 

const rainbowColors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']

console.log(rainbowColors[0]) // o번 인덱스를 통해서 데이터에 접근. red
console.log(rainbowColors[1]) // 1번 인덱스를 통해서 데이터에 접근. orage
console.log(rainbowColors[2]) // 2번 인덱스를 통해서 데이터에 접근. yellow
console.log(rainbowColors[3]) // 3번 인덱스를 통해서 데이터에 접근. green
console.log(rainbowColors[4]) // 4번 인덱스를 통해서 데이터에 접근. blue
console.log(rainbowColors[5]) // 5번 인덱스를 통해서 데이터에 접근. indigo
console.log(rainbowColors[6]) // 6번 인덱스를 통해서 데이터에 접근. violet

 

배열 길이

const rainbowColors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']

console.log(rainbowColors.length) // 7을 출력

console.log(rainbowColors[rainbowColors.length - 1]) // length 를 응용하여 배열의 마지막 요소도 쉽게 찾아서 출력 가능!