[ TIL ] 11.23(수) 8일차

JavaScript

연산자

어떤 데이터와 데이터를 같이 처리해서 그 결과 값을 반환

 

문자열 붙이기

문자열을 이어 붙일 수 있다.

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

console.log('My' + ' car') // My car를 출력
console.log('1' + 2) // 12를 출력

 

템플릿 리터럴

백틱( `` ) 을 사용하여 문자열 데이터를 표현할 수 있다

const shoesPrice = 200000
console.log(`이 신발의 가격은 ${shoesPrice}원입니다`) 
// console.log('이 신발의 가격은 ' + shoesPrice + '원입니다') 와 동일
// + 를 활용한 문자열 붙이기보다 간결하게 표현할 수 있다는 게 보이시나요?

 

산술연산자

사칙연산, 나머지 연산, 거듭제곱을 한다.

console.log(2 + 1) // 3을 출력
console.log(2 - 1) // 1을 출력
console.log(4 / 2) // 2를 출력
console.log(2 * 3) // 6을 출력
console.log(10 % 3) // 나머지(remainder) 연산자. 1을 출력
console.log(10 ** 2) // exponentiation. 10의 2승인 100을 출력

 

증감연산자

자기 자신의 값을 증가 또는 감소시키는 연산자

증감연산자를 변수 앞,뒤의 위치에 따라 차이가 있다.

 

앞에 있을때 

let count = 1
const preIncrement = ++count
// 증감연산자를 앞에 놓게 되면 아래 주석으로 처리한 두 줄의 코드와 같은 내용입니다.
// 먼저 자기 자신에게 1을 더해서 재할당 한 후, 이를 preIncrement 에 할당했다는 의미입니다.
// count = count + 1
// const preIncrement = count
console.log(`count: ${count}, preIncrement: ${preIncrement}`) // count: 2, preIncrement: 2

뒤에 있을때

let count = 1
const postIncrement = count++
// 증감연산자를 뒤에 놓게 되면 아래 주석으로 처리한 두 줄의 코드와 같은 내용입니다.
// postIncrement에 자기 자신의 값을 먼저 할당하고, 이후에 1을 더해서 재할당합니다. 
// const postIncrement = count
// count = count + 1
console.log(`count: ${count}, postIncrement: ${postIncrement}`) // count: 2, postIncrement: 1

 

대입연산자

어떤 값을 어떤 변수에 할당한다

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

totalPrice += shirtsPrice // totalPrice = totalPrice + shirtsPrice 와 동일
console.log(totalPrice)
totalPrice += pantsPrice // totalPrice = totalPrice + pantsPrice 와 동일 
console.log(totalPrice)

totalPrice -= shirtsPrice // totalPrice = totalPrice - shirtsPrice 와 동일
console.log(totalPrice)

비교연산자

숫자값을 비교하는 연산자

비교연산자를 통해서 얻는 값이 바로 boolean ( true / false )

console.log(1 < 2) // 1이 2보다 작은가? true
console.log(2 <= 2) // 2가 2보다 작거나 같은가? true
console.log(1 > 2) // 1이 2보다 큰가? false
console.log(1 >= 2) // 1이 2보다 크거나 같은가? false

 

논리연산자

|| 는 하나만 true 여도 true

&& 는 둘다 true 여야만 true

! 는 반대로 리턴 [ true > false , false > true ]

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

== 과 ===의 차이점

console.log(1 === "1") // false를 출력
console.log(1 == "1" // true를 출력

 

Q. 상품 가격을 나타내는 2개의 변수를 선언하고 각각의 변수에 원하는 가격값을 할당해보아요. 두 상품을 더한 가격 역시 총가격을 나타내는 변수에 할당해봅니다. 마지막으로 총가격의 20% 할인된 가격을 구해서 '총 몇 원에 물건을 구입합니다.' 라는 문자열을 출력합니다.

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


totalPrice = shirtsPrice + pantsPrice // totalPrice = totalPrice + shirtsPrice 와 동일


totalPrice = totalPrice * 0.8


console.log(`총 ${totalPrice}원에 물건을 구입합니다.`)

아래는 해설 코드

 

const shoesPrice = 200000
const capPrice = 100000
const totalPrice = shoesPrice + capPrice

console.log(`총 ${totalPrice * 0.8}원에 물건을 구입합니다.`)