모던 자바스크립트 - 자바스크립트의 유용한 내부 기능

forEach 메소드

---

forEach 메소드는 배열의 요소를 하나씩 살펴보면서 반복 작업을 하는 메소드.

const numbers = [1, 2, 3];

numbers.forEach((element, index, array) => {
  console.log(element); // 순서대로 콘솔에 1, 2, 3이 한 줄씩 출력됨.
});

map 메소드

---

map 메소드 역시 배열의 요소를 하나씩 살펴보면서 반복 작업을 하는 메소드. forEach 메소드와 다른 점은 첫 번째 아규먼트로 전달하는 콜백 함수가 매번 리턴하는 값을 모아서 새로운 배열을 만든 후 리턴한다.

const numbers = [1, 2, 3];
const twiceNumbers = numbers.map((element, index, array) => {
  return element * 2;
});

console.log(twiceNumbers); // (3) [2, 4, 6]

filter 메소드

---

filter 메소드는 배열의 요소를 하나씩 살펴보면서 콜백함수가 리턴하는 조건과 일치하는 요소만 모아 새로운 배열을 리턴한다.

const devices = [
  { name: "GalaxyNote", brand: "Samsung" },
  { name: "MacbookPro", brand: "Apple" },
  { name: "Gram", brand: "LG" },
  { name: "SurfacePro", brand: "Microsoft" },
  { name: "ZenBook", brand: "Asus" },
  { name: "MacbookAir", brand: "Apple" }
];

const apples = devices.filter((element, index, array) => {
  return element.brand === "Apple";
});

console.log(apples); // (2) [{name: "MacbookPro", brand: "Apple"}, {name: "MacbookAir", brand: "Apple"}]

find 메소드

---

find 메소드는 콜백함수가 리턴하는 조건과 일치하는 가장 첫번째 요소를 리턴하고 반복을 종료한다.

const devices = [
  { name: "GalaxyNote", brand: "Samsung" },
  { name: "MacbookPro", brand: "Apple" },
  { name: "Gram", brand: "LG" },
  { name: "SurfacePro", brand: "Microsoft" },
  { name: "ZenBook", brand: "Asus" },
  { name: "MacbookAir", brand: "Apple" }
];

const myLaptop = devices.find((element, index, array) => {
  console.log(index); // 콘솔에는 0, 1, 2까지만 출력됨.
  return element.name === "Gram";
});

console.log(myLaptop); // {name: "Gram", brand: "LG"}

some 메소드

---

some 메소드는 콜백함수가 리턴하는 조건을 만족하는 요소가 1개 이상 있는지를 확인한다. 만약 모든 요소가 조건을 만족하지 않는다면 false를 리턴하고, 배열 안에서 콜백함수가 리턴하는 요소가 등장한다면 true를 리턴한다.

const numbers = [1, 3, 5, 7, 9];

// some: 조건을 만족하는 요소가 1개 이상 있는지
const someReturn = numbers.some((element, index, array) => {
  console.log(index); // 콘솔에는 0, 1, 2, 3까지만 출력됨.
  return element > 5;
});

console.log(someReturn); // true;

every 메소드

---

every 메소드는 콜백함수가 리턴하는 조건을 만족하지 않는 요소가 1개 이상 있는지를 확인한다. 만약 모든 요소가 콜백함수가 리턴하는 조건을 만족한다면 true를 리턴하고, 하나라도 만족하지 않는다면 false를 리턴한다.

const numbers = [1, 3, 5, 7, 9];

// every: 조건을 만족하지 않는 요소가 1개 이상 있는지
const everyReturn = numbers.every((element, index, array) => {
  console.log(index); // 콘솔에는 0까지만 출력됨.
  return element > 5;
});

console.log(everyReturn); // false;

reduce 메소드

---

reduce 메소드는 누적값을 계산할 때 사용한다. 첫 번째 파라미터로는 반복동작할 콜백함수를 사용한다. 이때, 콜백함수의 리턴값이 다음에 동작할 콜백함수의 첫번째 파라미터로 전달된다. 결과적으로 마지막 콜백함수가 리턴하는 값이 reduce 메소드의 최종 리턴값이다. 이때, reduce 메소드의 두번 째 파라미터로 전달한 초기값이 첫 번째로 실행될 콜백함수의 가장 첫 번째 파라미터로 전달된다.

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

// reduce
const sumAll = numbers.reduce((accumulator, element, index, array) => {
  return accumulator + element;
}, 0);

console.log(sumAll); // 10

sort 메소드

---

sort 메소드는 배열을 정렬시켜준다.

const letters = ["D", "C", "E", "B", "A"];
const numbers = [1, 10, 4, 21, 36000];

letters.sort();
numbers.sort();

console.log(letters); // (5) ["A", "B", "C", "D", "E"]
console.log(numbers); // (5) [1, 10, 21, 36000, 4]

sort 메소드에 콜백함수를 아규먼트로 작성하면 원하는 순서로 정렬이 가능한다.

const numbers = [1, 10, 4, 21, 36000];

// 오름차순 정렬
numbers.sort((a, b) => a - b);
console.log(numbers); // (5) [1, 4, 10, 21, 36000]

// 내림차순 정렬
numbers.sort((a, b) => b - a);
console.log(numbers); // (5) [36000, 21, 10, 4, 1]

