🌖 11/08 내배캠 React 7일차

오늘 할 일 

• JavaScript 강의 끝내기
• JavaScript Deep dive 책 필사하기 (아침 8시)
• Git,Github 강의 듣기(생활코딩, 인프런)
• Python 맛보기 

 

계획표

시간	내용	결과
8:00~8:40	Js 아침 필사	☀️
9:00~15:00	Js 문법기초 강의	☀️
15:00~20:00	Python 강의	⛈
20:00~23:00	Git,git hub 강의	🌦

 

 

👩🏼‍🌾   오늘의 줍줍 " "

함수 ?

함수는 특정 작업을 수행하는 코드의 집합이라고 한다.

작업을 반복수행하면 코드를 어디에 저장해놓고 사용하면 편하기 때문에 함수를 만든것이다.

 

함수의 선언

구조 

function 함수명 (매개변수들...) {
		이 함수에서 실행할 코드들
        return 반환값
  }

 

---

Class와 객체(Object)?

- class : 객체를 만들 때 설계도처럼 사용하는 것

- 객체(Object) : 물질적으로 존재하고나 추상적으로 생각할 수 있는 것 중 자신의 속성을 갖고 다른것과 식별이 가능한 것

- class 키워드, 명 : class를 잘 나타낼 수 있는 명

- 생성자(constructor) : 중괄호 () 안에 적어준다. 객체가 생성될 때 Javascript냅에서 호출되는 함수이다.

- this, 속성(property) : this는 class를 사용해 만들어질 객체 자기자신, this 뒤에는 객체의 속성이 들어간다.

객체만들기

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

 

객체 리터럴(Object literal) : 클래스와 같은 템플렛 없이 빠르게 객체를 만들 수 있다.

구조 

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

=>  결과적으로 class를 활용해 객체를 만드는 것과 동일하다.

굳이 복잡하게 class를 정의하는 이유는? class를 만들어두면 같은 속성과 메소드를 갖고 잇는 객체를 훨씬 간결하게 코드로 만들 수 있는 재사용성 때문이다!

---

배열?

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

 

배열의 선언

방법 1) const arr 1 = new Array(1,2,3,4,5)

방법 2) const arr2 = [1,2,3,4,5]

= 2번 방법을 많이 사용한다. 훨씬 간결하기때문에 []대괄호만 이용하면 된다.   

 

배열의 길이

배열의 길이를 알고 싶다면 length속성을 추가하자. 

console.log(rainbowcolors.length)

 

배열요소 추가 / 삭제

추가 : push / 삭제 : pop

배열.push('추가하고싶은 데이터') => 배열의 잴 마지막에 추가

배열.pop() => 배열의 잴 마지막 부분이 삭제 

 

배열과 반복문

배열의 요소들을 하나씩 다 출력해야 할 때 간결한 방법

구조

for ( let i = 0 ; i < rainbowcolors.length ; i++){
        console.log(color)
 	}

구조 살펴보기 

1. 배열의 인덱스는 원래 0부터 시작이니 i의 시작값도 0으로 시작

2. i가 배열의 길이보다 작을 때에만 반복문 안의 코드 실행

3. 모든 요소를 빠짐없이 다 출력해야 하므로 i는 1씩 증가

+ 반복문의 간단한 for 문 : 위에 구조보다 조금 더 자주 쓰이는 for문

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

둘다 같은 기능을 하기 때문에 조금 더 간단한 두번째 for문을 많이 사용한다

 

* 연습문제

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

 정답

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

해설 : 열개의 데이터로 배열을 만들고 sum값을 이후에 반복문을 통한 합계가격을 알기위해 = 0을 준다.

다음 for문으로 반복문을 주는데 sum 에서 각 데이터인 price를 합하기 위해 sum += price라는 리턴값을 준다.

이후 avg 을 주기위해 sum(전체총합) /(나누기) priceList.length(배열의 길이)를 한다 89000 / 10

이후 console.log를 이용하여 sum = 89000, avg = 8900값을 출력한다.