자바스크립트 강의 노트 3_함수, 클래스와 객체, 배열

1. 함수

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

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

• 함수 호출시 코드의 흐름 알아보기

function calculateAvg(price1, price2) {
     const sum = price1 + price2
     console.log(`두 상품의 가격 총합은 ${sum}입니다.`)
     const avg = sum /2
     return avg
 }
두개의 상품 가격을 매개변수로 전달받아 그 상품 가격에 합을 구해서 출력하고 마지막으로 평균가격을 리턴한다.

const priceA = 1000
const priceB = 2000
const avg1 = calculateAvg(priceA, priceB)
console.log(`A와 B의 평균은 ${avg1}입니다.`)

const priceC = 2000
const priceD = 3000
const avg2 = calculateAvg(priceC, priceD)
console.log(`C와 D의 평균은 ${avg2}입니다.`)

• 예제
  세 개의 물건가격을 매개변수로 전달받아 평균값을 리턴하는 함수를 정의하고, 그 함수를 호출해서 평균값을 출력하기
  
  주의할 점은 3으로 나눌 때 괄호()를 꼭 써줘야 한다.
  사칙연산 시 곱하기나 나누기가 먼저 계승되는 것 처럼 코딩에서도 먼저 진행되는 것은 똑같으므로 이를 방지하기 위해 괄호를 쓴다.

나머지는 수업에서 나온 코드를 활용하여 진행하였으므로 어려운건 없었다.

2. 클래스와 객체

• 객체(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 키워드와 클래스명
   class는 클래스를 선언하는 문구이고 그 뒤에 바로 클래스 명이 나온다. 클래스명은 누가 봐도 알아볼 수 있게 작성.
2. 생성자 (constructor)
   중괄호 내에 적어줌. '생성'이 될 때 자바스크립트 내부에서 호출이 되는 함수라고 생각하기. 3개의 매개변수를 정의했고 각각의 이름은 name, price, company.
3. this와 속성(property)
   생성자의 바디를 보면 this 라는 키워드가 등장하는데, 이 this는 클래스를 사용해 만들어질 객체 자기 자신을 의미하고 this 뒤에 붙는 name, price, company는 객체의 속성이다.
   생성자의 바디에서는 함수 호출시 전달할 매개변수 name, price, compay를 객체의 속성 name, price, company에 각각 할당하고 있는 것이다.

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

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

console.log로 출력해보면 잘 나온다.

• 메소드 (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)
  클래스와 같은 템플릿 없이 빠르게 객체를 만들 수 있는 방법.
  2개 이상의 속성과 메소드가 있을 때는 쉼표로 구별해주고 가독성을 위해서 줄바꿈도 해주는 게 좋다.

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

computer.printInfo()

name, price라는 속성과 printInfo 라는 메소드를 가지고 있는 객체를 만들어서 computer라는 변수에 할당하는 코드입니다. 해당 객체의 printInfo 메소드를 바로 호출까지 해보았다.

• 연습
  '그'의 네가지 속성을 바로 확인할 수 있게 출력해주는 메소드가 필요한 상황. 클래스와 객체를 활용하여 작성해보자.
  
  Hisinfo라는 클래스명을 가진 클래스 선언.
  생성자(Constructor)에 4개의 매개변수 정의.
  객체 생성 후, 만들어진 객체의 메소드를 호출.
  3. 배열
• 배열의 선언

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

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

2번째 방법이 익숙하기도 하고 편해서 2번째로 쓰기로 한다.

• 배열 안의 데이터
  '요소'라고 부르며 인덱스(index) 가 객체의 속성명과 같은 역할을 한다.
  인덱스는 1이 아니라 0부터 시작하므로, 하단과 같이 출력
  
  0부터 6까지 순서대로 출력 잘 된다.

• 배열의 길이
  
  .length를 붙여주면 7으로 길이 출력
  .length -1을 붙여주면 배열의 마지막 요소도 쉽게 찾아서 출력 가능!

• 요소 추가와 삭제
  배열 선언 후 새로운 요소 추가 혹은 삭제도 가능
  추가: push
  삭제: pop
  
  배열 마지막에 pink 추가 / 마지막 요소 pink 제거 완료

• 배열과 반복문
  
  이건 반복문 연습할 때 많이 해서 이제는 익숙하다.
  i가 배열의 길이보다 작으면 실행 / 크면 실행하지 않고 끝남.
  출력 시 1씩 증가.

• 배열과 함께 쓰이는 간단한 형식의 for문
  
  배열에서 요소들을 차례대로 하나씩 찾아 color라는 변수에 할당하는 방법이다. 자동으로 배열의 끝까지 반복문이 실행되기 때문에 첫번째 for 문보다 쓰기 편하다. 뭐 그렇다고 한다...

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

1. let sum = 0
   sum이라는 변수를 선언하고 여기에 0을 할당. 이 sum에 합계를 누적시킨다.
2. sum += price
   for문 반복 할당 후, 요소의 값을 sum에 누적시킨다.
3. const avg = sum / priceList.length
   평균을 구하기 위해서는 sum을 priceList의 길이, 즉 데이터의 갯수로 나눠주면 된다.
4. 합계 및 평균값 출력 완료.

for문, sum, avg를 써야 한다는 것은 머리속에 있었지만 도대체 코드를 어떻게 짜야 할 지 모르겠어서 그냥 정답을 봤는데도 도대체 이해를 할 수 없었다.
설명을 여러번 반복하니 좀 이해되는 느낌이긴 한데, 막상 vs code에 알아서 쓰라고 하면 머리가 하얘지는 느낌이다. =_=
연습하자

아무튼 자바스크립트 강의 수강 완료! 우선 개념은 어느정도 잡힌 것 같고, 백준 같은거 풀면서 연습을 해야겠다.