[새싹 프론트엔드] 4주차 - 4
고차함수(Higher-order function)
고차함수
• 인자로 함수를 받거나 함수를 반환하는 함수
• 함수 안에서 다른 함수를 원하는 시점에 호출할 수 있는 권한을 가진 함수
안에 자식 함수를 원하는 시점에 부를 수 있는 함수
콜백함수
인자로 전달되는 시점에 바로 함수를 호출하는 것이 아닌 고차 함수 내부에서 필요한 순간에 (실행하라고 하는 요청하는 시점에) 호출을 하는 함수
calc라는 매개변수를 함수처럼 사용 함수의 인자로 a,b 전달
calc - 고차함수
add,sub - 콜백함수
실습) 콜백함수
자바스크립트에서 제공하는 함수 setTimeout
고차함수 : setTimeout 매개변수를 함수로 받아줌
콜백함수 : function{}
5초뒤에 저 함수를 딱 한번만 실행할 것임 이 함수는 실제 5초가 지난 다음에 콘솔에 찍힘
함수에 이름을 지정하는 이유는 여러번 실행 하기 위해서임
하지만 이름이 없을 수도 있다 > 무명함수 (딱 한번만 실행 가능)
고차함수 종류
forEach()를 이용한 배열 순회
• 콜백 함수를 배열의 각 요소에 대해 한 번씩 실행
forEach()매개변수에 함수를 넣을 수 있다
forEach()
매개변수에다 콜백함수를 넣어주고 배열의 0번지부터 마지막까지 안에 있는 함수를 한번식 다 실행함. 알아서 한번씩 다 돌려줘서 조건식 필요X 시작하는 번지도 필요없음
단점은 break continue 사용 못함 무조건 다 한번씩 반복됨
forEach(currentValue, index)
• currentValue - 현재 요소
• index - 현재 요소의 인덱스
forEach(currentValue, index, array)
• array - forEach()를 호출한 배열
find()
조건을 만족하는 첫번째 아이템을 찾아서 반환해줌
find는 무조건 첫번째만 반환!
조건이 멜론이랑 같으면(조건이true이면) 값 리턴해 달라는 소리
findIndex()
조건을 만족하는 첫 번째 아이템의 인덱스를 반환
some()
배열의 아이템들이 조건을 부분적으로 만족하는지 확인
some하나의 원소라도 조건을 만족하면 true반환
every()
배열의 아이템들이 조건을 전부 만족하는지 확인
every일부만 멜론이여도 false가 나옴 모두가 멜론이여야 true
filter()
조건에 맞는 모든 아이템들을 새로운 배열로 생성
Map()
배열 내 모든 아이템에 콜백함수를 적용한 결과를 모아 새로운 배열을 반환
Map( currentValue , index )
• currentValue - 현재 요소
• index - 현재 요소의 인덱스
스프레드 연산자
↓
함수와 스프레드 연산자
배열과 스프레드 연산자
↓
스프레드 연산자nums라는 배열에 저장됨
매개변수 갯수가 안 맞으면 확실한 것만 매개변수로 만들고 나머지는 스프레드 연산자로 공간만 만들고 배열로 출력되게 할 수도 있음.
객체와 스프레드 연산자
구조 분해 할당
배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 표현식
Map과 Set
Set 객체
중복되지 않는 유일한 값들의 집합
중복을 제거하면서 객체로 만들어줌. 중복된 데이터를 저장하지 않는 자료구조
특징
• 동일한 값을 중복하여 포함할 수 없음
• 각각의 아이템은 순서가 없음
• 인덱스로 요소에 접근할 수 없음
Set이라는 클래스가 있는거임 비어있는 객체가 있음
has =
있으면 true
없으면 false
실습) Set 객체
실습) Set 객체에 적용할 수 있는 함수
<script>
// set 생성
const set = new Set([10, 20, 30]);
// 사이즈 확인
console.log(set.size); // 3
// 데이터 존재 여부
console.log(set.has(10)); // true
console.log(set.has(40)); // false
// 데이터 추가
set.add(40);
console.log(set); // Set(4) { 10, 20, 30, 40 }
// 데이터 순회
set.foreach((item) => console.log(item)); //10 20 30 40
// 삭제
set.delete(20);
console.log(set); // Set(3) { 10, 30, 40 }
// 전부 삭제
set.clear();
console.log(set); // Set(0) {}
</script>
Map 객체
키와 값의 쌍으로 이루어진 컬렉션
객체와 Map 객체의 차이
• 객체의 Key는 문자열만 가능
• Map 객체의 Key는 모든 자료형이 가능
Map 생성 및 key, value 설정
Map은 key를 문자열로 변환하지 않음
Map의 요소 개수
body>
<script>
// Map 생성
const map = new Map();
// set() : key와 value 설정
map.set("name", "soo"); // 문자형 키
map.set(1, "number"); // 숫자형 키
map.set(true, "trueValue"); // 불린형 키
console.log(map);
// Map 생성
const map1 = new Map();
// set() : key와 value 설정
map1.set("name", "soo");
map1.set("age", 20);
map1.set("addr", "seoul");
// name 키 값 출력
console.log(map1.get("name")); // ‘soo’
// score 값 추가
map1.set("score", 100);
// size 확인
console.log(map1.size); // 4
// age 값 삭제
map1.delete("age");
// map 확인
console.log(map1); // Map(3) { 'name' => 'soo',
// 'addr' => 'seoul',
// 'score' => 100 }
</script>
새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 4주차 블로그 포스팅