Function

함수

함수는 함수가 호출되는 횟수를 최대한 줄여주는 것이 중요하다. 그 기준은 함수가 호출된 특정한 결과를 반복적으로 사용하느냐, 그렇지 않느냐의 차이이다.

//기명함수 
function 함수명() {
 로직 
}

함수명()
// 함수선언

//익명함수
const 변수명 = function(){
  로직
}
변수명()
//함수표현

return 키워드는 함수 안에서 사용할 수 있고 return이 사용되면 함수 밖으로 데이터를 내보내기도 하지만 그 부분에서 함수가 종료된다.

화살표함수

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

//화살표함수
const doubleArrow = (x) => {
  return x*2
}
console.log('doubleArrow: ',doubleArrow(7))

차이점은 기본로직을 축약형으로 줄여나갈 수 있다.

const doubleArrow (x) => x*2

Tip : 매개변수가 하나일땐 소괄호도 생략 가능

const doubleArrow x => x*2

객체데이터를 만들기 위해 {}중괄호를 그냥 작성하면 실행문 부분이 반환이 안된다.
또한 객체 데이터 자체가 {} 중괄호 라서. 화살효 함수에서 사용하려면

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

이렇게 ()안에 {}를 집어넣어 사용한다.

즉시실행함수(IIFE)

Immediately - Invoked Function Expression
만약 함수를 하나 만들었는데 그 함수가 기본적인내용으로 만들어지고나서 바로 밑에서 한번만 실행되고 더이상 쓸일이 없다 라는 전제로 굳이 함수의 이름을 따로 만들어 호출할 필요가 없을때 사용한다.

//기본
cosnt a =7
function double(){
  console.log(a*2)
}
double();

IIFE

//1번 방법
(function (){
  console.log(a*2)
})()

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

1.(x)()
2.(x())
즉 이름을 따로 짓지 않아도 되는 익명함수로 내용을 생성하고 그 함수는 이름이 없어 실행을 못하지만 ()사이에 작성하고 뒤에 () 삽입하면 바로 실행!
주의 : JS엔진이 즉시실행 함수가 실행되는 부분과 윗쪽에 다른 함수가 실행되는 부분을 명확하게 구분하지 못해서 오류가 뜰 수가 있다. 그러므로 위쪽 함수에 세미클론 ; 을 반드시 명시해야한다.

호이스팅 Hoisting

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

const a = 7
double()

function double(){
  console.log(a*2)
}
//정상 출력 14
// 함수 선언문은 가능

const a = 7
double()

const double = function(){
  console.log(a*2)
}
// TypeError
// 함수 표현식은 불가능

그래서 함수선언문들은 전체 코드의 최하단에 놓는 방식으로 사용

타이머 함수

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

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

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

setTimeout을 실행하면 함수에서 특정한time 값을 반환한다. 그래서 clearTimeout을 사용하려면 setTimeout를 변수에 담아야한다.

타이머 함수를 사용할땐 callback으로 일반함수 보다는 화살표함수를 사용하는 것이 활용도가 더 높음.

콜백 Callback

함수의 인수로 사용되는 함수

function timeout(cb){
  setTimeout(() => {
    console.log('Sim')
    cb()
  },3000)
}
timeout(() => {
  console.log('Done!')
})

그 다음에 동작을 보장해주는 기본적인 로직 구성
기존에 만든 함수의 호출한 곳의 인수로 함수를 넣어준다. 인수로 넣은 함수가 바로 callback함수이다.기존의 함수를 호출한 첫번째 인수로callback함수가 들어가므로 기존함수 내부에서 그 인수를 받아줄 매개변수 하나를 정의. 그 후 그 매개변수를 내가 실행을 보장하고 싶은 그 장소에 함수호출 하듯이 매개변수 뒤에 () 붙인다.

랜덤 함수

### 랜덤함수 만들기
```javascript
Math.random() // 무작위 랜덤 숫자(소숫점만) 출력 0.597486849516574
Math.random()*10 // 무작위 랜덤 숫자(정수부분도 같이)출력 1.156516846546165
Math.floor(Math.random()*10) // 정수만 출력

floor 메소드는 내림처리 의미. (소수점 이하는 전부 버린다고 생각)

export default function random(){
  return Math.floor(Math.random()*10)
}
.
.
.
switch(a){
  case 0 :
    console.log('a is 0')
   break
  case 2 :
    console.log('a is 2')
   break
  case 4 :
    console.log('a is 4')
   break
   default : // 특정한 값이 일치하는 것이 없고 나머지인 경우에만 입력 if문의 else와 같은 의미
    console.log('rest...') // default 는 break 필요없음
}