[새싹 프론트엔드] 11/10 (ES6 문법)

01. 고차 함수란?

인자로 함수를 받거나(인자로 들어가는 함수를 콜백 함수라 한다.), 함수를 반환하는 함수.

함수 안에서 다른 함수를 원하는 시점에 호출할 수 있는 권한을 가진 함수.

고차 함수가 정의될 시점에는 콜백 함수로 어떤 함수가 올지 알 수 없다.

 

 

콜백 함수 | 인자로 전달되는 시점에 바로 함수를 호출하는 것이 아닌 고차 함수 내부에서 필요한 순간에 호출을 하는 함수

const add = (a, b) => a + b;
const sub = (a, b) => a - b;

function calculator(a, b, calc) { // calculator는 고차 함수
  let result = calc(a, b); // 원하는 시점에 함수 호출
  return result;
}

console.log(calculator(1, 1, add)); // add는 콜백 함수

 

 

setTimeout 예시

setTimeout은 고차 함수이고, 매개변수로 들어있는 함수가 콜백 함수이다.

// 일반 함수
setTimeout(function () {
  console.log(`5초 후에 실행됩니다.`);
}, 5000);

// 화살표 함수
setTimeout(() => {
  console.log(`5초 후에 실행됩니다.`);
}, 5000);

cf.) 무명 함수 | 이름이 없는 함수로 setTimeout 안에 주로 쓰인다. 호출할 수 없기 때문에 딱 한 번만 실행된다.

 

 

 

02. 고차 함수 종류

 

forEach() | 주어진 함수를 배열 요소 각각에 실행하는 함수. 배열의 길이를 생각하지 않아도 됨.

const numbers = [10, 20, 30, 40, 50];

// for문을 이용한 배열 순회
for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}

// forEach를 이용한 배열 순회
numbers.forEach(function (num) {
  console.log(num);
});

// 화살표 함수를 이용
numbers.forEach((num) => console.log(num));

 

forEach(currentValue, index, array) | 배열 안 요소 각각의 현재 요소, 인덱스, 배열을 배열을 순회하며 반환. 매개변수의 순서는 고정이다.

보통 array까지 사용하는 경우는 많지 않다.

const numbers = [10, 20, 30, 40, 50];

numbers.forEach((num, index) => console.log(num, index));
numbers.forEach((num, index, array) => console.log(num, index,array));

 

 

map() | 배열 내 모든 아이템에 콜백 함수를 적용한 결과를 모아 새로운 배열을 반환

map(currentValue, index) | 현재 요소와 인덱스 반환

const array = [10, 20, 30, 40, 50];
const map = array.map((item) => item * 2);
const mapIdx = array.map((item, index) => item * index);

console.log(map)
<< [20, 30, 60, 80, 100]

console.log(mapIdx)
<< [0, 20, 60, 120, 200]

※ forEach()와 map()의 차이

forEach는 반복문을 대체하기 위한 고차 함수이고, map은 요솟값을 다른 값으로 mapping한 새로운 배열을 생성하기 위한 고차 함수이다.

forEach()는 배열 요소마다 한 번씩 주어진 함수(콜백)를 실행, map()은 배열 요소 각각에 대하여 주어진 함수(콜백)를 호출한 '결과'를 모아 새로운 배열을 반환한다.

 

 

find() | 조건을 만족하는 첫 번째 아이템을 찾아서 반환해 줌. 두 번째부터는 반환되지 않는다.

findIndex() | 조건을 만족하는 첫 번째 아이템의 인덱스를 반환. 두 번째부터는 반환되지 않는다.

const fruits = ["apple", "banana", "melon", "orange"];
const favorite = fruits.find((name) => name === "melon");
const favoriteIdx = fruits.findIndex((name) => name === "melon");

console.log(favorite); // <<'melon'
console.log(favoriteIdx); // <<2

 

 

some() | 배열의 아이템들이 조건을 부분적으로 만족하는지 확인. 하나라도 만족하는 게 있다면 true를 반환한다.

every() | 배열의 아이템들이 조건을 전부 만족하는지 확인

const fruits = ["apple", "banana", "melon", "orange"];
const some = fruits.some((name) => name === "melon");
const every = fruits.every((name) => name === "melon");

console.log(some); // <<true
console.log(every); // <<false

 

 

filter() | 조건에 맞는 모든 아이템들을 새로운 배열로 생성

const fruits = ["apple", "banana", "melon", "orange", "melon"];
const filter = fruits.filter((name) => name === "melon");

console.log(filter);
// 조건에 맞는 melon 두 개를 새로운 배열로 반환
<< ['melon', 'melon']

