JavaScript 추상화 기초

할당 연산자 (Assignment operators)

• 오른쪽에 있는 피연산자를 왼쪽에 있는 피연산자에 할당

let name = '연습'

console.log(name) // 연습

let x = 3

console.log(x) // 3

x = x - 2 // 오른쪽에 있는 피연산자를 왼쪽에 있는 피연산자에 할당

console.log(x) // 1

복합 할당 연산자(Compound assignment operators)

// 다음 두 줄은 같다
x = x + 1
x += 1

// 다음 두 줄은 같다
x = x * 2
x *= 2

// 다음 두 줄은 같다
x = x - 3
x -= 3

// 다음 두 줄은 같다
x = x / 2
x /= 2

// 다음 두 줄은 같다
x = x % 2
x %= 2

// 증가(increment), 감소(decrement) 연산자
// 다음 세 줄은 같은 의미다
x = x + 1
x += 1
x++

// 다음 세 줄은 같은 의미다
x = x - 1
x -= 1
x--

함수의 실행 순서

function sayHello() {
  console.log('Hello')
  console.log('Welcome to JavaScript!')
}

console.log('함수 호출 전')
sayHello()
console.log('함수 호출 후')
// 함수 호출 전
// Hello
// Welcome to JavaScript!
// 함수 호출 후

function square(x) {
  return x * x
}

console.log('함수 호출 전')
console.log(square(5))
console.log('함수 호출 후')
// 함수 호출 전
// 25
// 함수 호출 후

console.log('함수 호출 전')
console.log(square(2) + square(6))
console.log('함수 호출 후')
// 함수 호출 전
// 40
// 함수 호출 후

return문의 이해

// return이 함수를 종료
function returnTest(x) {
  console.log('return 전')
  return x * x
  console.log('return 후') // Dead Code, 작성하지 않는 것이 좋다.
}

console.log('함수 호출 전')
console.log(returnTest(3))
console.log('함수 호출 후')
// 함수 호출 전
// return 전
// 9
// 함수 호출 후

return과 console.log의 차이

function printSquare(x) {
  console.log(x * x)
}

function getSquare(x) {
  return x * x
}

printSquare(5) // 5
getSquare(5) // 출력되는 값이 없다.
console.log(getSquare(5)) // 25
console.log(printSquare(3))
// 3
// undefined

옵셔널 파라미터(Optional Parameters)

• Optional Parameter의 위치는 끝에 있어야 한다!

// 파라미터가 있는 함수에 파라미터를 전달하지 않으면 undefined가 나온다
function sayHi(name) {
  console.log(`안녕하세요, ${name}님`)
}

sayHi('javascript')
sayHi()
// 안녕하세요, javascript님
// 안녕하세요, undefined님
// undefined

// Optional Parameter의 위치는 끝에 있어야 한다. ( nationality = '대한민국'의 위치가 가운데로 오면 undefined 결과가 나온댜)
function introduce(name, age, nationality = '대한민국') {
  console.log(`제 이름은 ${name}입니다.`)
  console.log(`나이는 ${age}살 이고, `)
  console.log(`국적은 ${nationality}입니다.`)
}

introduce('자바스크립트', 21, '이탈리아') // 값을 모두 전달한 경우
// 제 이름은 자바스크립트입니다.
// 나이는 21살 이고,
// 국적은 이탈리아입니다.

introduce('자바스크립트', 21) // 파라미터 값을 생략한 경우
// 제 이름은 자바스크립트입니다.
// 나이는 21살 이고,
// 국적은 대한민국입니다.

변수의 스코프(scope)

• Scope: 범위, 영역

function myFunctionFirst() { // 블록문 (Block Statement)
  let w = 3 // 로컬 변수, 지역 변수 (Local Variable)
  console.log(w)
}

myFunctionFirst()
// console.log(w) // 변수 w가 정의되어 있지 않아서 에러 발생

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

let v = 5 // 글로벌 변수, 전역 변수 (Global Variable)

function myFunctionSecond() { // 블록문 (Block Statement)
  console.log(v)
}

myFunctionSecond()  // 5
console.log(v)  // 5

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

let z = 4 // 글로벌 변수, 전역 변수 (Global Variable)

function myFunctionThird() { // 블록문 (Block Statement)
  let z = 9 // 로컬 변수, 지역 변수 (Local Variable)
  console.log(z)
}

myFunctionThird() // 9
console.log(z) // 4

상수 (constant)

• 변하지 않는 값이기 때문에 const로 선언, 대문자로 표기
• 재할당 불가능

const PI = 3.14 // 원주율, 변하지 않는 값이기 때문에 const로 선언, 대문자로 표기
let radius = 0 // 반지름

// PI = 5 // 에러 발생, 상수는 재할당 불가능

// 원의 넓이를 계산하는 함수
function calculateArea() {
  return PI * radius * radius
}

// 반지름에 따른 원의 넓이를 출력하는 함수
function printArea() {
  return `반지름이 ${radius}일 때, 원의 넓이는 ${calculateArea()}`
}

radius = 4
console.log(printArea())

radius = 7
console.log(printArea())

radius = 8
console.log(printArea())