스파르타코딩클럽 내일배움캠프4기 -7-

내일배움캠프 2주차 강의가 시작되었다.
원래는 파이썬부터 강의를 들어야되는데
내부 시스템 문제로 자바스크립트 강의부터 들으라고 한다.

자바스크립트는 그래도 뭔지는 아니까 생각보다 강의가 잘 들린다.
그렇다면 오늘배운것을 정리해보겠다...
배고프다...

프로그래밍이란?

간단하게 입력 -> 처리 -> 출력 이다.

자바스크립트는 뭔데?

프로그래밍하는 "도구(=프로그래밍 언어)" 이다.
인간들도 언어를 쓰듯이 컴퓨터도 언어를 쓴다.
자바스크립트는 컴퓨터의 언어 중 하나이다.
언어에는 정해진 문법이 있듯이 언어마다 쓰는 방식도 다 다르다.

참고로 node.js는 자바스크립트의 전용 번역기라고 생각하면된다.
이전에는 웹브라우저에만 있었지만, 설치를 통해 웹브라우저가 아닌 곳에서도 자바스크립트 코드를 실행하고 그 결과물을 바로 확인할 수 있다.

consloe.log();

지겹도록 쓸 명령어다.
프로그래밍한 결과물들을 출력하는 명령어다.
괄호안에 출력하고 싶은 명령어를 입력하면 된다.

여기서 잠깐! 사용법 알아보고 가잣!

VSC 편집기를 실행 한 후. JS파일을 만든다.
그리고 목록가서 새 터미널 실행한다.
내가 원하는 명령어 입력한 후.
터미널에 node 파일명.js 입력하면 결과물이 나온다.

중요한 변수도 보고가실게요~

변수 뜻: 데이터 보관함(뜻을 주는 행위)

변수선언 방법에는 3가지가 있다.

var
-가장 기본값(default)이다.
-재선언 재할당 다 가능해서 오류 잡아내기가 힘들다.
현재로써는 아예 사용하지않음.
ex) name = cony;
console.log(name);

let
-변할 수 있는 값
-재할당이 가능하다.

ex) let a =100;
let a = 200; - 이러면 오류난다.
a=300; - 이렇게 재할당은 됨.

const
-변하지 않은 값
-한번 선언하면 못바꾼다. 재할당 안된다.

tip!
변수 선언을 const로 한 후 변경 될 것 같은것들만 let으로 바꿔주자.

주의사항
1. 변수는 숫자,문자,$,_ 총 4개만 사용가능
2. 첫글자는 숫자가 될 수 없다.
3.. 예약어는 사용할수 없음. (this, class 등)
4. 가급적 상수는 대문자로 알려주라. ex) const MAX_SIZE=99;
5. 변수명은 읽기쉽고 이해할수 있게. (낙타 모양으로 작성함.)

데이터타입!

자바스크립트에서는 여러 종류의 데이터 타입들이 존재한다.
기본 또는 원시형 (primitive) 타입이라고 불리는 number, string, boolean, null, undefined에 대해서 써보려고한다.

숫자

말 그대로 숫자임... 숫자 입력하면 된다.

문자열 (String)

말 그대로 문자열 데이터.

자바스크립트에 문자(string)는 
항상 '   ' , "   ", `   `  중 하나로 감싼다.
const message = "i'm a boy.";  -일반적
const message = 'i\'m a boy.'; - 작은따옴표 중복 안겹치게 하기

문자열 붙이는 방법 
console.log('My' + ' car') // My car를 출력
const message = `my name is ${name}`; -백틱은 이런 용도로 잘 사용함  - 템플릿 리터럴 (Template literals)

onsole.log( a + age + "살" + b ) -  숫자 +문자 되면  문자로 봄

Boolean

true / false 표현하는 데이터이다.
나중에 자세히 배울예정!

null, undefined

null은 텅텅 비어 있는 값을 의미.
undefined은 변수를 선언만 하고 값이 할당되어 있지 않은 것.

let age = null
console.log(age); // null 출력 값이 비어있다는것을 알려줌

