자바스크립트 강의 노트 2_연산자, 조건문, 반복문

HJ·2021년 12월 31일
0

JavaScript

목록 보기
2/45

1. 연산자(1)

  • 문자열 붙이기
    +를 사용하여 문자를 이어붙인다. 추가로 문자열과 숫자를 이어붙이면 숫자가 문자로 인식된다!
console.log('My' + ' car') // My car를 출력
console.log('1' + 2) // 12를 출력
  • 템플릿 리터럴 (Template literals)
    백틱(``) 을 사용하여 문자열 데이터를 표현. 따옴표나 작은 따옴표로 문자열을 표현할 때보다 간결하게 문자열 붙이기가 가능하다.
const shoesPrice = 200000
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)


VSCode에서 결과값 출력 잘 된다.

2. 연산자(2)

  • 문자열 붙이기
    +를 사용하여 문자열을 이어 붙일 수 있다. 문자열과 숫자를 이어붙이면 숫자가 문자로 인식된다.
console.log('My' + ' car') // My car를 출력
console.log('1' + 2) // 12를 출력
  • 템플릿 리터럴 (Template literals)
    백틱(``) 을 사용하여 문자열 데이터를 표현할 수 있다.
    따옴표로 문자열을 표현할 때 보다 간결하게 문자열 붙이기가 가능.
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)
  • 비교연산자
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
  • 논리연산자
    ||(or) 는 연산 대상 중 하나만 true 여도 true 리턴
    &&(and) 는 연산 대상이 모두 true 여야만 true 리턴
    !(not) 는 true를 false로, flase를 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를 출력

3. 조건문

  • if구문
const shoesPrice = 40000
if (shoesPrice < 50000) { // 신발 가격이 50000원보다 작으므로 해당 코드가 실행됨
	console.log('신발을 사겠습니다.')
}

const capPrice = 50000
if (capPrice < 50000) {
	console.log('모자를 사지 않겠습니다.') // 모자 가격이 50000원보다 작지 않으므로 해당 코드가 실행되지 않음
}
  • else, else if
    if 구문의 조건을 만족하지 않았을 때 실행하고 싶은 코드를 else 구문과 함께 작성한다.
const shoesPrice = 50000
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('너무 비싸요. 신발을 사지 않겠습니다.')
}

4. 반복문

  • while
    while (조건) { 조건을 만족할 때 실행할 코드 }
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}도 정도면 적당한 온도입니다.`)
}

for문이 실행되는 순서 정리

  1. temperature라는 변수를 선언하고 값을 할당합니다. (begin)
  2. temperature가 25보다 작은지 연산합니다. 결과값이 true라면 계속 실행. false라면 for 문 종료 (condition)
  3. 중괄호 안의 코드가 실행됩니다.
  4. temperature에 1을 더해서 재할당하고 2번 과정부터 다시 반복합니다. (step)
  5. 반복문과 조건문 활용
  • ✍️Q. 1부터 20까지의 숫자중 홀수인 경우는 '숫자 ...은 홀수입니다.'를 짝수인 경우는 '숫자 ...은 짝수입니다' 를 출력하는 프로그램을 작성
    for (let number = 1; number <= 20; number++) {
	if (number % 2 === 0) {
		console.log(`숫자 ${number}는 짝수입니다.`)
	} else {
		console.log(`숫자 ${number}는 홀수입니다.`)
	}
}
profile
HJ
이전 포스트

자바스크립트 강의 노트 1_변수, 데이터 타입

다음 포스트

자바스크립트 강의 노트 3_함수, 클래스와 객체, 배열

0개의 댓글