JavaScript #16 (ES6, ESNext 문법)

※ 2016년 이후 버전의 ES인 ES6, ESNext에서 추가된 약간의 문법을 다룸.

 

 

Set : 파이썬의 Set (집합)과 같음

const set = new Set([1, 2, 2, 3]);		// 중복 제거됨
set.add(4);					// 4 추가

const set = new Set([1, 2, 2, 2, 3, 4]);
// {1, 2, 3, 4}

set.add(5);
// {1, 2, 3, 4, 5}	// 5 추가

set.add(5);
// {1, 2, 3, 4, 5},	// 그대로. 중복은 허가하지 않으므로 추가되지 않음.

set.delete(2);
// 2 삭제

console.log(set);

 

 

Map : 배열의 각 요소에 주어진 콜백 함수를 적용해 새로운 배열을 반환하는 함수

- 쉽게 말해, map.메서드(-)를 걸면 메서드(-)로 거른 배열을 새로 만들어준다.

const map = new Map();
map.set("name", "Lee");
console.log(map.get("name")); // "Lee"

 

 

※ for ... of : 배열을 순회하면서 하나하나 값들을 뱉어냄

const set = new Set([1, 2, 2, 2, 3, 4]);

for (const val of set) {
  console.log(val);
}

// 1, 2, 3, 4

 

// 당연히 map 도 가능

const map = new Map();
map.set("name", "Lee");
map.set("age", 20);

console.log(map);

for (const [key, val] of map) {
    console.log(key, val);
}

 

 

filter : 조건이 참인 것만 메서드 수행

const nums = [1, 2, 3, 4, 5];

const evens = nums.filter((n) => n % 2 === 0);

for (const val of evens) {
    console.log(`val => ${val}`);
}

 

 

※ map과 filter의 차이

- map은 산술, filter는 논리

var testArray = [0,1,2,3,4,5];

testArray.map(function(c){ return c * 2 }); // [0, 2, 4, 6, 8, 10]
// 입력값 그대로 계산해서 담음

testArray.filter(function(c){ return c * 2; }); // [1, 2, 3, 4, 5]
// 계산해서 나온 결과값이 0(false)이 아닌 경우에만 배열에 담음.

 

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-map-%EA%B3%BC-filter-%EC%B0%A8%EC%9D%B4

 

 

reduce : 누적 계산(합계, 곱 등)에 사용

const nums = [1, 2, 3, 4, 5];

const sum = nums.reduce((acc, cur) => acc + cur, 0);
console.log(`sum => ${sum}`);

 

 

 

find : 조건을 만족하는 첫 번째 요소 반환

const nums = [1, 2, 3, 4, 5];

const found = nums.find((n) => n > 2);
console.log(`found => ${found}`);

 

 

some : 하나라도 조건 만족하면 true (합집합)

const nums = [1, 2, 3, 4, 5];

const hasNegative = nums.some((n) => n < 2);
console.log(hasNegative);

 

 

every : 모두 조건 만족해야 true (교집합)

const nums = [1, 2, 3, 4, 5];

const allPositive = nums.every((n) => n > 1);
console.log(allPositive);

 

 

flatMap : 배열 펼치기 + 매핑 동시에 처리

const nums = [1, 2, 3, 4, 5];

const nested = [1, 2, 3];
const duplicated = nested.flatMap((n) => [n, n]);

for (let nest of duplicated) {
    console.log(`nest => ${nest}`);
}

console.log(duplicated);

 

 

 

 

 

실습 1. Map과 Set 활용

1~5 숫자가 포함된 배열 [1, 2, 2, 3, 4, 5, 5]에서 중복을 제거한 후, 모든 숫자에 5를 더한 값을 순서대로 출력하세요.
그리고 "total"이라는 키에 중복을 제거한 숫자들의 합을 저장한 Map을 만들어 출력하세요.

const arr = [1, 2, 2, 3, 4, 5, 5];
const set = new Set(arr);

let i = 0;
for (let num of set) {
    console.log(Number(num) + 5);
    i = i + Number(num);
}

const map = new Map();
map.set("total", i);

console.log(map.get("total"));

 

 

 

실습 2. filter, map, reduce 활용

다음 배열에서 짝수만 골라 제곱한 후, 그 합계를 구해 출력하세요.

const numbers = [3, 4, 7, 8, 10, 13];
const evens = numbers.filter((num) => num % 2 === 0);
const squared = evens.map((num) => num * num);
const sum = squared.reduce((acc, cur) => acc + cur, 0);
console.log(sum);

 

 

 

 

 

 

정리 

const nums = [1, 2, 3, 4];

// map : 계산해서 새 배열에 담기
const squares = nums.map(n => n ** 2); // [1, 4, 9, 16]

// filter : 비교해서 참인 것만 새 배열에 담기
const evens = nums.filter(n => n % 2 === 0); // [2, 4]

// reduce : 누적 계산(합계, 곱 등)에 사용
const sum = nums.reduce((acc, cur) => acc + cur, 0); // 10

// find : 조건을 만족하는 첫 번째 요소 반환
const found = nums.find(n => n > 2); // 3

// some : 하나라도 조건 만족하면 true (합집합)
const hasNegative = nums.some(n => n < 0); // false

// every : 모두 조건 만족해야 true (교집합)
const allPositive = nums.every(n => n > 0); // true

// flatMap : 배열 펼치기 + 매핑 동시에 처리
const nested = [1, 2, 3];
const duplicated = nested.flatMap(n => [n, n]); // [1,1,2,2,3,3]