[스파르타코딩클럽] 자바스크립트 문법 뽀개기

• 변수

•  let 변수 선언 : 값 변경 가능

let name = 'Hyeonjin Joo'
console.log(name)

name = 'H-JJOO'
console.log(name)

• -const 변수 선언 : 값 변경 불가능

const name = 'Hyeonjin Joo'
console.log(name)

name = 'H-JJOO'

• 타입

• 숫자(Number)

let age = 30

• 문자열(String)

let name = 'Hyeonjin Joo'

• Boolean

let isMan = true
let isWoman = false

• null, undefined

let name = null // 빈값

let age // 변수를 선언만하고 값 할당 X

• 연산자

• 문자열 붙이기

console.log('My' + ' car')
console.log('1' + 2)
console.log(1+ 2)

• 산술연산자

console.log(2 + 1)
console.log(2 - 1)
console.log(2 * 3)
console.log(4 / 2)
console.log(10 % 3)
console.log(10 ** 2)

• 증감연산자

let cnt = 1
const preIncremnet = ++cnt
console.log(`count: ${cnt}, preIncremnet: ${preIncremnet}`)

const postIncremnet = cnt++
console.log(`count: ${cnt}, postIncremnet: ${postIncremnet}`)

• 대입연산자

const shirtsPrice = 100000
const pantsPrice = 80000
let totalPrice = 0

totalPrice += shirtsPrice
console.log(totalPrice) // 100000

totalPrice += pantsPrice
console.log(totalPrice) // 180000

totalPrice -= shirtsPrice
console.log(totalPrice) // 80000

• 비교연산자

console.log(1 < 2)
console.log(1 <= 2)
console.log(1 > 2)
console.log(1 >= 2)

• 논리연산자

let isOnSale = true
let isDiscountItem = true

console.log(isOnSale && isDiscountItem) // true && true 이므로 true
console.log(isOnSale || isDiscountItem) // true || true 이므로 true

isOnSale = false
console.log(isOnSale && isDiscountItem) // false && true 이므로 false
console.log(isOnSale || isDiscountItem) // false || true 이므로 true

isDiscountItem = false
console.log(isOnSale && isDiscountItem) // false && false 이므로 false
console.log(isOnSale || isDiscountItem) // false || false 이므로 false

console.log(!isOnSale) // !false 이므로 true

• 일치연산자

console.log(1 === 1) // true
console.log(1 === 2) // false
console.log('Javascript' === 'Javascript') // true
console.log('Javascript' === 'javascript') // 대소문자나 띄워쓰기도 다 정확히 일치해야 해요. 따라서 false

• 조건문

• if 

const shoesPrice = 30000
if (shoesPrice < 50000) {
    console.log('이 신발을 사겠습니다.')
}

• else 

const shoesPrice = 30000
if (shoesPrice < 40000) {
   console.log('신발을 사겠습니다.')
} else {
   console.log('너무 비싸요. 신발을 사지 않겠습니다.') // 신발 가격이 40000원보다 작지 않으므로 해당 코드가 실행됨
}

• else if

const shoesPrice = 50000
if (shoesPrice < 40000) {
   console.log('신발을 사겠습니다.')
} else if (shoesPrice <= 50000) {
   console.log('고민을 해볼게요...')  // 신발 가격이 50000원보다 작거나 같으므로 않으므로 해당 코드가 실행됨
} else {
   console.log('너무 비싸요. 신발을 사지 않겠습니다.')
}

• 반복문

• while

let temperature = 20//선언
while (temperature < 25) {//조건
   console.log(`${temperature}도 정도면 적당한 온도입니다.`)
   temperature++ // 증감연산자를 활용해서 온도를 변화시킵니다.//증감
}

• for

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

• 반복문과 조건문 활용 (1~10 중 3으로 나누었을때 나머지가 0 인 숫자 출력

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

• 함수

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

    이 함수에서 실행할 코드들
    
    return 반환값
    
    }

• 함수 선언

function calculateAvg(price1, price2) {
   const sum = price1 + price2 // 매개변수인 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

// quiz 세 개의 물건가격 매개변수 전달 평균값리턴 함수 정의, 그 함수 호출 평균값 출력

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

const priceA = 1000
const priceB = 2000
const priceC = 3000

const avgRetun = calculateAvg(priceA, priceB, priceC)

console.log(`세 물건의 평균은 ${avgRetun}원 입니다.`)

• 클래스와 객체

• 클래스 선언

class NoteBook {
    constructor(name, price, company) { // 생성자
        this.name = name
        this.price = price
        this.company = company
    }
}

• 객체 만들기

const notebook1 = new NoteBook('Mackbook', 2000000, 'Apple')

• 메소드 (method) : 함수와 같이 특정 코드를 실행할 수 있다.

class Product {
    constructor(name, price) {
        this.name = name
        this.price = price
    }
	// 메소드
    printInfo() {
        console.log(`name : ${this.name}, price : ${this.price}`)
    }
}

// 객체 생성 및 메소드 호출
const notbook = new Product('Macbook', 2000000)
notbook.printInfo()

• 객체 리터럴 (Object Literal) : 클래스와 같은 템플릿 없이 빠르게 객체를 만들 수 있는 방법

const 변수명 = {

속성명: 데이터,

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

}

• 배열(Array) : 같은 타입의 데이터들을 하나의 변수에 할당하여 관리하기 위해 사용하는 데이터 타입

• 배열의 선언

// 1번째 방법
const arr1 = new Array(1, 2, 3, 4, 5)

// 2번째 방법 ★☆★☆★☆ 이거 쓰면 됩니다.
const arr2 = [1, 2, 3, 4, 5]
console.log(arr2)

• 배열 안의 데이터

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

console.log(rainbowColors[0]) // o번 인덱스를 통해서 데이터에 접근. red
console.log(rainbowColors[1]) // 1번 인덱스를 통해서 데이터에 접근. orage
console.log(rainbowColors[2]) // 2번 인덱스를 통해서 데이터에 접근. yellow
console.log(rainbowColors[3]) // 3번 인덱스를 통해서 데이터에 접근. green
console.log(rainbowColors[4]) // 4번 인덱스를 통해서 데이터에 접근. blue
console.log(rainbowColors[5]) // 5번 인덱스를 통해서 데이터에 접근. indigo
console.log(rainbowColors[6]) // 6번 인덱스를 통해서 데이터에 접근. violet

• 배열의 길이 .length

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

console.log(rainbowColors.length) // 7을 출력

console.log(rainbowColors[rainbowColors.length - 1]) // length 를 응용하여 배열의 마지막 요소도 쉽게 찾아서 출력 가능!

• 요소 추가와 삭제 (추가 : .push, 삭제 : .pop)

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

rainbowColors.push('ultraviolet') // 배열의 마지막에 ultarviolet 추가
console.log(rainbowColors) // ultraviolet이 추가된 rainbowColors 출력

rainbowColors.pop() // 배열의 마지막 요소 ultraviolet을 제거
console.log(rainbowColors) // ultraviolet이 제거된 rainbowColors 출력

• 배열과 반복문

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

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

• 간단한 형식의 for 문

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

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

• Quiz

// quiz 열 개의 상품 가격 데이터 배열 만들고 반복문활용 가격합계와 평균 구하기

const goods = [5000, 3000, 9000, 13000, 40000, 1000, 12000, 12500, 4000, 500]

let sum = 0

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

for (const price of goods) {
    sum +=price
}

const avg = sum / goods.length

console.log(`합계 : ${sum} 평균 : ${avg}`)

 

============================================================================================

출처 : [스파르타코딩클럽] 자바스크립트 문법 뽀개기

============================================================================================