let age
console.log(age); // undefined 출력됨 변수만 선언되고 값은 할당안되어서.

산술연산자

사칙연산(+, -, *, /) 뿐만 아니라 // (나머지 연산), ** (거듭제곱) 도 있다.

console.log(2 + 1) // 3을 출력
console.log(2 - 1) // 1을 출력
console.log(4 / 2) // 2를 출력
console.log(2 * 3) // 6을 출력
console.log(10 % 3) // 나머지(remainder) 연산자. 1을 출력
console.log(10 ** 2) // exponentiation. 10의 2승인 100을 출력

증감연산자

자기 자신의 값을 증가시키거나 감소시키는 연산자(++, —)라고 생각하면 좋다.
이 증감연산자를 변수앞에 놓는냐, 변수뒤에 놓느냐에 따라 차이가 있다.

let count = 1
const preIncrement = ++count
// 증감연산자를 앞에 놓게 되면 아래 주석으로 처리한 두 줄의 코드와 같은 내용입니다.
// 먼저 자기 자신에게 1을 더해서 재할당 한 후, 이를 preIncrement 에 할당했다는 의미입니다.
// count = count + 1
// const preIncrement = count
console.log(`count: ${count}, preIncrement: ${preIncrement}`) // count: 2, preIncrement: 2

let count = 1
const postIncrement = count++
// 증감연산자를 뒤에 놓게 되면 아래 주석으로 처리한 두 줄의 코드와 같은 내용입니다.
// postIncrement에 자기 자신의 값을 먼저 할당하고, 이후에 1을 더해서 재할당합니다. 
// const postIncrement = count
// count = count + 1
console.log(`count: ${count}, postIncrement: ${postIncrement}`) // count: 2, postIncrement: 1 

여기서 const 가 아닌 let 구문으로 선언한 이유는
재할당이 안되는 const 특성상 오류가난다.

대입연산자

변수 할당하는게 대입연산자 사용한다는 의미이다.
= 뿐만 아니라 +=, -= 같은 것들을 통해서 연산과 대입을 한번에 할 수있다.

const shirtsPrice = 100000
const pantsPrice = 80000
let totalPrice = 0

totalPrice += shirtsPrice // totalPrice = totalPrice + shirtsPrice 와 동일
console.log(totalPrice)
totalPrice += pantsPrice // totalPrice = totalPrice + pantsPrice 와 동일 
console.log(totalPrice)

totalPrice -= shirtsPrice // totalPrice = totalPrice - shirtsPrice 와 동일
console.log(totalPrice) 

비교연산자

숫자값을 비교하는 연산자. boolean값 얻으려고 활용한다.
조건문에 많이 사용!

console.log(1 < 2) // 1이 2보다 작은가? true
console.log(2 <= 2) // 2가 2보다 작거나 같은가? true
console.log(1 > 2) // 1이 2보다 큰가? false
console.log(1 >= 2) // 1이 2보다 크거나 같은가? false

논리연산자

|| (or), && (and), ! (not) 과 같은 연산자를 말한다.
마찬가지로 조건문에 많이 사용.

|| 는 연산 대상 중 하나만 true 여도 true 리턴
&& 는 연산 대상이 모두 true 여야만 true 리턴
! 는 true를 false로, flase를 true로 바꿔서 리턴

let isOnSale = true
let isDiscountItem = true

console.log(isOnSale && isDiscountItem) // true && true 이므로 true
console.log(isOnSale || isDiscountItem) // true || true 이므로 true

isOnSale = false
console.log(isOnSale && isDiscountItem) // false && true 이므로 false
console.log(isOnSale || isDiscountItem) // false || true 이므로 true

isDiscountItem = false
console.log(isOnSale && isDiscountItem) // false && false 이므로 false
console.log(isOnSale || isDiscountItem) // false || false 이므로 false

console.log(!isOnSale) // !false 이므로 true

일치연산자

말 그대로 일치하는지 안하는지 하는 연산이다.

console.log(1 === 1) // true
console.log(1 === 2) // false
console.log('Javascript' === 'Javascript') // true
console.log('Javascript' === 'javascript') // 대소문자나 띄워쓰기도 다 정확히 일치해야함. 따라서 false

