📓 JavaScript 기초 - TIL 2

1. 반복문
2. 반복문과 조건문 활용
3. 함수
4. 클래스와 객체
5. 배열

1️⃣ 반복문

→ 반복문은 특정 코드를 반복해서 실행할 수 있게 해주는 역할을 한다. 즉, 반복문을 활용하면 쉽게 특정 코드를 반복해서 실행할 수 있게 할 수 있다는 것!
이때, 조건을 설정해서 원하는 만큼 조건에 따라 반복할 수 있다.

1) while문
while (조건) { 조건을 만족할 때 실행할 코드 }

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

• 주의할 점은 조건에 포함이 되는 변수의 값에 변화를 줘서 조건에 의해서 반복문이 끝날 수 있도록 해야 한다는 점!
  만약 변수 값에 아무런 변화를 주지 않는다면 똑같은 실행이 계속해서 반복된다.
  즉, 반복문의 조건이 계속해서 true 를 리턴한다면 무한루프에 빠져서 프로그램이 끝나지 않는다는 것! 그렇기 때문에 false에 해당할 수 있도록 반복문이 끝낼 수 있는 변화를 주어야 한다.
  강제 종료 : ctrl + c(맥도 똑같이)

2) for문
for (begin; condition; step) { 조건을 만족할 때 실행할 코드 }
-> → for문은 while문보다 명시적으로 반복문의 조건을 표현할 수 있다.

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

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

2️⃣ 반복문과 조건문의 활용

→ 반복문과 조건문은 코딩의 핵심이다!
입력된 데이터에 대해 조건문을 활용해 수많은 조건으로 분기하고 반복문을 활용해 반복해서 처리하는 게 프로그램이 주로 하는 일이기 때문…!

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

[ 연습 ]

for (let number = 1; number <= 20; number++) {
	// 짝수 = 2로 나누었을 때 나머지가 0 + 그렇지 않은 숫자는 모두 홀수
	if (number % 2 === 0) {
		console.log(`숫자 ${number}는 짝수입니다.`)
	} else {
		console.log(`숫자 ${number}는 홀수입니다.`)
	}
}

3️⃣ 함수

→ 함수란 특정 작업을 수행하는 코드의 집합이다.
동일한 작업을 하는 코드에 대해 함수로 정의하고 변수 값에만 변화를 주어 손쉽게 사용할 수 있게 해주는 것!
( 동일한 작업에 대해서 긴 코드를 계속 작성하는 것은 효율적이지 않기 때문에…! )

function 함수명(매개변수들...) {
이 함수에서 실행할 코드들
return 반환값
}
→ 변수를 선언하고 해당 변수에 값을 할당했던 것처럼, 함수도 선언을 하고 해당 함수가 실행할 코드의 집합을 만들어서 저장해 준다.

// 함수 정의
function calculateAvg(price1, price2) {
    const sum = price1 + price2
    console.log(`두 상품의 총 합은 ${sum}원 입니다.`)
    const avg = sum / 2
    return avg
}
// 함수는 만든 다음에 호출을 해야지만 작동한다.

// 작업1
const priceA = 20000
const priceB = 30000
const avgA = calculateAvg(priceA, priceB)
console.log(`A와 B의 평균은 ${avgA}입니다.`)

// 작업2
const priceC = 12000
const priceD = 13000
const avgB = calculateAvg(priceC, priceD)
console.log(`C와 D의 평균은 ${avgB}입니다.`)

// 작업1과 2처럼 특정 변수만 변화를 주어 동일한 코드를 손쉽게 반복적으로 사용 가능하게 한다!

• 매개변수란? : 매개변수(parameter)는 함수의 바디에 있는 코드를 사용할 수 있는 일종의 변수이고 함수를 호출할 때 ()안으로 전달받게 된다.
  함수를 실행할 때 필요한 일종의 input과 같다고 생각!

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

-> 주의할 점! = 함수는 선언만 해서는 안 되고 실제로 호출을 해야지만 실질적인 코드 작동이 된다! 즉, 함수는 선언

[ 호출의 방법 ]
호출 방법1 const 변수명 = 선언한 함수명(매개변수들...)

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

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

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

[ 연습 ]

// 매개변수를 너무 많이 사용하는 것은 좋지 않다!
function average(price1, price2, price3) {
    const sum = price1 + price2 + price3
    const avg = sum / 3
    // ( price1 + price2 + price3 / 3과 동일
    return avg
}

const priceA = 15000
const priceB = 30000
const priceC = 24000

