함수

new Function()

• 생성자 함수 호출로 함수를 만드는 법!
  자주 안씀.

const sum = new Function("a", "b", "console.log(a + b)");
sum(2, 4)

function sum (a, b) {
  console.log(a + b)
}
sum(2, 4)

---

반환과 종료

return

• return 키워드를 사용하면 종료와 반환

---

선언문과 표현식

1. 선언문: 호이스팅 O

function abc() { // 기명함수

}

function () { // 익명함수, 선언 x, 콜백 함수 용도로 사용

}
 

1. 표현식: 호이스팅 X

const abc = function() {

}

---

매개변수 패턴

• 매개변수 기본값

const user = {
  name: "hello",
  age: 400
} 

function getName({name, age, email = "all@naver.com"}) { 
  return [name, age, email]
}

console.log(getName(user))

• 구조 분해 할당(Destructuring assignment)
• 나머지 매개변수
• arguments 객체

---

IIFE

• Immediately-Invoked Function Expression
• 즉시 실행 함수

;(익명함수)()
;(익명함수())

(function() {
  console.log(33)
})()

---

호이스팅

• javascript가 읽고있을때 끌어올려서 처리한다는 뜻.
  함수 선언부가 유효범위 최상단으로 끌어올려지는 현상

const a = 7

double()

function double() {
  console.log(a * 3)
}

---

콜백

• 콜백 함수(Callback function) => 콜백 함수의 인수로 사용되는 함수

function timeout(callback) {
  setTimeout() => {
    console.log('pansik')
    callback()
  }, 3000
}
timeout(() => {
  console.log('apple!')
}) 
// timeout 함수를 호출할때 인수가 callback 매개변수로 들어간다.

---

화살표 함수

• function 대신 화살표 함수를 사용하여 간략한 방법으로 함수를 선언 할 수 있다.

• () => {} vs function() {}

const double = function (x) {
  return x * 2
}
console.log('double: ', double(7))

// 아래꺼랑 위에꺼는 똑같은 함수

const doubleArrow = (x) => {
  return x * 2
}
console.log('doubleArrow', doubleArrow(7))

---

타이머 함수

• setTimeout(함수, 시간) : 일정 시간 후 함수 실행
• setInterval(함수 , 시간) : 시간 간격마다 함수 실행
• clearTimeout(): 설정된 Timeout 함수를 종료
• clearInterval(): 설정된 Interval 함수를 종료

cosnt time = setInterval(function () {
  console.log('pansik')
}, 3000) // 3초마다 pansik 출력이 된다.

const h1El = document.querySelector('h1')
h1El.addEventlistener('click', () => {
  clearInterval(timer) 

const timer = setTimeout(function () {
  console.log('pansik')
}, 3000) // 3초뒤에 pansik

const h1El = document.querySelector('h1')
h1El.addEventlistener('click', () => {
  clearTimeout(timer) 
  // h1을 클릭하면 타이머가 멈춘다.
})

---

this

• 일반 함수는 호출 위치에서 따라 this 정의
• 화살표 함수는 자신이 선언된 함수 범위에서 this 정의

const pansik = { 
  name: "Pansik",
  normal: function () {
    console.log(this.name)
  },
  arrow: () => {
    console.log(this.name) // 함수 범위 안에서 정의가 된다.
  }
}
pansik.normal() // Pansik
pansik.arrow()  // 아무것도 안뜸

const timer = {
  name: 'Pansik',
  timeout: function () {
    setTimeout(() => {
      console.log(this.name)
    }, 2000)
  }
}
timer.timeout() // 2초뒤에 Pansik

---

ES6 Class

• constructor : 객체를 생성하고 초기화하는 메서드
• extends : 다른 클래스의 자식으로 만들기 위해 사용됩니다.
• super : 부모 함수를 호출할 때 사용됩니다.

class User {
  constructor(first, last) {
    this.firstName = first
    this.lastName = last
  }
  getFullName() {
    return `${this.firstName} ${this.lastName}`
  }
}

const pansik = new User('Pansik' 'Kim')
const apple = new User('Apple' 'banana')
const neo = new User('Neo' 'Smith')

console.log(pansik)
console.log(apple.getFullName())
console.log(neo.getFullName())

---

if statement

if ()
else ()
else if ()

const inputEl = document.querySelector('input')

inputEl.addEventListener('keydown' , event => {
  if (
    event.key === 'Enter' ||
    event.key === 'Escape'
  ) {
    console.log('Wow!!')
  }
})

---

switch statement

• 조건이 어떤 값으로 딱 떨어질 때

const inputEl = document.querySelector('input')

inputEl.addEventListener('keydown' , event => {

switch (event.key) {
  case 'Enter':
  case 'Escape':
    console.log('WWWW')
    break
  case 'Shift':
    console.log('Hi~')
    break
  default:
  }
})