일치연산자 주의사항
자바스크립트에는 두 가지의 일치연산자가 있다. 우리가 배운 === 는 엄밀한 (strict) 일치연산자여서 비교하는 두 값의 데이터타입과 값 자체가 정확히 일치해야만 true를 리턴한다.
반면 == 는 비교하는 두 값의 데이터타입이 일치하지 않을 때 해당 값의 데이터타입을 자동으로 변환해주는 자바스크립트만의 특성이 있다. 이 특성이 자칫 개발자의 실수를 유발할 가능성이 크기 때문에 실무에서는 거의 쓰지 않다.
그래서 === 써라.

console.log(1 === "1") // false를 출력
console.log(1 == "1" // true를 출력

조건문

if, else if, else ....영어 문법시간에 배운 그 조건문이다.
용도도 똑같다. 코드를 통해서 보자.

const shoesPrice = 40000
if (shoesPrice < 50000) { // 신발 가격이 50000원보다 작으므로 해당 코드가 실행됨
	console.log('신발을 사겠습니다.')
}

const capPrice = 50000
if (capPrice < 50000) {
	console.log('모자를 사지 않겠습니다.') // 모자 가격이 50000원보다 작지 않으므로 해당 코드가 실행되지 않음
}

const shoesPrice = 50000
if (shoesPrice < 40000) { 
	console.log('신발을 사겠습니다.')
} else {
	console.log('너무 비싸요. 신발을 사지 않겠습니다.') // 신발 가격이 40000원보다 작지 않으므로 해당 코드가 실행됨
}

const shoesPrice = 50000
if (shoesPrice < 40000) { 
	console.log('신발을 사겠습니다.')
} else if (shoesPrice <= 50000) {
	console.log('고민을 해볼게요...')  // 신발 가격이 50000원보다 작거나 같으므로 않으므로 해당 코드가 실행됨
} else {
	console.log('너무 비싸요. 신발을 사지 않겠습니다.')
}


참고로
2km 이상이고 5km 미만을 distance >= 2 && distance < 5 이렇게 표현했는데, 5 > distance >= 2 이렇게 한줄로는 표현이 안된다고한다.
아직 그정도 발전한게 아니여서...

반복문

while문

let temperature = 20
while (temperature < 25) {
	console.log(`${temperature}도 정도면 적당한 온도입니다.`)
	temperature++ // 증감연산자를 활용해서 온도를 변화시킵니다.
}

참고로 무한루프에 걸리면 컨트롤+c 눌러서 탈출하자...

for문

for (begin; condition; step) { 조건을 만족할 때 실행할 코드 }

for (let temperature = 20; temperature < 25; temperature++) {
	console.log(`${temperature}도 정도면 적당한 온도입니다.`)
}


for문이 실행되는 순서
1. temperature라는 변수를 선언하고 값을 할당합니다. (begin)
2. temperature가 25보다 작은지 연산합니다. 결과값이 true라면 계속 실행. false라면 for 문 종료 (condition)
3. 중괄호 안의 코드가 실행됩니다.
4. temperature에 1을 더해서 재할당하고 2번 과정부터 다시 반복합니다. (step)

while, for 문 차이는 뭘까?
for문은 구하고자 하는 값이 정확한 조건이 있는 경우 사용한다(반복횟수가 정해진경우), 가독성 좋음.
while문은 구하고자 하는 값이 정확한 조건을 모를 경우 즉 유동적인 경우 사용(무한루프에서 특정조건 만족할때까지), 가독성 나쁨.

반복문 조건문 응용

반복문과 조건문을 같이 활용하여 1 ~ 10까지의 숫자중 3으로 나누었을 때 나머지가 0인 숫자를 구해서 출력.

for (let number = 1; number <= 10; number++) {
	if (number % 3 === 0) {
		console.log(`${number}는 3으로 나눠서 떨어지는 숫자입니다.`)
	}
}

1부터 20까지의 숫자중 홀수인 경우는 '숫자 ...은 홀수입니다.'를 짝수인 경우는 '숫자 ...은 짝수입니다' 를 출력하는 프로그램을 작성.

for (let number = 1; number <= 20; number++) {
	if (number % 2 === 0) {
		console.log(`숫자 ${number}는 짝수입니다.`)
	} else {
		console.log(`숫자 ${number}는 홀수입니다.`)
	}
}

숫자 21 미만 표현할때 Number <= 20 Number < 21 이렇게 두개로 표현할수 있는데, 전자를 추천한다... 왜냐하면 소수까지 나올수도있으니 
정확하게 표현하는게 좋다.

함수

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

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에 할당됨
    

 세 개의 물건가격을 매개변수로 전달받아 평균값을 리턴하는 함수를 정의하고, 그 함수를 호출해서 평균값을 출력.
 
 function calculateAvg(price1, price2, price3) {
	const avg = (price1 + price2 + price3) / 3
	return avg
}

const priceA = 1000
const priceB = 2000
const priceC = 3000
const avg = calculateAvg(priceA, priceB, priceC)
console.log(`평균가격: ${avg}`)

클래스와 객체

입력 자료를 종류별 템플릿으로 나눠서 입력을 더 용이하게 할수있게끔 하는것.
코드로 보자..

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

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

위에것을 더 쉽게하려면

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

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

객체만들기.

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
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)
자바스크립트에서는 객체 리터럴을 활용해서 바로 객체를 만들 수도 있다. 객체 리터럴은 클래스와 같은 템플릿 없이 빠르게 객체를 만들 수 있는 방법이라고 생각해주시면 됨. 2개 이상의 속성과 메소드가 있을 때는 쉼표로 구별해주고 가독성을 위해서 줄바꿈도 해주는 게 좋다.