또한 sort 메소드는 메소드를 실행하는 원본 배열의 요소들을 정렬한다.

reverse 메소드

---

reverse 메소드는 배열의 순서를 뒤집어 주는 메소드이다. sort 메소드와 마찬가지로 원본 배열의 요소를 뒤집어 버린다.

const letters = ["a", "c", "b"];
const numbers = [421, 721, 353];

letters.reverse();
numbers.reverse();

console.log(letters); // (3) ["b", "c", "a"]
console.log(numbers); // (3) [353, 721, 421]

Map

---

Map은 객체와 비슷하게 이름이 있는 데이터를 저장한다. 하지만 Map은 메소드를 통해서 값을 추가하거나 접근할 수 있다. new 키워드를 사용해서 Map을 생성할 수 있고, 아래와 같은 메소드를 통해 Map 안의 여러 값들을 다룰 수 있다.

1. map.set(key, value): key를 이용해 value를 추가하는 메소드
2. map.get(key): key에 해당하는 값을 얻는 메소드. key가 존재하지 않으면 undefined를 반환
3. map.has(key): key가 존재하면 true, 존재하지 않으면 false를 반환하는 메소드
4. map.delete(key): key에 해당하는 값을 삭제하는 메소드
5. map.clear(): Map 안의 모든 요소를 제거하는 메소드
6. map.size: 요소의 개수를 반환하는 프로퍼티 (배열의 length와 같은 역할)

// Map 생성
const codeit = new Map();

// set 메소드
codeit.set("title", "문자열 key");
codeit.set(2017, "숫자형 key");
codeit.set(true, "불린형 key");

// get 메소드
console.log(codeit.get(2017)); // 숫자형 key
console.log(codeit.get(true)); // 불린형 key
console.log(codeit.get("title")); // 문자열 key

// has 메소드
console.log(codeit.has("title")); // true
console.log(codeit.has("name")); // false

// size 프로퍼티
console.log(codeit.size); // 3

// delete 메소드
codeit.delete(true);
console.log(codeit.get(true)); // undefined
console.log(codeit.size); // 2

// clear 메소드
codeit.clear();
console.log(codeit.get(2017)); // undefined
console.log(codeit.size); // 0

Set

---

Set은 배열과 비슷하게 여러 개의 값을 순서대로 저장한다. 하지만 배열의 메소드를 사용할 수 없고, Map과 마찬가지로 Set만의 메소드를 통해서 값을 다룬다.

1. set.add(value): 값을 추가하는 메소드 (add를 호출한 자리에는 추가된 값을 가진 Set 자신을 리턴)
2. set.has(value): Set 안에 값이 존재하면 true, 아니면 false를 리턴
3. set.delete(value): 값을 제거하는 메소드 (메소드를 호출한 자리에는 셋 내에 값이 있어서 제거에 성공하면 true, 아니면 fals를 리턴)
4. set.clear(): Set안의 모든 요소를 제거하는 메소드
5. set.size: 요소의 개수를 반환하는 프로퍼티 (배열의 length 프로퍼티와 같은 역할)

// Set 생성
const members = new Set();

// add 메소드
members.add("영훈"); // Set(1) {"영훈"}
members.add("윤수"); // Set(2) {"영훈", "윤수"}
members.add("동욱"); // Set(3) {"영훈", "윤수", "동욱"}
members.add("태호"); // Set(4) {"영훈", "윤수", "동욱", "태호"}

// has 메소드
console.log(members.has("동욱")); // true
console.log(members.has("현승")); // false

// size 프로퍼티
console.log(members.size); // 4

// delete 메소드
members.delete("종훈"); // false
console.log(members.size); // 4
members.delete("태호"); // true
console.log(members.size); // 3

// clear 메소드
members.clear();
console.log(members.size); // 0

Map, 배열과 Set의 차이점은 Map과 배열은 개별값에 접근할 수 있었는데, Set은 개별 값에 바로 접근할 수 없다.

// Set 생성
const members = new Set();

// add 메소드
members.add("영훈"); // Set(1) {"영훈"}
members.add("윤수"); // Set(2) {"영훈", "윤수"}
members.add("동욱"); // Set(3) {"영훈", "윤수", "동욱"}
members.add("태호"); // Set(4) {"영훈", "윤수", "동욱", "태호"}

for (const member of members) {
  console.log(member); // 영훈, 윤수, 동욱, 태호가 순서대로 한 줄 씩 콘솔에 출력됨.
}

따라서 반복문을 통해 전체요소를 반복하면서 그 순간에 개별적으로 접근할 수 있다.

Set의 장점으로는 중복을 허용하지 않는 값들을 다룰 때 유용하다. Set 객체에 요소를 추가할 때 이미 Set 객체 안에 있는 값을 추가하려고 하면 무시되기 때문이다. 또한 처음 Set을 생성할 때 아규먼트로 배열을 전달할 수 있는데, 이런 특징을 이용해서 배열 내에서 중복을 제거한 값들을 묶음을 만들 수 있다.

const numbers = [1, 3, 4, 3, 3, 3, 2, 1, 1, 1, 5, 5, 3, 2, 1, 4];
const uniqNumbers = new Set(numbers);

console.log(uniqNumbers); // Set(5) {1, 3, 4, 2, 5}