221107 js 기초를 배우다

hana jeong·2022년 11월 7일
0

스파르타 부트캠프

목록 보기
8/68

오늘 배운 점

  1. 객체, 클래스
    객체는 관련있는 데이터를 모아서 표현하는 것
    즉 자신의 속성을 갖고 있고 다른 것과 식별이 가능한 것
    예를 들면 tv는 제품명과 가격, 제조사라는 속성을 가지고 있고 이는 타 tv와 식별이 가능하므로 객체로 나타낼 수 있다

    • 클래스
      	class Tv {
      	constructor(name, price, company) {
      	this.name = name
      	this.price = price
      	this.company = company
            }
         }
      }

여기서 constructor(생성자)는 나중에 객체가 생성될 때 js내부에서 호출이 되는 함수라고 생각하면 편함
this.name = name에서 this는 클래시를 사용해 만들어질 자기자신을 의미
뒤에 붙는 name, price, company는 객체의 속성

사실 클래스를 오늘 처음 알았다
내가 아는 거라곤 배열 뿐이었는데 또 새롭게 배워간다

  1. 메소드

클래스는 함수 같은 특정 코드도 실행할 수 있는 메소드도 정의 가능함
개체 생성 후 메소드 호출

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

printInfo() {
	console.log('사이즈: ${this.size}, 가격: ${this.price}원') 

  }
} 
const skirt = new clothes(95, 30000)
skirt.printInfo() // 출력결과 사이즈: 95, 가격: 30000

내가 지금까지 알던 메소드는 API method 밖에 없었는데 클래스를 알게 되었다
개념은 이해했는데 실전에서 어떻게 사용할지 궁금하다

  1. 배열과 반복문
const rainbowColors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']

for (let i = 0; i < rainbowColors.length; i++) {
console.log(rainbowColors[i])
}
// 출력결과
red
orange
yellow
green
blue
indigo
violet

여기까지는 알았는데 배열과 쓰이는 다른 for문 형식은 처음 알았다

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

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

그리고 이와 관련된 퀴즈로 풀었는데

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 += price 이 부분을 어떻게 할 지 몰라서 일단 비어두었는데 +=라는 대입연산자를 이용해서 쉽게 표현할 수 있다는 것을 알았다

오늘 느낀 점

자바스크립트 기초를 쭉 익히면서 퀴즈를 풀 때 내가 의도한 대로
코드를 짰을 때 재미를 느꼈다
그리고 내가 어떻게 작성해야할지 모르겠는 코드도, 발생한 에러를 해결하느라
고민하는 것도 재미가 있었다
사실 오늘 배운 내용은 자바스크립트를 가볍게 훑은 정도라 다른 인강이나
팀원들이 알려준 유튜브를 보면서 추가적인 학습을 하고 싶다는 생각이 들었다
그리고 오늘 배운 내용을 머릿속으로 그려보는 것도 필요하다는 생각이 많이 들었다
자바스크립트 마스터하고 싶어...!

내일 학습 목표

자바스크립트 강의 보면서 자바스크립트 좀 더 학습하기
학습한 내용 복습
복습하고 시간이 된다면 벨로그에 정리하기

profile
https://developer-hh.tistory.com 로 옮깁니다

1개의 댓글

comment-user-thumbnail
2022년 11월 8일

정리부터 느낀점까지 적어주셔서 너무 읽기 좋아요
복습과 추가학습은 언제나 좋은것 같습니다 :^)

답글 달기