const numArr = [100, 200, 30030, 40301, 10, 342];
const filter = numArr.filter((num) => num > 300);

console.log(filter);
// 300이 넘는 숫자들만 반환
<< [30030, 40301, 342]

 

 

 

03. 스프레드 연산자 (...)

function add(a, b, c) {
  return a + b + c;
}

const numArr = [10, 20, 30];
const result = add(...numArr); // numArr[0], numArr[1], numArr[2] 대신 스프레드 연산자 사용

 

함수의 매개변수에 스프레드 연산자를 사용하는 경우

매개변수 이상의 요소가 들어오면 그 뒤에 초과되는 매개변수들은 배열에 들어가게 된다.

function rest(num1, num2, ...nums) {
  console.log(nums);
}

rest(10, 20, 30, 40, 50, 600)

 

 

스프레드 연산자는 배열을 합치거나(.concat()) 객체 생성 시 중복되는 부분을 따로 객체로 지정하여 새로 만드는 객체에 붙여 사용할 수 있다.

// 배열에서의 spread
const num1 = [1, 2, 3];
const num2 = [4, 5, 6];
let newArr = [...num1, ...num2];

// 객체에서의 spread
const dog = {
  name: "바둑이",
  age: 5,
  color: "brown",
};
const newDog = {
  ...dog, // spread 사용
  owner: "soo",
};

 

 

 

04. 구조 분해 할당

배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 표현식

let [a, b, c] = "123";

// 오른쪽의 문자열을 하나씩 쪼개서 각각의 변수에 담음
console.log(a); // <<1
console.log(b); // <<2
console.log(c); // <<3

 

저장하고 싶지 않은 값은 변수 공간을 비워둘 수 있다.

let [firstName, ,title] = ["soo", 10, "teacher"];

console.log(firstName); // <<'soo'
console.log(title); // <<'teacher'

// 10이라는 결과는 따로 변수로 지정하고 싶지 않아 비워둠. 대신 , 로 공간 구분을 확실하게 해주어야 한다.

 

빈 객체에 구조 분해 할당으로 key, value값을 넣을 수 있다.

let user = {};
[user.firstName, user.lastName] = "길동 홍".split(" ");

 

변수에 있는 기존의 데이터를 쪼개 별도의 변수로 저장할 수 있다. 다만 변수 이름은 키 값과 같아야 한다.

let shape = {
  value: "rectangle",
  width: 100,
  height: 200,
};

// 객체의 키 값을 변수 이름으로 지정.
// 다른 이름을 변수로 지정하면 undefined로 나온다.
let { value, width, height } = shape;

console.log(value); // <<rectangle
console.log(width); // <<100
console.log(height); // <<200

 

 

 

05. Map과 Set

Set 객체

중복되지 않는 유일한 값들의 집합으로 각각의 아이템은 순서가 없어 인덱스로 요소에 접근할 수 없다.

set은 class로 구현되어 있으므로 클래스를 이용하여 객체를 만들듯 new Set() 으로 객체를 만들면 된다.

const set = new Set("hello");
console.log(set);

 

 

Set 객체에 적용할 수 있는 함수

new Set() | set 생성

변수.size | 사이즈 확인

변수.has(찾을 값) | 데이터 존재 여부

변수.add(추가할 값) | 데이터 추가

변수.forEach((item) => console.log(item)); | 데이터 순회

변수.delete(삭제할 값) / 데이터 삭제

변수.clear | 전부 삭제

 

 

Map 객체

키와 값의 쌍으로 이루어진 컬렉션.

객체의 key는 문자열만 가능하지만, map 객체의 key는 모든 자료형이 가능하다.

map 또한 class로 구현되어 있으므로 클래스를 이용하여 객체를 만들듯 new Map() 으로 객체를 만들면 된다.

map 객체를 만든 후 .set()을 이용하여 키와 값을 설정한다.

 

const map = new Map();

map.set("name", "soo");
map.set(1, "number");
map.set(true, "trueValue");

 

 

map 객체에 적용할 수 있는 함수

new Map() | map 생성

변수.size | 요소 개수 확인

변수.set(key, value) | key와 value 설정

변수.get(키값) | key에 해당하는 값 가져옴

변수.delete(삭제할 값) | 값 삭제

변수.keys() | Map 객체의 key를 반환

변수.values() | Map 객체의 value를 반환

keys()와 values()의 값을 이용하는 방법은 221110 실습 문제 9번 참고 JSON.stringify()

 

 

 

'새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 4주차 블로그 포스팅'