[D+60]JavaScript문법뽀개기(2)

조건문 : if else

const shoesprice =70000
if ( shoesprice < 50000 ) {
    console.log('신발을 삼')
} else {
    console.log('안살래여')
}   >>>안살래여 

const shoesprice =50000
if ( shoesprice < 50000 ) {
    console.log('신발을 삼')
} else if (shoesprice <= 50000) {
    console.log('고민해볼게여')
} else {
    console.log('안살래여')
} >>>고민해볼게여

Q. 거리를 의미하는 변수를 선언하고 원하는 숫자값 (단위는 km라고 가정) 을 할당합니다. 2km 미만이면 "걸아가자"를, 2km 이상이고 5km 미만이면 "택시를 타자"를, 그 외에는 "기차를 타자"를 출력해봅니다.

const km = 7
if (km < 2) {
    console.log('걸어가자')
} else if (km>=2 && km<5) {
    console.log('택시타자')
} else {
    console.log('기차타자')
}   >>>기차타자

반복문

let temperature = 20
while (temperature < 25) {
    console.log(`${temperature}도 정도면 적당한 온도입니다.`)
    temperature++
}

20도 정도면 적당한 온도입니다.
21도 정도면 적당한 온도입니다.
22도 정도면 적당한 온도입니다.
23도 정도면 적당한 온도입니다.
24도 정도면 적당한 온도입니다.

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

조건문과 반복문의 활용

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

Q. 1부터 20까지의 숫자중 홀수인 경우는 '숫자 ...은 홀수입니다.'를 짝수인 경우는 '숫자 ...은 짝수입니다' 를 출력하는 프로그램을 작성해봅니다.

for (let number=1; number<=20; number++) {
    if (number % 2 ===0) {
        console.log(`${number}은 짝수입니다.`)
    } else {
        console.log(`${number}은 홀수입니다.`)
    }
}

함수

function calculateAvg(price1, price2) {
    const sum= price1+price2
    console.log(`두 상품 가격의 총합은 ${sum}원 입니다.`)
    const avg= sum/2
    return avg
}
const priceA = 1000
const priceB = 2000
const avg1= calculateAvg(priceA, priceB)
console.log(`A와B의 평균은 ${avg1}원 입니다. `)
const priceC =2000  
const priceD =3000
const avg2= calculateAvg(priceC, priceD)
console.log(`A와B의 평균은 ${avg2}원 입니다. `)
>>>
두 상품 가격의 총합은 3000원 입니다.
A와B의 평균은 1500원 입니다. 
두 상품 가격의 총합은 5000원 입니다.
A와B의 평균은 2500원 입니다.

클래스와 객체
1. 클래스란 객체를 만들 때 마치 설계도처럼 사용하는 것
(클래스는 템플릿, 객체는 구체화 한 것)
2. 객체란 관련있는 데이터들을 묶어서 한번에 잘 나타낼수 있는 데이터 타입
(물리적으로 존재하거나 추상적으로 생각할 수 있는 것중에서 자신의 속성을 갖고 있고 다른 것과 식별 가능한 것)

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

const notebook1 = new Notebook(Macbook, 20000, Apple)

Notebook이라는 클래스 안에 constructor라는 생성자 (객체가 생성 될 때 JavaScript 내부에서 호출되는 함수) 를 만들었고, 생성자 안에 (name, price, company) 라는 속성을 넣어 this라는 본인을 가리키는 클래스를 생성
객체를 만들기 위해서는 const notebook1 = new Notebook(Macbook, 20000, Apple)에서 notebook이라는 변수에 할당하고 Notebook이라는 클래스를 만들어주고 생성자를 호출한다.
그러면 객체를 하나하나 가져올 수 있다.

3. 메소드 : 클래스에서 속성 뿐만 아니라 함수같은 특정코드를 실행할 수 있는 메소드를 정의할 수 있다.

class product {
    constructor (name, price) {
        this.name = name,
        this.price = price
    }
    printInfo(){
        console.log (`상품명 : ${this.name}, 가격 : ${this.price}`)
    }
}

const notebook = new product('Macbook', 20000)
notebook.printInfo() 

위와 아래의 코드는 같다.
클래스를 활용하게 되면 간결하게 객체를 계속 만들어 낼 수 있어서 위와 같은 코드를 활용한다.

const computer = {
    name : 'APPLE MACBOOK',
    price : 20000,
    printInfo : function(){
        console.log(`상품명:${this.name}, 가격:${this.price}`)
    }
}
computer.printInfo()

Q. 여러분만의 의류 쇼핑몰을 만들려고 합니다. 옷의 종류는 많지만 기본적으로 색깔, 사이즈, 가격의 속성을 갖고 있네요. 그리고 이 옷들의 세 속성을 바로 확인할 수 있게 출력해주는 메소드가 필요할 거 같습니다. 클래스와 객체를 활용해 작성해보아요.

class clothes {
    constructor (color, size, price) {
    this.color=color,
    this.size=size,
    this.price=price
    }
    printInfo(){
        console.log(`색깔은 ${this.color} 사이즈는 ${this.size} 그리고 가격은 ${this.price}입니다.`)
    }
}
const coat = new clothes ('green' ,'L', 30000)
coat.printInfo()

주의할 점: 속성을 입력할 때 ',' 를 신경쓰자!!

배열
같은 타입의 데이터들을 하나의 변수에 할당하여 관리하기 위해 사욯하는 데이터타입.
같은 형식의 데이터를 순서대로 저장하는 것.
배열에서는 인덱스가 객체의 속성명과 같다. 특이점은 1이 아닌 0부터 시작한다는 점!

const rainbow = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']
console.log(rainbow[0]) >>red
console.log(rainbow[1]) >>orange
console.log(rainbow[2]) >>yellow
console.log(rainbow[3]) >>grenn
console.log(rainbow[4]) >>blue
console.log(rainbow[5]) >>indigo
console.log(rainbow[6]) >>violet
console.log(rainbow.length) >>7
console.log(rainbow[rainbow.length -1]) >>violet (마지막 인덱스값 출력)

const rainbow = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']
rainbow.push('ultraviolet') >>'ultraciolet'추가
console.log(rainbow)
rainbow.pop() >> 배열의 마지막 요소 삭제
console.log(rainbow)

배열의 요소를 하나씩 꺼내서 출력해야할 때 반복문을 활용한다.

const rainbow = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']
for (let i = 0;i < rainbow.length; i++) {
    console.log(rainbow[i])
}

아래는 배열과 함께 쓰이는 보다 간결한 반복문이다.

const rainbow = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']
for (const color of rainbow) {
    console.log(color)
}

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

const items=[100,200,300,400,500,600,700,800,900,1000]
let sum=0
for (const price of items) {
    sum +=price
}
const avg = sum/items.length
console.log(`합계:${sum} 평균은${avg}`)

가격데이터 배열을 만들고 가격합계를 알기 위해 sum이라는 변수를 만든다
그리고 간결한 반복문을 활용하기 위해 price라는 변수를 만들고 반복문을 통해 합계를 알 수 있는 코드를 만든다. 그리고 합계를 배열의 갯수로 나누어서 입력한다.

JavaScript의 기초문법을 배워봤는데 앞서 생활코딩이나 스파르타코딩의 웹개발종합강의를 통해 어느정도 알고 있는 부분도 있었지만, 객체라던지 배열의 반복문에서는 새로운 지식을 습득할 수 있었다.
기초적인 문법을 배운거지만 매우 몹시 기초적인 문법만 알고 있는 나에게는 매우 유용한 강의였고 이 강의를 통해서 능력치를 더 향상시켜야겟당..