[자바스크립트] 여러 종류의 함수

박은정·2021년 11월 2일
0

자바스크립트

목록 보기
7/25
post-thumbnail

다른 프로그래밍 언어는 함수를 지정된 위치에서 만들어야 하지만
자바스크립트는 함수도 하나의 자료라는 개념이 있기 때문에 어느 위치에서든 만들 수 있다

콜백 함수

매개변수로 전달하는 함수

function callThreeTimes (callback) {
  for (let i = 0; i < 3; i++) callback(i)
}

function print (i) console.log(`${i}번째 함수 호출`)

callThreeTimes(print)
function callThreeTimes (callback) {
  for (let i = 0; i < 3; i++) callback(i)
}

callThreeTimes(function (i) console.log(`${i}번째 함수 호출`))

forEach() 메서드

배열이 갖고 있는 함수로써 단순하게 배열 내부의 요소를 사용해 콜백함수를 호출한다

function (value, index, array) { }

map() 메서드

콜백함수에서 리턴한 값을 기반으로 새로운 배열을 만든다

filter() 메서드


화살표 함수

(매개변수) => { }
// 혹은
(매개변수) => 리턴값

내부에서 this 키워드가 지칭하는 대상이 다르다는 차이가 있다

타이머 함수

특정 시간 마다 혹은 특정 시간 이후에 콜백 함수를 호출할 수 있다
시간과 관련된 처리 가능

setTimeout()
setInterval()

타이머 종료

clearTimeout()
clearInterval()

여기서 타이머 종료 함수의 매개변수에는 타이머 ID라는 값을 넣는데
setTimeout() setInterval() 함수를 호출할 때 리턴값으로 나오는 숫자이다

즉시 호출 함수

블록을 사용하거나 함수 블록을 사용해 변수 충돌을 막을 수 있는데 섀도잉
구 버전의 자바스크립트에서는 var 키워드를 통해 변수 충돌을 막을 수 있지만 이러한 방식은 잘 사용하지 않는다

스코프

변수가 존재하는 범위
자바스크립트에서 스코프를 변경하는 방법 : 중괄호 사용하거나 함수를 생성해서 블록을 만든다

섀도잉

블록 내부에서 같은 이름으로 변수를 선언하면 변수가 외부변수와 충돌하지 않고 외부 변수를 가린다
내부 블록에서는 내부 블록에서 선언한 변수만 볼 수 있다
블록이 다른 경우, 내부 변수가 외부 변수를 가리는 형상을 섀도잉이라고 한다

엄격 모드

블록의 가장 위쪽에 use strict 이라는 문자열이 보이는 경우가 있는데
엄격 모드 strict mode 라고 부르는 기능으로 자바스크립트는 이러한 문자열을 읽어들인 순간부터 코드를 엄격하게 검사한다

'strict mode'
문장
문장

익명 함수 vs 선언적 함수

while 반복문

조건을 중심으로 반복할 때

for 반복문

횟수나 배열을 중심으로 반복할 때

익명 함수

익명 함수는 순차적인 코드 실행해서 코드가 해당 줄을 읽을 때 생성된다

let 익명함수

익명함수 = function () console.log('1번째 익명 함수입니다.')
익명함수 = function () console.log('2번째 익명 함수입니다.')

익명함수() // 2번째 익명 함수입니다.

선언적 함수

선언적 함수는 순차적인 코드 실행이 일어나기 전에 생성된다
같은 블록이라면 어디에서 함수를 호출해도 상관없다
만약 선언적 함수를 생성하기 전에 함수를 호출해도 함수가 이미 생성된 상태라 상관이 없다

선언적함수() // 2번째 익명 함수입니다.

function 선언적함수 () console.log('1번째 익명 함수입니다.')
function 선언적함수 () console.log('2번째 익명 함수입니다.')

선언적 함수와 익명 함수의 조합

선언적 함수는 먼저 생성되고, 이후에 순차적인 코드진행을 시작하면서 익명 함수를 생성한다면
코드의 순서와 상관없이 '익명 함수입니다.' 라는 글자가 출력된다

함수 = function () console.log('익명 함수입니다.')
function 함수 () console.log('선언적 함수입니다.')

함수() // 익명 함수입니다.

익명 함수 는 우리가 코드를 읽을 때와 같은 순서로 함수가 선언되지만
선언적 함수 는 우리가 코드를 읽는 순서와 다른 순서로 함수가 선언된다

따라서 동일한 이름의 함수로 덮어쓰는 것은 굉장히 위험하기 때문에 익명함수가 더 안전하다고 하고 선호한다

블록이 다른 경우의 선언적 함수의 사용

선언적 함수는 어떤 코드 블록을 읽어들일 때 먼저 생성된다

<script>
  // 블록1
  선언적함수() // 번째 선언적 함수입니다.
  function 선언적함수 () console.log('1번째 선언적 함수입니다.')
</script>

<script>
  // 블록2
  function 선언적함수 () console.log('2번째 선언적 함수입니다.')
</script>

<script>
  // 블록3
  선언적함수() // 2번째 선언적 함수입니다.
</script>
profile
새로운 것을 도전하고 노력한다

0개의 댓글