1. 클래스와 객체
ⅰ. 객체(Object) 타입
- 관련 있는 데이터들을 묶어서 한 번에 잘 나타낼 수 있는 데이터 타입의 필요성에 의해 사용하는 것이 객체
- 객체란 '물리적으로 존재하거나 추상적으로 생각할 수 있는 것 중에서 자신의 속성을 갖고 있고 다른 것과 식별 가능한 것'을 의미
- 객체라는 것을 나타내기 위하여 클래스를 활용하게 됨
// 노트북의 이름, 가격, 제조사와 같은 데이터를 표현
// 객체를 활용하지 않으면 변수명을 명시적으로 하는 것 외에 데이터들의 관계를 표현해줄 수 있는 방법이 없음
const notebook1Name = 'Macbook'
const notebook1Price = 20000000
const notebook1Company = 'Apple'
// 정보를 다 한번에 표현할수 있는 데이터 타입이 필요
ⅱ. 클래스(Class)선언
- 객체를 만들 때 설계도처럼 사용하는 것이 클래스
- 클래스는 템플릿이고 객체는 이를 구체화한 것이라고 표현함
- 클래스를 미리 정의해 놓으면 필요할 때마다 그 클래스를 사용해서 동일한 모양을 가진 객체를 만들 수 있음
class Notebook {
constructor(name, price, company) {
this.name = name // 생성자의 body
this.price = price
this.company = company
}
}
- class 키워드와 클래스명
- class는 클래스를 선언하는 문구, 뒤에 클래스명
- 클래스명도 표현하고자 하는 데이터를 잘 나타낼 수 있는 이름으로 생성
- 생성자(constructor)
- 중괄호() 안에 생성자를 작성
- 생성자란 나중에 객체가 생성이 될 때 자바스크립트 내부에서 호출이 되는 함수
- this와 속성(property)
- this 키워드 -> 클래스를 사용해 만들어질 객체 자기 자신을 의미
- this 뒤에 붙는 내용이 객체의 속성
- 생성자의 body에서는 함수 호출 시 전달할 매개변수를 객체의 속성에 각각 할당하고 있는 것
ⅲ. 객체 만들기
- const 변수명 = new 클래스명(생성자에서 정의한 매개변수에 전달될 데이터를 명시)
const notebook1 = new Notebook('Macbook', 2000000, 'Apple')
- 클래스를 활용해 객체를 만들 땐 new라는 키워드를 먼저 쓰고 클래스명을 함수처럼 호출하면서 매개변수값을 전달
-> 클래스의 생성자가 호출되면서 객체가 생성되고 객체의 속성들에 매개변수값들이 할당됨
- 만들어진 객체는 변수에 할당, 기본 타입의 데이터들을 변수에 할당하면 변수를 사용해 해당 데이터에 접근할 수 있는데 객체도 동일함
=> 객체를 변수에 할당하고 나면 해당 변수를 활용해 객체에 접근할 수 있음
- 객체의 속성에 접근해 데이터를 가져올 때는 this.속성명
console.log(notebook1) // Notbook {name: 'Macbook', price: 2000000, company: 'Apple'}
console.log(notebook1.name) // Macbook
console.log(notebook1.price) // 2000000
console.log(notebook1.company) // Apple
ⅳ. 메소드(method)
- 클래스에는 데이터를 나타내는 속성뿐만 아니라 함수와 같이 특정 토드를 실행할 수 있는 메소드도 정의 가능
- 객체를 생성한 후, 객체의 메소드를 호출하면 됨
class Product {
constructor(name, price) {
this.name = name
this.price= price
}
printInfo() { // 메소드명
// 메소드의 body 부분, 해당 메소드를 호출했을 때, 실행할 코드를 작성
console.log(`상품명: ${this.name}, 가격: ${this.price}원`)
}
}
const notebook = new Product('Apple Macbook', 2000000)
notebook.printInfo() // 상품명: Apple Macbook, 가격: 2000000원, 메소드 호출
ⅴ. 객체 리터럴(Object Literal)
- 객체 리터럴은 클래스와 같은 템플릿 없이 빠르게 객체를 만들 수 있는 방법
- const 변수명 = {
속성명: 데이터(해당 속성에 할당될 데이터들을 작성),
메소드명: function() {메소드 호출 시 실행할 코드}
}
- 속성과 메소드가 여러 개일 때는 쉼표, 로 구별함, 가독성을 위해서 줄 바꿈을 하는 것이 좋음
const computer = {
name: 'Apple Macbook',
price: 2000000,
printInfo: function() {
console.log(`name: ${this.name}, price: ${this.price}`)
}
}
computer.printInfo()
- 클래스를 활용해 객체를 만드는 것과 객체 리터럴은 동일함
- 코드의 재사용성 때문에 클래스를 정의함
- 한번 클래스를 만들어두면 같은 속성과 메소드를 갖고 있는 객체를 훨씬 간결한 코드로 작성 가능
// Q. 옷의 색깔, 사이즈, 가격의 속성
// 옷들의 세 속성을 확인할수 있게 출력하는 메소드
// 클래스와 객체를 활용해 작성
class Cloth {
constructor(color, size, price) {
this.color = color
this.size = size
this.price = price
}
printInfo() {
console.log(`색상: ${this.color}, 사이즈: ${this.size}, 가격: ${this.price}`)
}
}
const cloth1 = new Cloth('yellow', 's', 20000)
cloth1.printInfo()
2. 배열
ⅰ. 배열(Array)이란?
- 같은 형식의 많은 데이터를 순서대로 저장하고자 할 때는 데이터의 수만큼 변수들을 선언해 줄 수밖에 없지만, 이때 사용하는 것이 배열
- 같은 타입의 데이터들을 하나의 변수에 할당하여 관리하기 위해서 사용하는 데이터 타입
ⅱ . 배열의 선언
- 배열을 선언하는 방법은 두 가지가 있음
- const 변수명 = new Array(.., .., ...... )
- const 변수명 = [...., ...., ..., ......]
// 1, 2, 3, 4, 5 데이터들을 순서대로 갖고 있는 배열을 만들어서
// arr 라는 변수에 할당
// 1번째 방법
const arr1 = new Array(1, 2, 3, 4, 5)
// 2번째 방법
const arr2 = [1, 2, 3, 4, 5]
- 1번째 방법
- 클래스를 활용해 객체 만든 것과 유사함
-> Array라는 클래스를 활용해서 객체를 만듦
- 직접 Array라는 클래스를 선언한 적은 없지만 자바스크립트 내부적으로 이미 갖고 있음
- 2번째 방법
- 배열을 바로 만드는 방법
- 대괄호 안에 배열로 저장할 데이터를 쭉 나열해 주면 됨
- 보통 이 방법을 많이 사용함
ⅲ. 배열 안의 데이터
- 배열에 있는 데이터 각각을 요소(element)라고 함
- 배열에서는 인덱스(index)가 객체의 속성명처럼 요소들에 쉽게 접근해서 바로 사용할 수 있음.
- 인덱스는 배열 안의 데이터들이 자리 잡은 순서, 인덱스는 0부터 시작함
const rainbowColors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']
console.log(rainbowColors[0]) // 0번 인덱스를 통해서 데이터 접근, red 출력
console.log(rainbowColors[1]) // orange
console.log(rainbowColors[2]) // yellow
console.log(rainbowColors[3]) // green
console.log(rainbowColors[4]) // blue
console.log(rainbowColors[5]) // indigo
console.log(rainbowColors[6]) // violet
- 같은 형식의 데이터를 순서대로 저장할 수 있는 이점이 있음
ⅳ. 배열의 길이
- 배열은 같은 형식의 데이터를 순서대로 저장하는 것인데, 이 배열이 얼마나 많은 데이터를 갖고 있는지, 그 길이를 알 필요가 있음.
- 배열의 요소가 많이 있다면 직접 셀 수 없기 때문에 이때 사용하는 속성이 length
const rainbowColors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']
console.log(rainbowColors.length) // 7
console.log(rainbowColors.length - 1)
// 배열의 마지막 요소를 찾는 방법 -> why? 요소가 0부터 시작하기 때문에 1을 빼줌
ⅴ. 요소 추가 삭제
- 배열을 선언하고 난 이후 새로운 요소를 더하거나 뺄 때 사용하는 메소드가 push와 pop
- 배열도 객체처럼 속성과 메소드를 가지고 있음
const rainbowColors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']
rainbowColors.push('ultraviolet') // 배열 맨 마지막에 ultraviolet 추가
console.log(rainbowColors) // 추가된 요소가 포함된 rainbowColors 출력
rainbowColors.pop() // 배열의 맨 마지막 요소 제거
console.log(rainbowColors) // ultraviolet가 제거된 rainbowColors 출력
ⅵ. 배열과 반복문
- 배열의 요소들을 하나씩 꺼내서 출력해야 하는 코드를 작성해야 할 때, 반복문을 활용함
const rainbowColors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']
for (let i = 0; i < rainbowColors.length; i++) {
console.log(rainbowColors[i]) // 인뎃스로 배열에 순차적으로 접근
}
- 배열의 인덱스는 0부터 시작이므로 변수 i의 값을 0으로 시작
- 변수 i가 배열의 길이보다 작을 때만 반복문 안의 코드를 실행하고, 1씩 증가해서 모든 요소들을 빠짐없이 출력
// 간단한 형식의 for문
const rainbowColors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']
for (const color of rainbowColors) { // 변수 const를 선언하고 of 키워드를 사용
console.log(color)
}
- 배열에서 요소들을 차례대로 하나씩 찾아 color라는 변수에 할당함
- 자동으로 배열의 끝까지 반복하기 때문에 쓰기 간편함
// Q, 열 개의 상품 가격 데이터 배열 생성
// 반복문을 활용하여 상품들 가격의 합계와 평균 구하기
const priceLisdt = [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000]
let sum = 0
for(let i = 0; i < priceLisdt.length; i++) {
sum += priceLisdt[i]
}
/*
for (const price of priceList){
sum += price
}
*/
const avg = sum / priceLisdt.length
console.log(`합계: ${sum}, 평균: ${avg}`)