[ TIL ] 11.25(금) 10일차

JavaScript

함수

특정 작업을 수행하는 코드의 집합

const priceA = 1000
const priceB = 2000
// 두 상품가격의 합과 평균을 구해서 출력해야 하는 코드 작성
const sum1 = priceA + priceB
console.log(`두 상품의 합계는 ${sum1}입니다.`)
const avg1 = sum1 / 2
console.log(`두 상품의 평균은 ${avg1}입니다.`)

const priceC = 3000
const priceD = 4000
// 이번에도 두 상품가격의 평균을 구해서 출력해야 한다면? 위와 동일한 코드를 또 작성...
const sum2 = priceC + priceD
console.log(`두 상품의 합계는 ${sum2}입니다.`)
const avg2 = sum2 / 2
console.log(`두 상품의 평균은 ${avg2}입니다.`)

// 한두번은 괜찮은데 이렇게 수십, 수백번씩 평균을 구하고 출력해야 한다면?

이렇게 반복되는 특정을 수행해야 한다면 그 코드 자체를 어딘가에 만들어서

마치 변수에 데이터를 할당해놓고 계속 사용 하는 것처럼

 

함수의 선언

변수를 선언하고 해당 변수에 값을 할당했던 것처럼, 함수도 선언을 하고 해당 함수가 실행할 코드의 집합을 만들어서 저장합니다.

function 함수명(매개변수들) {

    코드

    return 반환값

}

 

매개변수(parameter)는 해당 함수의 바다에 있는 코드에서 사용할 수 있는 일종의 변수이고,

함수 호출시 전달하게 됩니다.

함수를 실행하기 위해서 필요한 일종의 input 이라고 생각하면 된다.

중괄호 안에는 이 함수가 해야할 코드를 작성하고

반환해야 할 값을 명시해줍니다.

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

 

함수의 호출

const 변수명 = 선언한 함수명(매개변수들..)

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}입니다.`)

 

함수 호출시 코드의 흐름

1. 함수 calculateAvg를 호출하면서 변수 priceA와 priceB를 매개변수로 전달
2. 함수 calculateAvg의 바디코드가 실행됨. 이 때 1번에서 전달한 매개변수의 값이 함수를 선언할 때 썻던 매개변수명인 price1, price2에 할당되었다고 보면 됨
3. 함수의 바디 코드가 최종적으로 변수 avg를 리턴하고 있고, 이것이 변수 avg1에 할당됨

 

Q. 세 개의 물건가격을 매개변수로 전달받아 평균값을 리턴하는 함수를 정의하고, 그 함수를 호출해서 평균값을 출력해보세요.

function priceAvg(price1, price2, price3) {
	const avg = (price1 + price2 + price3) / 3
	return avg
}

const priceA = 50
const priceB = 100
const priceC = 150
const avg = priceAvg(priceA, priceB, priceC)
console.log(`평균: ${avg}`)

 

 

클래스와 객체

 

객체(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. 생성자 (constructor)
3. this와 속성(property)

 

객체 만들기

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

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

new 라는 키워드를 먼저 써주고 클래스명을 마치 함수처럼 호출하면서 매개변수값을 전달

해달 클래스의 생성자가 호출되면서 객체가 생성되고 객체의 속성들에 매개변수값들이 할당

객체의 속성 하나하나에 접근해 데이터를 갖고 올 수 있는것과 동일

이 때는 this.속성명 을 사용

console.log(notebook) // Notebook { name: 'Macbook', price: 2000000, company: 'Apple' } 
console.log(notebook.name) // MacBook
console.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 변수명 = {

속성명: 데이터,

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

}

const computer = {
	name: 'Apple Macbook',
	price: 20000,
	printInfo: function () {
		console.log(`상품명: ${this.name}, 가격: ${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 shirts = new Cloth('white', 'M', '50000')
const coat = new Cloth('navy', 'L', '200000'

shrits.printInfo()
coat.printInfo()

 

 

배열

같은 형식의 많은 데이터를 순서대로 저장하고자 할 떄는 데이터의 수만큼 변수들을 선언해줄 수밖에 없다.

이 때 쓰는 것이 배열.

같은 타입의 데이터들을 하나의 변수에 할당하여 관리하기 위해 사용하는 데이터 타입이다.

배열의 선언

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

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

 

1번째 방법보다는 2번째 방법을 많이 사용한다.

 

배열 안의 데이터

배열에 있는 데이터 각각을 우리는 요소(element)

요소들에 쉽게 접근해서 바로 쓸 수 있다.

배열에서는 인덱스(index) 라는 것이 객체의 속성명과 같은 역할

인덱스는 배열 안의 데이터들이 자리잡은 순서

인덱스는 0부터 시작

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

 

배열의 길이

배열은 같은 형식의 데이터를 순서대로 저장하는 것

얼마나 많은 데이터를 갖고 있는지, 그 길이, 배열에 저장되어 있는 데이터의 개수를 바로 알 수 있는 방법이

length 라는 속성

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

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

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

 

요소 추가와 삭제

배열을 선언하고 난 이후에 요소를 추가 또는 삭제할때

push 와 pop 메소드

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

rainbowColors.push('ultraviolet') // 배열의 마지막에 ultarviolet 추가
console.log(rainbowColors) // ultraviolet이 추가된 rainbowColors 출력

rainbowColors.pop() // 배열의 마지막 요소 ultraviolet을 제거
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])
}

1. 배열의 인덱스는 0부터 시작이니 변수 i의 시작값도 0
2. i가 배열의 길이보다 작을 때에만 반복문 안의 코드 실행
3. 모든 요소를 빠짐없이 다 출력해야 하므로 i는 1씩 증가

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

for (const color of rainbowColors) {
	console.log(color)
}

배열에서 요소들을 차례대로 하나씩 찾아 color라는 변수에 할당합니다. 자동으로 배열의 끝까지 반복문이 실행되기 때문에 첫번째 for 문보다 쓰기 편합니다.

 

Q. 열 개의 상품 가격 데이터를 갖고 있는 배열을 만듭니다. 반복문을 활용해 상품들의 가격 합계와 평균을 구해보아요.

const priceList = [1000, 2000, 5000, 7000, 10000, 9000, 3000, 15000, 20000, 17000]
let sum = 0

for (const price of priceList) {
	sum += price
}

const avg = sum / priceList.length
console.log(`합계: ${sum}, 평균: ${avg}`)