혼공자바스크립트 4주차 함수 (익명함수, 선언적함수, spread 연산자, 콜백함수, 화살표함수)

4주차까지 왔다.

이번주는 함수다.

익명함수와 선언적함수

 

 

 

 

기본문제

함수를 사용해 매개변수로 년도를 받고 윤년인지 확인하는 문제

 

책에나온대로 콘솔로 확인하려면 위와 같이 구현한다.

form을 통해 input 속의 값을 제출할 때에 비어있던 div 태그에 결과를 출력하도록 구현했다.

 

일반적인 상황에서는 위와 같이 그냥 매개변수로 줄 변수의, 이름을 정해주면 되지만 

특별한 케이스는 좀 다르다.

 

※※※매개변수를 몇개 받을지 예측할 수 없을 때.※※※

매개변수에 ...을 사용해 나머지 매개변수를 사용하면, 여러개의 값이 들어와도 배열 형태로 바꾸어 받을 수 있다.

(매개변수중 맨 뒤에 써주자)

매개변수를 사용할때 배열 (여기서는 나머지 연산자를 사용해서 생긴 배열) 에 spread 연산자를 사용해주면(...) 

배열을 풀어서 전개해준다.

뒤쪽의 매개변수들의 값을 이렇게 초기화 해주면, 기본 매개변수로 처리되어

위 check 변수에서는 5개의 매개변수가 존재하는데, 세번째 매개변수부터 값이 초기화 되어있으므로

앞의 두개만 적더라도 나머지는 기본값으로 저장된다.

물론 해당 위치의 매개변수를 적어주면 적은 값으로 지정됨.

 

※※※spread 연산자는 ES6에서부터 지원한다는 것을 기억하자!!!※※※

(React는 ES6 문법이 사용 가능하기에 해당 기능을 자주 사용한다)

 

콜백함수

자바스크립트에서는 함수도 하나의 자료형으로 취급하므로 함수를 매개변수로 전달하는 것이 가능.

이렇게 매개변수로 전달되는 함수를 콜백 함수라고 함.

example 함수를 호출할 때, 함수인 print를 매개변수로 주고

example 함수 속에서 함수를 여러번 호출하고 있는 모습을 볼 수 있다.

print 함수를 굳이 따로 추가로 만들지 말고 익명함수로 바로 써서 사용할 수도 있다.

 

이 콜백 함수를 활용하는 유용한 함수들이 있는데

 

1. forEach()

배열을 선언할 때 포함되는 메서드로, (해당 배열의 인덱스의 값, 인덱스, 배열전체) 를 매개변수로 갖는 콜백함수를 받아서

배열을 쭉 돌면서 실행해준다.

 

2.map()

map 메서드도 forEach와 같이 value, index, arry를 매개변수로 받지만, forEach에서나 map 에서나  세개의 매개변수

모두 써줄 필요는 없다. 필요한만큼, value만 써줘도 된다.

map은 콜백함수에서 리턴된 값들을 기반으로 새로운 배열을 만든다.

 

3.filter()

filter는 return 값이 true인 경우만 모아서 새로운 배열을 만든다.

 

화살표 함수를 사용해서 익명함수를 더 간단하게 표현한 예

 

타이머함수.

setTimeout은 페이지 로드한지 지정한 시간만큼 지나서 한번만

setInterval은 그 시간마다 실행된다.

millisecond 단위이므로 1000이 1초라는것을 기억.

 

익명함수는 코드가 순차적으로 처리되며 그 줄을 처리할 순서가 올때 생성되고

선언적함수는 그 전 코드블럭을 읽어들일 때 생성된다.

혼합사용시에는 익명함수가 나중에 생성될 것이므로 같은 이름의 함수가 위와 같은 예시로 중복사용되면

익명함수로 덮어씌워진다.

 

선택문제

numbers 변수에 filter 메서드를 사용하면서 콜백함수는 화살표 함수로 작성해주었다.

홀수추출 조건은 2로나눈 나머지가 1이다 를 통해서 적용했다.

(매개변수) => return 할 값 

형태로 사용하는 화살표 함수를

filter함수의 콜백 함수로 사용했고 그로인해 새로 만들어진 배열을 원래 배열인 numbers에 집어넣어서

해당 조건에 맞는 항목만으로 새로운 numbers 배열이 만들어졌고 그를 출력했다.

 

이제 혼공자바 제대로 보러가야지...