자바스크립트 문법(2) - 함수, 객체(클래스)

[ 1. 함수의 선언/호출 ]

 * 함수 선언
 
function 함수명(매개변수들···) { 
	이 함수에서 실행할 코드들
	return 반환값
}

 * 함수 호출
 const priceA = 1000
const priceB = 2000
// 함수의 호출
const avg1 = calculateAvg(priceA, priceB)
console.log(`두 상품의 평균은 ${avg1}입니다.`)

const priceC = 3000
const priceD = 4000
// 함수의 호출
const avg2 = calculateAvg(priceC, priceD)
console.log(`두 상품의 평균은 ${avg2}입니다.`)
 

// 함수의 선언 예시
function calculateAvg(price1, price2) {
	const sum = price1 + price2 // 매개변수인 price1, price2을 변수처럼 활용!
	console.log(`두 상품의 합계는 ${sum}입니다.`)
	const avg = sum / 2
	return avg // 평균가격을 리턴!
}


// 함수 선언 및 호출

function LAvg(price1, price2, price3) {
    const avg = (price1 + price2 + price3) / 3
    return avg
}
  → 함수선언완료

 const head = 1000
 const leg = 3000
 const hand = 2000
 const avg1 = LAvg(head,leg,hand)

 console.log(`세 가격의 평균은 ${avg1}원 입니다.`)

  → 함수호출완료
 

[ 2. 객체(클래스) ]

• 객체를 만들기 위해 클래스를 활용!
  클래스는 템플릿이고, 객체는 이를 구체화한 것으로 이해

1) 클래스 선언

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

 → 이해하기 : 클래스의 이름을 설정-대표할수있는 이름으로 설정하기 : Notebook
			 constructor(선택자) 설정 : name, price, company
			 각 선택자의 속성(호출할이름) 설정 : this.name, this.price, this.company 
               - 여기서 this는 만들어질 객체 자신을 뜻함.
  		    	 이후에 실제 객체를 만들어 호출 할 때는 this부분에 만들어진 객체의 변수명이 들어갈 것임

2) 객체 만들기

const 변수명 = new 클래스명(생성자에서 정의한 매개변수들...)

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

//객체만들기 완료!! 이제 호출을 해보자

		호출해보기 				결과값
			↓				 	  ↓
console.log(notebook1)  → Notebook { name: 'Macbook', price: 20000000, company: 'Apple' }
console.log(notebook1.name)  → Macbook
console.log(notebook1.price)  → 20000000
console.log(notebook1.company) → Apple

3*) 메소드 : 클래스에는 데이터(값)를 나타내는 속성 뿐만 아니라 함수와 같이 특정 코드를 실행할 수 있는 메소드도 정의 가능. 객체를 생성한 후, 만들어진 객체의 메소드를 호출!

(1) 클래스와 메소드 정의

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

    printInfo() {
        console.log(`name: ${this.name}, price: ${this.price}`)      → 메소드 정의
    }
}

(2) 객체 생성, 메소드 호출

const notebook = new product('Macbook', 2000000)      → 객체 생성

notebook.printInfo()                                  → 메소드 호출

실행하기

결과물 → name: Macbook, price: 2000000

4*) 객체 리터럴 : 클래스와 같은 템플릿 없이 빠르게 객체를 만들 수 있는 방법. 객체 리터럴을 활용해서 바로 객체를 만들 수 있음

const 변수명 = {

	속성명: 데이터,

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

}

(예시)
const computer = {
    name: 'Macbook',
    price: 200000,
    printInfo: function() {
        console.log(`name:${this.name}, price:${this.price}`)
    }
}

computer.printInfo()