[Javascript 2] 기초문법(2)

연산자

1. 문자열 붙이기
• "+" 기호 사용 시, 문자열을 합칠 수 있다.
• ex. "안녕"+"하세요" = "안녕하세요"로 출력.
• "+"기호 사용시, 변수를 문자열에 포함할때 변수의 이름을 그대로 추가하면 된다.


2. 템플릿 리터럴
• 백틱(``)을 사용해서 "+" 기호 없이 문자열을 합칠 수 있다.
• ex. `안녕하세요` = "안녕하세요"로 출력.
• 백틱 사용 시, 정해진 변수를 문자열에 포함할땐 ${변수} 형식을 사용한다


3. 산술연산자
• 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을 출력


4. 증감연산자
• 변수 앞에 "++" 사용 시: 제일 먼저 변수 자체에 1을 더하여 변수값을 재할당
• 정의된 변수"x"를 다른 변수"y"의 값으로 지정할때 (++x)로 지정하면 "x"의 값에 1을 더하여 x의 값을 재할당 한 뒤에 변수"y"의 값이 변한다.
• 변수 앞에 "++" 사용 시: 변수가 사용되는 다른 곳에 기존 값을 할당한 후 변수값에 1을 더하여 재할당변수"x"의 값이 사용되는 다른 변수"y"가 있는 경우, y에 먼저 기본 값을 할당한 후에 원래 변수 "x"의 값이 1 증가된다.
• 변수"x"의 값이 사용되는 다른 변수"y"가 있는 경우, y에 먼저 기본 값을 할당한 후에 원래 변수 "x"의 값이 1 증가된다


5. 대입연산자
• "+=" 기호를 사용하여 변수에 특정 값을 대입한 경우: 해당 변수에 특정값을 더하고 출력한다.
• 정의된 변수"x"에 "+="를 이용하여 다른 변수"y"의 값을 대입하면 출력되는 값은 "x+y"와 같다
• "-=" 기호를 사용하여 변수에 특정 값을 대입한 경우: 해당 변수에 특정값을 빼고 출력한다.
• 정의된 변수"x"에 "-="를 이용하여 다른 변수"y"의 값을 대입하면 출력되는 값은 "x-y"와 같다


6. 비교연산자
• 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


7. 논리연산자
• (|| = or): 연산 대상 중 하나만 true여도 true 리턴
• true || true = true
• true || false = true
• flase || true = true
• flase || false = false
• (&& = and): 연산 대상 모두 true여야 true 리턴
• true && true = true
• true && false = false
• flase && true = false
• flase && false = false
• (! = not): true를 false로, false를 true로 연산
• !true = false
• !false = true


8. 일치연산자
• 두 값을 비교했을 때 해당 값이 서로 일치하는지 확인하는 연산자
• "==" : 동등연산자. 엄밀하게 데이터가 동일하지 않아도 일치하는 것으로 판단
• "===": 일치연산자. 두 데이터가 엄밀하게 같아야 일치하는 것으로 판단 (대소문자, 띄어쓰기, 데이터타입 등이 모두 일치해야한다.
• console.log(1 === "1") // false를 출력
• console.log(1 == "1" // true를 출력

조건문

1. if문

• 특정 조건을 만족할때만 코드를 실행하는 방식
• 조건문의 조건을 Boolean 데이터라고 한다.
  • Boolean을 리턴하는 연산자는 비교연산자, 논리연산자, 일치연산자가 있다.
  • 연산자를 이용한 로직이 true일 경우, if문이 실행된다.

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

const capPrice = 50000
if (capPrice < 50000) {
	console.log('모자를 사지 않겠습니다.') // 모자 가격이 50000원보다 작지 않으므로 해당 코드가 실행되지 않음
}

2. else, else if

• else: if에서 특정 조건을 만족하지 않을 경우 실행되는 코드
• else if: 보다 더 많은 조건을 조건문에 추가할 수 있도록 사용하는 추가 조건

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

함수

1. 함수의 선언

• function (함수명) (매개변수들...) {
  "이 함수에서 실행할 코드들"
  return (반환값)
  }

  • 함수명은 해당 함수가 하는 일을 대표하는 명칭을 사용

• 함수 선언 시, 함수 내부에서 사용하는 매개변수(parameter)를 이용하여 함수의 input값을 지정한다.

// 함수의 선언
  function calculateAvg(price1, price2) {
      const sum = price1 + price2 // 매개변수인 price1, price2을 변수처럼 활용!
      console.log(`두 상품의 합계는 ${sum}입니다.`)
      const avg = sum / 2
      return avg // 평균가격을 리턴!
  }

• calculateAvg라는 함수를 선언했고, 해당 함수엔 두개의 매개변수(price1, price2)가 존재한다.
• 해당 함수가 실행하는 코드는 크게 두가지가 있다.
  • const sum: 두 매개변수의 합을 정의하는 또 다른 변수
  • const avg: 함수 내부에서 정의되었던 변수 "sum"을 이용하여 생성한 또 다른 변수
• 해당 함수의 출력값은 결과적으로 "변수 avg"의 값이지만, "변수 sum"의 결과를 콘솔에 찍기 때문에 해당 함수 사용 시 결과물은 avg의 값이 나타나지만 console엔 sum의 결과물이 콘솔에 찍힌다.

2. 함수의 호출

• const (변수명) = 선언한 함수명(매개변수들...)
• 선언했던 함수의 매개변수 값에 내가 사용하고자 하는 변수를 새로 지정해서 대입한다.

const priceA = 1000
const priceB = 2000
// 함수의 호출
const avg1 = calculateAvg(priceA, priceB)
console.log(`두 상품의 평균은 ${avg1}입니다.`)

const priceC = 3000
const priceD = 4000
// 함수의 호출
const avg2 = calculateAvg(priceC, priceD)
console.log(`두 상품의 평균은 ${avg2}입니다.`)

• calculateAvg라는 함수를 앞서 선언했고, 그 이후 원하는 변수를 함수의 매개변수로 대입했다.
  • price1, price2를 priceA, priceB로 대입
  • price1, price2에 priceC, priceD도 대입
    • 함수는 재사용성을 위한 코드이다.
• 그리고 console.log에 함수의 결과(return값)를 변수로서 출력하고자 해당 함수를 또 다른 변수(avg1, avg2)로 지정했다.