2-2. 반복문(2)
1. for 문
1) for문이란?
- while과 같은 반복문. 좀 더 명시적으로 반복문의 조건을 표현할 수 있습니다.
2) for문 코드
- for (begin; condition; step) {조건을 만족할 때 실행할 코드}
3) for문 예시
- for (let temperature = 20; temperature < 25; temperature++) {
console.log(`${temperature}도 정도면 적당한 온도입니다.`}
4) for문이 실행되는 순서
(1) temperature라는 변수를 선언하고 값을 할당한다. (begin)
(2) temperature가 25보다 작은지 연산합니다. 결과값이 true라면 계속 실행. false라면 for문 종료 (condition)
(3) 중괄호 안의 코드가 실행된다.
(4) temperature에 1을 더해서 재할당하고 2번 과정부터 다시 반복한다.
2-3. 반복문과 조건문 활용
1. 반복문과 조건문
- 우리가 짜는 프로그램은 반복문과 조건문의 무수한 집합이라고도 할 수 있을만큼 중요
- 입력된 데이터에 대해 조건문을 활용해 수많은 조건으로 분기하고, 반복해서 처리하는 게 프로그램이 주로 하는 일
2-4. 함수(1)
1. 함수
1) 함수란?
- 함수는 특정 작업을 수행하는 코드의 집합
- 반복되는 특정 작업을 수행해야 한다면 그 코드 자체를 어딘가에 만들어서 저장해놓고 사용할 수 있다.
마치 변수에 데이터를 할당해놓고 계속 사용하는 것처럼. 바로 이 때 등장하는 게 함수다.
2) 함수의 선언과 호출
(1) 함수의 선언
- 변수를 선언하고 해당 변수에 값을 할당했던 것처럼, 함수도 선언을 하고 해당 함수가 실행할 코드의 집합을 만들어서 저장해준다.
(2) 함수 공식
function 함수명(매개변수들...) {
이 함수에서 실행할 코드들
return 반환값
}
* 함수명
- 함수가 하는 일들을 대표할 수 있는 이름
* 매개변수
- 해당 함수의 바디에 있는 코드에서 사용할 수 있는 일종의 변수, 함수 호출시 전달하게 됨
- 함수를 실행하기 위해 필요한 일종의 input
* 중괄호 안
- 이 함수가 해야할 일들을 코드로 쭉 작성하고, 반환해야 할 값을 명시해준다.
3) 함수의 선언 예시
function calculateAvg(price1, price2) {
const sum = price1 + price2 // 매개변수인 price1, price2을 변수처럼 활용!
console.log(`두 상품의 합계는 ${sum}입니다.`)
const avg = sum / 2
return avg // 평균가격을 리턴
} 4) 함수의 호출
- 함수를 선언만 하고 끝내면 안 되고, 실제 이 함수를 사용하기 위해선 호출을 해야 한다.
const 변수명 = 선언한 함수명(매개변수들)
const priceA = 1000 const priceB = 2000
// 함수의 호출
const avg1 = calculateAvg(priceA, priceB)
console.log(`두 상품의 평균은 ${avg1}입니다.`)
2-5. 함수(2)
1. 함수 호출시 코드의 흐름
1) 함수 calculateAvg를 호출하면서 변수 priceA와 priceB를 매개변수로 전달
2) 함수 calculateAvg의 바디 코드가 실행됨. 이 때 1번에서 전달한 매개변수의 값이 함수를 선언할 때 썼던 매개변수명인 price1, price2에 할당되었다고 보면 됨
3) 함수의 바디 코드가 최종적으로 변수 avg를 리턴하고 있고, 이것이 변수 avg1에 할당됨
2. 퀴즈
- 3개의 물건가격을 매개변수로 전달받아 평균값을 리턴하는 함수를 정의하고, 그 함수를 호출해서 평균값을 출력해보세요
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}`)
2-6. 클래스와 객체(1)
1. 객체타입
1) 객체타입을 쓰는 이유
- 데이터의 기본 타입을 활용해서 필요한 데이터들을 적절히 표현하고 연산도 할 수 있다.
2) 객체타입을 쓰는 예시
- 예를 들어 노트북 전문 쇼핑몰이라면 여기서 파는 모든 노트북들의 이름, 가격, 제조사와 같은 데이터들을 기본 타입으로만 표현한다면 그 데이터들을 묶어서 표현하는 게 쉽지 않다. 이 때 사용하는 데이터 타입이 바로 객체 타입
- 노트북1은 이름, 가격, 제조사라는 자신만의 속성을 갖고 있고 다른 노트북들과 식별 가능한 것이니 객체로 나타낼 수 있다.
3) 객체타입 정의
- 물리적으로 존재하거나 추상적으로 생각할 수 있는 것중에서 자신의 속성을 갖고 있고 다른 것과 식별 가능한 것
2. 클래스타입
1) 클래스의 쓰임
- 객체를 만들 때 마치 설계도처럼 사용하는 것이 바로 클래스
- 클래스는 템플릿, 객체는 이를 구체화한 것
- 우리가 함수를 정의하고 해당 함수를 필요할 때 계속 사용할 수 있다.
- 마찬가지로 클래스를 미리 정의해놓으면 필요할 때마다 그 클래스를 사용해서 동일한 모양을 가진 객체를 만들 수 있다.
2) 클래스 예시
class Notebook {
constructor(name, price, company) {
this.name = name
this.price = price
this.company = company
}
}
3) class 키워드와 클래스명
- class는 클래스를 선언하는 문구이고 그 뒤에 바로 클래스 명이 나온다.
- 주의 사항 : 위의 예시에서 Notebook 대신 Person같은 이름을 쓴다면 다른 사람들이 코드를 봤을 때 이상하다고 생각할 것
4) 생성자(constructor)
- 중괄호 안에는 생성자라는 것을 적어준다.
- 생성자는 함수와 많이 비슷하다.
- 이 생성자는 말 그대로 나중에 객체가 '생성'이 될 때 자바스크립트 내부에서 호출이 되는 함수
- 생성자를 좀 더 살펴보면 3개의 매개변수를 정의했고, 각각의 이름은 name, price, company다.
5) this와 속성(property)
- 생성자는 말 그대로 나중에 객체가 생성이 될 때, 자바스크립트 내부에서 자동으로 호출이 되는 함수
- 생성자의 바디를 보면 this라는 키워드가 등장.
- this는 클래스를 사용해 만들어질 객체 자기 자신을 의미하고 this 뒤에 붙는 name, price, company는 객체의 속성
- 생성자의 바디에선 함수 호출시 전달할 매개변수 name, price, company를 객체의 속성 name, price, company에 각각 할당하고 있는 것
3. 객체 만들기
1) 객체 만들기 공식
- const 변수명 = new 클래스명(생성자에서 정의한 매개변수들...)
- const notebook1 = new Notebook('MacBook', 200000, 'Apple')
2-7. 클래스와 객체(2)
1. 메소드 (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원
2. 객체 리터럴 (Object Literal)
1) 객체 리터럴이란?
- 객체 리터럴은 클래스와 같은 템플릿 없이 빠르게 객체를 만들 수 있는 방법
- 자바스크립트에선 객체 리터럴을 활용해서 바로 객체를 만들 수도 있다.
- 2개 이상의 속성과 메소드가 있을 때는 쉼표로 구별해주고 가독성을 위해 줄바꿈도 해주는 게 좋다.
2) 객체 리터럴 공식
- const 변수명 = {
속성명: 데이터,
메소드명: function () { 메소드 호출시 실행할 코드들 }
}
- const computer = {
name: 'Apple Macbook',
price: 20000,
printInfo: function () {
console.log(`상품명: ${this.name}, 가격: ${this.price}원`)
}
}
computer.printInfo()
3) 객체 리터럴 코드 설명
- name, price라는 속성과 printInfo라는 메소드를 가지고 있는 객체를 만들어서 computer라는 변수에 할당하는 코드
- 해당 객체의 printInfo 메소드를 바로 호출까지 해봤다.
4) 굳이 복잡하게 클래스를 정의하는 이유
- 재사용성 때문
- 한번 클래스를 만들어두면 같은 속성과 메소드를 갖고 있는 객체를 훨씬 더 간결한 코드로 만들 수 있다.
2-8. 배열(1)
1. 배열(Array)
1) 배열을 쓰는 이유
- 자바스크립트에서 데이터를 표현하기 위한 방법으로 기본타입과 객체를 배웠다.
이걸로도 많은 걸 할 수 있지만 같은 형식의 많은 데이터를 순서대로 저장하고자 할 땐 데이터의 수만큼 변수들을 선언해줄 수밖에 없었다. 이 때 쓰는 것이 바로 배열이다.
2) 배열의 선언
- 숫자 1,2,3,4,5로 이루어진 배열을 선언하는 방법
* 첫번째 방법
- const arr1 = new Array(1, 2, 3, 4, 5)
=> array라는 클래스를 활용해서 객체를 만들었다고 생각해주면 된다.
* 두번째 방법
const arr2 = [1, 2, 3, 4, 5]
=> 배열을 바로 만드는 방법. 대괄호 안에 우리가 배열로 저장할 데이터를 쭉 나열해주면 된다.
그래서 배열을 만들땐 두번째 방법을 더 많이 쓴다.
3) 배열 안의 데이터
- 배열에 있는 데이터 각각을 우리는 요소(element)라고 부른다.
- 당연히 이 요소들에 쉽게 접근해서 바로 쓸 수도 있어야 한다.
- 객체도 속성명을 통해 해당 데이터에 쉽게 접근할 수 있다.
- 배열에선 인덱스(index)가 객체의 속성명과 같은 역할을 해준다.
- 인덱스는 배열 안의 데이터들이 자리잡은 순서라고 생각해주면 된다.
- 특이점은 이 인덱스가 0부터 시작한다.
4) 배열의 길이
- 배열은 같은 형식의 데이터를 순서대로 저장하는 것
- 그렇다면 이 배열이 얼마나 많은 데이터를 갖고 있는지, 그 길이를 알 필요가 있다.
- 위의 예시에서 rainbowColors는 요소의 갯수가 7개니까 그나마 눈으로 셀 수 있었지만 배열 안의 요소가 이보다 훨씬 더 많다면 만만치 않은 일이 될 것
- 이 때 사용하는 것이 바로 length 라는 속성
2-9. 배열(2)
1. 요소 추가와 삭제
1) 배열을 선언하고 난 이후에 새로운 요소를 더하거나 빼야할 필요가 있다.
const rainbowColors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']
rainbowColors.push('ultraviolet') // 배열의 마지막에 ultraviolet 추가
console.log(rainbowColors) // ultraviolet이 추가된 rainbowColors 출력
rainbowColors.pop // 배열의 마지막에 ultraviolet를 제거
console.log(rainbowColors) // ultraviolet이 제거된 rainbowColors 출력
2. 배열과 반복문
1) 반복문을 쓰는 이유
- 배열의 요소들을 하나씩 꺼내서 출력해야 하는 코드를 작성해야한다고 했을 때 좀 더 간결한 방법
2) 반복문 예시
const rainbowColors = ['red', 'orange', 'yellow', 'green', 'blue', indigo', 'violet']
for (let i = 0; i < rainbowColors.length; i++) {
console.log(rainbowColors[i])
}
3) 반복문 분석
- 배열의 인덱스는 0부터 시작이니 변수 i의 시작값도 0
- i가 배열의 길이보다 작을 때에만 반복문 안의 코드 실행
- 모든 요소를 빠짐없이 다 출력해야 하므로 i는 1씩 증가
4) 배열과 함께 좀 더 자주 쓰이는 간단한 형식의 for 문
const rainbowColors = ['red', 'orange', 'yellow', 'green', 'blue', indigo', 'violet']
for (const color of rainbowColors) {
console.log(color)
}
- 배열에서 요소들을 차례대로 하나씩 찾아 color라는 변수에 할당한다. 자동으로 배열의 끝까지 반복문이 실행되기 때문에 첫번째 for문보다 쓰기 편하다.
'TIL' 카테고리의 다른 글
| TIL 8일차 - app.py, flask (0) | 2022.11.10 |
|---|---|
| TIL 7일차 2 - 추천 공부법 (0) | 2022.11.08 |
| TIL 6일차 (0) | 2022.11.08 |
| TIL 5일차 - 미니 프로젝트 회고 (0) | 2022.11.04 |
| TIL 4일차 - 3주차 파이썬, 크롤링, DB, mongoDB, pymongo로 DB 조작하기 (0) | 2022.11.04 |
