가수면

JavaScript 기초 문법 본문

웹 개발/웹 개발

JavaScript 기초 문법

니비앙 2022. 10. 25. 19:04

 

전체적으로 어렵진 않았으나

함수, 클래스와 객체, 배열 연습 부분은 다시 복습해볼 필요가 있음.

 

 


 

 

*문자열 붙이기*

문자열과 숫자를 이어붙이면 숫자가 문자로 인식된다

console.log('1'+2)

12
 

 

*증감연산자*

증감연산자의 위치

# 증감연산자를 앞에 놓을 때
let count = 1
const preCount = ++count
console.log(`count: ${count}, preCount: ${preCount}`)
count: 2, preCount: 2

# 증감연산자를 뒤에 놓을 때
let count = 1
const preCount = count++
console.log(`count: ${count}, preCount: ${preCount}`)
count: 2, preCount: 1

 

 

*대입연산자*

연산과 대입을 한번에

+=, -=

 

 

*논리연산자*

|| (or), && (and), ! (not)

|| 는 연산 대상 중 하나만 true 여도 true 리턴

&& 는 연산 대상이 모두 true 여야만 true 리턴

# 이렇게 활용도 가능
else if (distance >= 2 && distance < 5) {
	console.log("택시를 타자")
}

 

 

*함수*

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) # const avg1 = avg와 같은 말임
console.log(`A와 B의 평균은 ${avg1}입니다.`)

두 상품의 가격 총합은 3000입니다.
A와 B의 평균은 1500입니다.

 

 

*클래스와 객체*

# 클래스 선언 형식
class Notebook {
    constructor (name, price, company) {
        this.name = name
        this.price = price
        this.company = company
    }
}
# 객체 만들기
const notebook1 = new Notebook('Macbook', 2000000, 'Apple')

console.log(notebook1)
console.log(notebook1.name)
console.log(notebook1.price)
console.log(notebook1.company)
# 결과
Notebook { name: 'Macbook', price: 2000000, company: 'Apple' }
Macbook
2000000
Apple
# 클래스 선언
class Product {
    constructor (name, price) {
        this.name = name
        this.price = price
    }
# method 설정(일종의 함수 역할)
    printInfo() {
        console.log(`name: ${this.name}, price: ${this.price}`)
    }
}

const notebook = new Product('Macbook', 2000000)

notebook.printInfo()
# 결과
name: Macbook, price: 2000000
# 객체 리터럴
const computer = {
    name: 'Macbook',
    price: 20000000,
    printInfo: function() {
        console.log(`name: ${this.name}, price: ${this.price}`)
    }
}

computer.printInfo()
# 결과
name: Macbook, price: 20000000

 

 

*배열*

length 를 응용하여 배열의 마지막 요소도 쉽게 찾아서 출력 가능

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

console.log(rainbowColors[rainbowColors.length - 1])
# 결과
violet

# 배열의 마지막 요소 삭제
rainbowColors.pop()

연습

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

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

'웹 개발 > 웹 개발' 카테고리의 다른 글

JavaScript 기본 용어 및 개념 / 자료와 변수  (0) 2022.11.07
html이동, 페이지 이동  (0) 2022.11.05
Flask 복습  (0) 2022.10.24
프론트엔드 복습 (2)  (0) 2022.10.22
프론트엔드 복습 (1)  (0) 2022.10.21
Comments