[JavaScript] 스파르타 자바스크립트 기초 인강(8강~끝)

1. 반복문

 ◼ while

   while (조건) {조건 만족 시 실행할 코드}

     - while뒤의 조건이 계속 true라면 무한루프에 빠짐. 언젠가는 조건이 false를 return하여 while문을 끝나게 해야함

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

 ◼ for 

  while문보다 조금 더 명시적으로 반복문의 조건을 표함

 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)

 

 ◼ 반복문과 조건문

     1~10까지의 숫자 중 3으로 나누었을때 나머지가 0인 숫자 출력하기

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

 

2. 함수 

함수는 특정 작업을 수행하는 코드의 집합. 반복되는 특정 작업을 수행한다면, 그 코드 자체를 어딘가에 만들어서 저장해놓고 바로 사용하기 위해 사용

 

 ◼ 함수의 선언

   매개변수는 해당 함수의 바디에 있는 코드에서 사용할 수 있는 일종의 변수, 함수 호출시 전달. 일종의 input 개념

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

이 함수에서 실행할 코드들

return 반환값

}

  함수 선언 예시 코드

// 함수의 선언
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에 할당됨

 

3. 클래스와 객체

 

 ◼ 객체(Object)타입

물리적으로 존재하거나 추상적으로 생각할 수 있는 것중에서 자신의 속성을 갖고 있고 다른 것과 식별 가능한 것

 ◼ 클래스(Class 선언)

객체를 만들때 마치 설계도처럼 사용하는 것이 바로 클래스. 클래스를 미리 정의해놓으면 필요할 때마다 그 클래스를 사용해서 동일한 모양을 가진 객체를 만들 수 있다.

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

 - class는 클래스를 선언하는 문구, Notebook이 class명

 - 생성자(Constructor)

    생성자는 말 그대로 나중에 객체가 '생성'이 될 때 자바스크립트 내부에서 호출이 되는 함수

- this와 속성(property)

   this는 클래스를 사용해 만들어질 객체 자기 자신을 의미하고 this 뒤에 붙는 name, price, company는 객체의 속성. 생성자의 바디에서는 함수 호출시 전달할 매개변수 name, price, compay를 객체의 속성 name, price, company에 각각 할당하고 있는 것입니다.

 

 ◼ 객체 생성

 - new 키워드를 클래스명 앞에 써줌

- 클래스명을 함수처럼 호출하며, 매개변수값을 전달
  -> 클래스 생성자가 호출되면서 객체 생성, 객체 속성들에 매개변수값들이 할당됨 

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

//예시
const notebook = new Notebook('MacBook', 2000000, 'Apple')

- 만들어진 객체는 변수에 할당하고 변수를 활용해 객체에 접근한다

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

  -  이렇게 하면 간단한데 왜 클래스를 만들까? 

   한번 클래스를 만들어두면 같은 속성과 메소드를 갖고 있는 객체를 훨씬 더 간결한 코드로 만들 수 있음. 재사용성 때문

 

4. 배열

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

◼ 배열 선언

// 1번째 방법
// Array() 생성자는 새로운 Array 객체를 생성할 때 사용
const arr1 = new Array(1, 2, 3, 4, 5)

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

 

◼ 배열 데이터 & 길이

배열에 있는 데이터 각각을 우리는 요소 (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라는 속성 사용

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

// length 를 응용하여 배열의 마지막 요소 출력
// violet 출력
console.log(rainbowColors[rainbowColors.length - 1]) 

 

◼ 요소 추가 및 삭제

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

// 혹은 간결하게


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

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

color라는 변수에 할당하여 출력