JavaScript Essentials

JS 함수

함수 복습

return 은 함수 종료와 같다.

function sum(x, y) {
  if (x<2 ) {
    return;
  }
  return x+y;
}

x가 2보다 작으면 return 되므로 어떤 값도 반환하지 않고 함수는 종료된다.

화살표 함수

() => {}

const double = function (x) {
  return x*2;
}

console.log('double: ', double(7));

const doubleArrow = x => x*2

console.log('doubleArrow', doubleArrow(7));

화살표 함수로 함수를 축약해서 사용할 수 있다.
괄호와 return을 생략한다.

객체 데이터를 사용할 때는 {} 로 의미가 겹친다.
화살표 함수 내부에서 사용하기 위해서는 소괄호로 한번 더 감싸서 사용하도록 한다!

const doubleArrow = x => ({ name: 'Bang' })

IIFE

즉시 실행 함수. Immediately-Invoked Function Expression
함수를 나중에 부르지 않고 바로 실행되게 하는 함수이다.

익명 함수를 만들고 소괄호로 감싸주고 소괄호 한번 더 쓴다.

const a = 7;

//첫번째 방법
//()();
(function () {
  console.log(a*2);
})();

//두번째 방법
//(());
(function () {
  console.log(a*2);
}());

Hoisting

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

const a = 7;

double();

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

에러 없이 잘 작동한다.

const a = 7;

double();

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

함수 표현식으로 작성하면 에러가 발생한다.

타이머 함수

• setTimeout(함수, 시간)
  일정 시간 후 함수 실행

• setInterval(함수, 시간)
  시간 간격마다 함수 실행

• clearTimeout()
  설정된 Timeout 함수를 종료

• clearInterval()
  설정된 Interval 함수를 종료

시간의 기본 단위는 ms!

//3000ms(3s) 이후에 console에 hey 출력
const timer = setTimeout(function () {
  console.log('hey');
}, 3000);

//h1 태그를 클릭하면 위의 타이머 종료
const h1El = document.querySelector('h1');
h1El.addEventListener('click', () => {
  clearTimeout(timer);
});


//3000ms(3s) 마다 console에 hey 출력
const timer = setInterval(function () {
  console.log('hey');
}, 3000);

//h1 태그를 클릭하면 위의 타이머 종료
const h1El = document.querySelector('h1');
h1El.addEventListener('click', () => {
  clearInterval(timer);
});

CallBack

함수의 인수로 사용되는 함수
다른 함수의 매개변수로 넘겨준 함수
특정한 실행 위치를 보장해주는 역할로도 사용된다.

callback 함수는 익명 함수를 사용한다.

function timeout() {
  setTimeout(() => {
    console.log('hey');
  }, 3000)
}

timeout();
console.log('Done!');

3초 이후에 console에 hey를 출력한 이후에 Done을 출력하고 싶다.
하지만 Done이 먼저 찍히고 3초 후 hey가 출력된다.

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

timeout(() => {
  console.log('Done!');
});

이렇게 콜백 함수를 써서 원하는 위치에 명시해주면 원하는대로 동작한다.