자바스크립트 문법 뽀개기2

자바스크립트 문법 뽀개기2

 

• Chrome
• Visual Studio Code
• Node.js

---

반복문

 

📌 while

while(조건) {

    조건이 만족할 때 실행할 코드

}

변수의 값을 계속 변화를 줘서 언젠가는 반복문이 끝날 수 있도록 해줘야 합니다.

false를 리턴하고 바디의 코드가 실행되지 않아야 종료할 수 있습니다.

무한루프레 빠져 프로그램이 끝나지 않는 불상사가 발생할 수 있으니 주의해주세요!

만약, 무한 루프에 빠지면  터미널에서  ctrl+c를 눌러 프로그램 중단시켜줘야 합니다.

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

 

📌 for

좀 더 명시적으로 반복문 조건을 표시할 수 있음

 

for(begin; condition;step) {

    조건을 만족할 때 실행할 코드

}

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

 

📌 반복문과 조건문 활용 quiz

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

---

함수

특정 작업을 수행하는 코드의 집합.

반복되는 특정 작업을 반복 수행하기 위해 사용.

 

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

    이 함수에서 실행할 코드들

    return 반환값

}

 

📌 매개변수(parameter)란?

해당 함수의 바디에 있는 코드에서 사용할 수 있는 일종의 변수.

함수 호출 시 전달하게 됩니다. 함수를 실행하기 위해 필요한 일종의 input이라고 생각하면 됩니다.

 

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(`두 상품의 평균은 ${avg1}입니다.`)

 

📌 quiz

function calculateAvg(price1, price2, price3) {
    const sum = price1 + price2 + price3
    return sum/3
}

const avg = calculateAvg(1000, 2000, 3000)
console.log(`세 개의 물건 가격의 평균값은 ${avg}입니다.`)

---

클래스와 객체

 

관련있는 데이터를 묶어서 한번에 잘 나타낼 수 있는 데이터 타입은 없을까?

예를 들어 수많은 노특북들을 노트북의 이름, 가격, 제조사와 같은 데이터를 묶어서 표현하면 더욱 효율적으로 구분 될 겁니다.

이럴 때, 사용하는 데이터 타입이 바로 객체 타입입니다.

 

📌 객체(Object)란?

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

 

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

 

📌 클래스 class

클래스명은 첫글자 대문자!!

데이터를 잘 나타낼 수 있는 이름을 사용하는 것이 좋겠죠?

 

📌 생성자 constructor

중괄호 안에 적어주는 것으로 함수와 비슷합니다.

객체가 생성 될 때 자바스크립트 내부에서 호출되는 함수라고 생각하면 이해가 쉽습니다.

 

📌 this와 속성(property)

this는 클래스를 사용하면 만들어질 객체 자기 자신을 의미합니다.

그 뒤에 붙는 name, price, company는 객체 속성을 의미합니다.

 

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

const Notebook1 = new Notebook('Macboock', 2000000, 'Apple')

console.log(Notebook1)
console.log(Notebook1.name)
console.log(Notebook1.price)
console.log(Notebook1.company)

 

📌 메소드(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()

 

📌 객체 리터럴(Object Literal)

객체 리터럴은 클래스와 같은 템플릿 없이 빠르게 객체를 만들 수 있는 방법입니다.

 

const 변수명 = {

    속성명:데이터,

    메소드명:function(){메소드 호출시 실행할 코드들}

}

const computer = {
    name : 'Macbook',
    price : 2000000,
    printInfo: function() {
        console.log(`name: ${this.name}, price : ${this.price}`)
    }
}

computer.printInfo()

 

📌 그렇다면 겍체 리터럴을 사용하면 되는데, 왜 클래스를 사용하나요?

그 이유는 클래스의 재사용성 때문입니다.

 

📌 quiz

class Cloth {
    constructor(color, size, price){
        this.color = color
        this.size = size
        this.price = price
    }

    printInfo(){
        console.log(`color : ${this.color} \nsize : ${this.size} \nprice : ${this.price}`)
    }
}

const outer = new Cloth('brown', 'XL', 55000)
outer.printInfo()

---

배열(Array)

같은 형식의 많은 데이터를 순서대로 저장하고자 할때 사용.

// 자바스크립트 내부 class Array
const arr1 = new Array(1, 2, 3, 4, 5)

// 내가 직접 입력
const arr2 = [1, 2, 3, 4, 5]

배열에 내부에 있는 값을 요소(element)라고 합니다.

 

📌 index로 요소값 접근!

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

for(let i =0; i<rainbowColors.length; i++) {
    console.log(rainbowColors[i])
}

index는 0부터 시작한다는 점에 유의해야 한다.

 

📌 요소 추가(push)와 삭제(pop)

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

// 배열 제일 마지막에 추가
rainbowColors.push('ultraviolet')
console.log(rainbowColors)

// 배열 제일 마지막 요소 제거
rainbowColors.pop()
console.log(rainbowColors)

 

📌 quiz

const price = [10000, 12500, 200000, 45000, 50000, 89990, 10000, 17000, 20000, 99900]

let sum = 0
for(let i=0; i<price.length; i++){
    sum += price[i]
}

const avg = sum / price.length

console.log(`상품들의 합계는 ${sum}원이고 평균은 ${avg}원 입니다.`)

처음에 10으로 나눠줬으나, 강의를 듣고 price.length로 변경!

 

더 많은 요소를 받더라도 코드를 수정해 줄 필요가 없어 price.length로 나눠주는 것이 효율적!!