const avg1 = average(priceA, priceB, priceC)
console.log(`평균값은 ${avg1}원 입니다.`)

4️⃣ 클래스와 객체

1) 객체 타입
→ 객체 타입이란? : 관련 있는 데이터들을 묶어서 한 번에 잘 나타낼 수 있도록 해주는 데이터 타입!
객체 = 물리적으로 존재하거나 추상적으로 생각할 수 있는 것 중에서 자신의 속성을 갖고 있고 다른 것과 식별 가능한 것

// 노트북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
	}
}

-> class는 클래스를 선언하는 문구 뒤에는 클래스명이다.(표현하고자 하는 데이터를 잘 나타내줄 수 있는 이름으로 정의하는 것이 좋다!)
constructor은 나중에 객체가 '생성'이 될 때 자바스크립트 내부에서 호출이 되는 함수.
this 키워드는 클래스를 사용할 때 만들어질 객체 자기 자신을 의미하는 키워드. this 뒤에 붙는 name, price. company가 객체의 속성이다.

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

const notebook1 = new Notebook('MacBook', 2360000, '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

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

// 클래스 선언
class Product {
	constructor(name, price) {
		this.name = name
		this.price = price
	}

	// 객체의 속성들을 표현하는 방식에 대한 메소드 설정
	printInfo() {
		console.log(`name: ${this.name}, price: ${this.price}원`)
	}
}

// 객체 생성 및 메소드 호출
const notebook = new Product('Apple Macbook', 2000000)
notebook.printInfo() // 상품명: Apple Macbook, 가격: 2000000원

• 객체 리터럴 : 자바스크립트에서는 객체 리터럴을 활용해서 바로 객체를 만들 수도 있다.
  객체 리터럴은 클래스와 같은 템플릿 없이 빠르게 객체를 만들 수 있는 방법!
  2개 이상의 속성과 메소드가 있을 때는 쉼표로 구별해 주고 가독성을 위해서 줄바꿈도 해주는 게 좋다.

const 변수명 = {
속성명: 데이터,
메소드명: function () { 메소드 호출시 실행할 코드들 }
}

const computer = {
	name: 'Apple Macbook',
	price: 20000,

	// 메소드 설정
	printInfo: function () {
		console.log(`상품명: ${this.name}, 가격: ${this.price}원`)
	}
}

computer.printInfo()

[ 연습 ]

class cloths {
    // 객체 속성 정의
    constructor(color, size, price) {
        this.color = color
        this.size = size
        this.price = price
        // 매개변수를 속성에 할당
    }

    // 메소드 정의 -> 속성들을 출력해주는 메소드 정의
    printInfo(){
        console.log(`color : ${this.color}, size : ${this.size}, price : ${this.price}`)
    }
}

// 객체 생성
const cloth1 = new cloths('red', 'Free', 24000)

// 객체의 메소드 호출
cloth1.printInfo()

5️⃣ 배열

→ 배열이란? : 같은 형식의 많은 데이터를 순서대로 저장하고자 할 때는 데이터의 수만큼 변수들을 선언해 줄 수밖에 없다. 이때 쓰는 것이 바로 배열!
같은 타입의 데이터들을 하나의 변수에 할당하여 관리하기 위해 사용하는 데이터 타입.

[ 배열 선언 방법 ]

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

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

-> 2번째 방법은 배열을 바로 만드는 방법.
대괄호 안에 우리가 배열로 저장할 데이터를 쭉 나열해 주면 끝! = 배열을 만들 때는 1번째보다는 2번째 방법을 많이 사용한다.

• 배열에 있는 데이터 각각을 요소(element)라고 부른다. 배열에서는 인덱스를 통해서 각각의 요소에 접근할 수 있다.
  인덱스? : 인덱스는 배열 안의 데이터들이 자리 잡은 순서! → 주의할 점은 인덱스는 1이 아닌 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 rainbow = ['red', 'orang', 'yellow', 'green', 'blue', 'indigo', 'violet']

for (let i = 0; i < rainbow.length; i++) {
		console.log(rainbow[i])
	  // 0부터 6까지의 요소 불러오기
}

// 방법2
for (const color of rainbow){
    console.log(color)
}

[ 연습 ]

const price = [23000, 15000, 9900, 70000, 46000, 12000, 34000, 45000, 20000, 8600]
let sum = 0

for (let i = 0; i < price.length; i++){
    sum = sum + price[i]    
}
// for (const prices od price) {
//     sum += price   
// }

const totalSum = sum
const avg = sum / price.length

console.log(`합계 : ${totalSum} 평균 : ${avg}`)