const 변수명 = {

속성명: 데이터,

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

}




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

computer.printInfo()



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

결과적으로는 클래스를 활용해 객체를 만든 것과 동일하다. 그렇다면 왜 굳이 복잡하게 클래스를 정의하는 걸까? 바로 재사용성 때문. 한번 클래스를 만들어두면 같은 속성과 메소드를 갖고 있는 객체를 훨씬 더 간결한 코드로 만들 수 있다.

여러분만의 의류 쇼핑몰을 만들려고 합니다. 옷의 종류는 많지만 기본적으로 색깔, 사이즈, 가격의 속성을 갖고 있네요. 그리고 이 옷들의 세 속성을 바로 확인할 수 있게 출력해주는 메소드가 필요할 거 같습니다. 클래스와 객체를 활용해 작성해보아요.


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()



---
printinfo class 안에있다.... 괄호 잘 포함시키기..
코드 잘보기..

배열(Array)

같은 타입의 데이터들을 하나의 변수에 할당하여 관리하는 데이터 타입.

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

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

1번째 방법은 Array라는 클래스를 활용해서 객체를 만들었다고 생각하면 된다. 우리가 직접 Array라는 클래스를 선언한 적은 없지만 자바스크립트 내부적으로 이미 갖고 있다. 그래서 우리는 바로 사용을 하기만 하면 됩니다.

2번째 방법은 배열을 바로 만드는 방법. 대괄호 안에 우리가 배열로 저장할 데이터를 쭉 나열해주면 된다. 배열을 만들때는 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 를 응용해서 갯수(7)-1 을 하면, 6번째 violet 이 나온다.(0부터 시작하니까 맨마지막이 6번째임)

요소 추가와 삭제
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 출력



https://hianna.tistory.com/396
여기 블로그 참고.

조금 더 간결하게 코드 써보자
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씩 증가



조금 더 간결한 for문 형식
const rainbowColors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']

for (const color of rainbowColors) {
	console.log(color)
}
레인보우컬러스에 있는 요소들을 하나씩 하나씩 빼온다 of가.

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


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}`)



+=가 누적으로 더하는 식이다.

자바스크립트 강의가 끝났다...
후... 생각보다 오래걸렸다.
정리하고 이해하고 하는데...
예전에 조금 들어서 이해는 가는데
막상 퀴즈 풀려고하니까 막힌다..
막히지 않게 더 열심히 공부해야겠다.