JavaScript (4)

JavaScript

1. 함수

function sum(x,y) {    // 매개변수
  console.log(x + y)
  return x+y
}
sum(1,3)               // 인수
const a = sum(1,3)

arguments 함수 안에서 언제든지 사용

function sum() {
  console.log(arguments)
  return arguments[0], arguments[1]
}
console.log(8,3)

2. 화살표 함수

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

화살표 함수 (동일한 로직)

const doubldArrow = x => x*2
const doubldArrow = (x, y) => x*2
console.log('doubleArrow', doubleArrow(7))

객체데이터의 경우 소괄호로 중괄호 포함시켜야 함수블록으로 인식 X

x => ({name: 'H'})

3. IIFE

IIFE (Immediately-Invoked Function Expression)
즉시 실행 함수

바로 위 세미클론 넣어줘서 구분해주기

const a = 7
function double() {
  console.log(a*2)
}
double()

재활용 안할거면 함수이름 필요없음

1)
double();
(function () {
  console.log(a*2)
  }) ();
2) 권장
(function () {
  console.log(a*2)
}());

4. 호이스팅

호이스팅 : 함수 선언부가 유효범위 최상단으로 끌어올려지는 현상

변수는 이전에 호출 못하지만
함수는 동작할 수 있는 유효범위 최상단으로 올라가서 호출 가능

언제 유용?
함수 이름만 보고 함수 추측가능
함수는 전체코드 최하단에 작성

const a = 7
double()
function double = function () {
  console.log(a*2)
  }

5. 타이머 함수

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

setTimeout

setTimeout( function () {
   console.log('dd')
   }, 3000)   //ms = 3s

clearTimeout

const timer = setTimeout( () => {
  console.log('gg')
  }, 3000}

h1 tag 클릭하면 timer함수 종료하도록 (3초 전에 h1클릭하면 time 실행X)

const h1El = document.querySelector('h1')
h1El.addEventListenr('click', function () => {
  clearTimeout(timer)
  })

setTimeout -> interval 마찬가지

6. 콜백

콜백 : 함수의 인수로 사용되는 또다른 함수

ex) setTimeout (함수, 시간) 처럼 함수가 인수로 사용

function timeout() {
  setTimeout( () => {
    console.log('gggg')
    }, 3000)
    }
timeout()
console.log('done')  // done이 먼저 출력됨

그 다음 done출력 보장하려면? (setTimeout 안에 넣지 않고)

function timeout(cb) {
  setTimeout( () => {
    console.log('gggg')
    cb()
    }, 3000)
    }
timeout( () => {
  console.log('done')
  } )