항해 TIL pre-on 마지막날
오늘은 콜백함수, 화살표 함수, 즉시 실행 함수, setInterval함수, setTimeout함수와 ,
clearInterval함수, clearTimeout에 대해 알아보았다.
콜백 함수
자바스크립트는 함수도 하나의 자료형이므로 매개변수로 전달할 수 있습니다. 이렇게 매개변수로 전달하는 함수를 콜백 함수라고 합니다.
위 사진에서 callTreeTimes() 함수는 함수를 매개변수로 받아 해당 함수를 3번 호출합니다. callTreeTimes() 함수의
callback매개변수에 print() 함수에 전달했다. 그리고 callThreeTimes() 함수 내부에서는 callback(i) 형태로 함수를 호출하고 있다.
따라서 매개변수로 전달했던 print()함수가 print(0), print(1), print(2) 로 차례차례 호출되어 실행 결과와 같은 결과를 냅니다.
콜백 함수를 활용하는 함수들
forEach()
forEach() 메소드는 배열이 갖고 있는 함수(메소드)로써 단순하게 배열 내부의 요소를 사용해서 콜백함수를 호출해줍니다.
function ( value, index, array) {}. <- forEach() 메서드의 형태
map()
map() 메소드도 배열이 갖고 있는 함수이다. map() 메소드는 콜백 함수에서 리턴한 값들을 기반으로 새로운 배열을 만드는 함수이다.
filter()
filter()메소드도 배열이 갖고 있는 함수입니다. filter() 메소드는 콜백함수에서 리턴하는 값이 true인 것들만 모아서 새로운 배열을 만드는 함수이다.
filter() 메소드는 function(value, index, array) {} 형태의 콜백 함수를 사용하는 것이 기본이지만, value만 활용하므로
value만 매개변수로 넣었다. filter() 안의 function() {} 안에 코드 내용을 보면 return value % 2 === 0을 통해
짝수만 모은 새로운 배열을 만들어 리턴합니다.
화살표 함수
앞에서 봤던 단순한 형태의 콜백 함수를 쉽게 입력하고자 화살표 함수라는 함수 생성법이 있
내부에서 this 키워드가 자칭하는 대상이 다르다는 등의 미세한 치이가 있다. this 키워드에 대한 내용은 다른 예제에서 살펴보자!
메소드 체이닝
위의 코드를 보면 filter()메소드는 배열을 리턴하므로 map() 메소드를 적용할 수 있고, map()메소드도 배열을 리턴하므로
forEach()메소드를 적용할 수 있습니다. 이렇게 어떤 메소드가 리턴하는 값을 기반으로 해서 함수를 줄줄이 사용하는 것을 메소드 체이닝
이라고 부릅니다.
타이머 함수
자바스크립트에는 특정 시간마다 또는 특정 시간 이후에 콜백 함수를 호출할 수 있는 타이머 함수들이 있다.
setTimeout(함수, 시간) : 특정 시간 후에 함수를 한 번 호출합니다.
setInterval(함수, 시간) : 특정 시간마다 함수를 호출합니다.
clearTimeout(타이머_ID): setTimeout() 함수로 설정한 타이머를 제거합니다.
clearInterval(타이머_ID): setInterval() 함수로 설정한 타이머를 제거합니다.
clrear함수들에는 타이머 ID라는 것을 넣는데 타이머 ID는 setTimeout() 함수와 setInterval()함수를 호출할 때 리턴 값으로
나오는 숫자입니다.
즉시 호출(실행)
여러 웹 사이트의 자바스크립트 코드를 보면 다음과 같이 익명 함수를 생성하고 곧바로 즉시 호출하는 패턴을 많이 볼 수 있다고 한다.
(function ( ) {. } (. ); <- 즉시 실행 함수 코드 형태
이름 충돌 문제
변수가 존재하는 범위를 어려운 말로 스코프라고 부르는데, 이 스코프는 같은 단계에 있을 경우 무조건 충돌이 일어납니다.
자바스크립트에서 이러한 스코프 단계를 변경하는 방법은 중괄호를 사용해서 블록을 만들거나,
함수를 생성해서 블록을 만드는 방법이 있다.
코드를 실행하면 블록 내부에서는 변수 pi를 출력했을 때 3.141592가 나오고,
블록 외부에서는 3.14가 출력되는 것을 확인할 수 있습니다. 이름 충돌이 발생하지 않습니다.
이렇게 블록 내부에서 같은 이름으로 변수를 선언하면 변수가 외부 변수와 충돌하지 않고 외부 변수를 가립니다.
내부 블록에서는 내부 블록에서는 내부 블록에서 선언한 변수만 볼 수 있습니다. 이렇게 블록이 다른 경우 내부 변수가
외부 변수를 가리는 현상을 새도앙 이라고 부른다고 한다.
즉시 호출 함수를 이용한 문제 해결
구 버전의 자바스크립트에서는 변수를 선언할 때 사용하던 var 키워드는 함수 블록을 사용하는 경우에만 변수 충돌을 막을 수 있었다.
지금도 구 버전의 자바스크립트를 지원하는 웹 브라우저에 대응해야 하는 경우가 많고, Babel 등 최신 버전의 자바스크립트를 구 버전의
자바스크립트로 변경해주는 트랜스 파일러 도 단순한 블록으로 함수 충돌을 막는 코드는 제대로 변환해주지 못합니다.
그래서 많은 개발자들이 함수 블록을 사용해 이런 문제를 해결한다고 한다. 충돌 문제를 해결하기 위해 사용하는 것이므로
함수를 만들자마자 즉시 호출할 수 있도록 사용한다.
엄격 모드
가끔 'use strict'라는 문자열이 등장하는 것을 볼 수 있다. 이는 엄격 모드라고 부르는 기능으로 자바스크립트는 이러한 문자열을 읽어 들인
순간부터 코드를 엄격하게 검사합니다.
위 사진과 같이 data라는 변수를 let키워드나 const키워드로 선언하지 않고 사용했는데 data의 값을 확인할 수 있다.
하지만 엄격 모드에서는 이러한 코드를 사용할 수 없습니다.
위 사진과 같이 data를 let키워드나 const 키워드로 선언하지 않으면 오류를 발생시킨다.
자바스크립트는 오류를 어느 정도 무시하고 넘어가는 것들이 있다. 그래서 편하게 코딩할 수 있지만 실수로 이어지기도 한다.
일반적으로 엄격 모드를 사용하는 것이 좋다.
보통 즉시 호출 함수를 만들고, 이 블록의 가장 위쪽에서 엄격 모드를 적용하는 경우가 많다고 한다.
