[TIL]

new Set

Set은 JavaScript에서 기본적으로 제공되는 데이터 타입 중 하나입니다. Set은 중복되지 않는 값들의 모음을 저장하며, 배열과 유사한 형태를 가지고 있습니다. Set 객체는 다음과 같이 생성될 수 있습니다:

const mySet = new Set();

Set에 값을 추가할 때는 add() 메소드를 사용합니다.

mySet.add(1);
mySet.add(2);
mySet.add(3);

Set 객체는 중복된 값을 허용하지 않으므로, add() 메소드를 사용해도 이미 존재하는 값은 추가되지 않습니다. 예를 들어, mySet.add(1);를 다시 호출해도 아무 일도 일어나지 않습니다.

Set 객체에 저장된 값들을 확인하기 위해서는 for...of 반복문을 사용할 수 있습니다.

for (const value of mySet) {
  console.log(value);
}

또한, has() 메소드를 사용하여 Set 객체에 값이 포함되어 있는지를 확인할 수 있습니다.

console.log(mySet.has(1)); // true
console.log(mySet.has(4)); // false

Set 객체에서 값 제거는 delete() 메소드를 사용합니다.

mySet.delete(2);

마지막으로, Set 객체의 크기(저장된 값의 개수)를 알아내기 위해서는 size 프로퍼티를 사용합니다.

console.log(mySet.size); // 2

배열 안에 중복되는 요소를 제거할 때 사용한다.

set 객체는 중복을 허용하지 않아서 요소가 반복되어 나올 경우, 덮어쓰기를 하게 된다.

reduce()

reduce()는 JavaScript의 배열 객체에서 제공하는 메소드 중 하나입니다. 이 메소드는 배열의 모든 요소에 대해 주어진 콜백 함수를 호출하여 단일 값으로 축소(reduce)합니다.

reduce() 메소드는 다음과 같은 형태로 사용됩니다.

javascript
Copy code
array.reduce(callback[, initialValue]);
여기서 callback은 각 요소에 대해 호출될 함수이며, initialValue는 선택적으로 지정할 수 있는 초깃값입니다. callback 함수는 4개의 인자를 받습니다.

accumulator: 콜백 함수에서 반환된 누적값입니다. 초기값(initialValue)이 지정되지 않았을 경우, 첫 번째 요소가 accumulator 값으로 사용됩니다.
currentValue: 현재 처리 중인 요소입니다.
currentIndex: 현재 처리 중인 요소의 인덱스입니다.
array: reduce() 메소드가 호출된 배열 객체입니다.
callback 함수에서 반환되는 값은 다음 요소에 대한 accumulator 값으로 사용됩니다. 콜백 함수가 마지막 요소까지 실행되면, 최종적으로 반환된 accumulator 값이 reduce() 메소드의 결과값이 됩니다.

reduce() 메소드를 사용하여 배열의 모든 요소의 합을 구하는 예제는 다음과 같습니다.

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

const sum = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
});

console.log(sum); // 15

위 예제에서는 initialValue를 생략하였으므로, 첫 번째 요소인 1이 accumulator 값으로 사용됩니다. callback 함수에서는 accumulator와 currentValue를 더한 값을 반환하므로, 다음 요소에 대해서는 1 + 2 = 3, 3 + 3 = 6, 6 + 4 = 10, 10 + 5 = 15가 각각 accumulator 값으로 사용됩니다. 따라서 최종적으로 반환되는 값은 15가 됩니다.

classList

classList는 DOM 요소의 클래스를 조작하는 데 사용되는 JavaScript 객체입니다. classList 객체는 add(), remove(), toggle() 등의 메소드를 제공하여 요소의 클래스 리스트를 변경할 수 있습니다.

classList 객체는 다음과 같은 메소드를 제공합니다.

add(class1, class2, ...): 지정된 클래스를 요소의 클래스 리스트에 추가합니다. 클래스를 추가하려면 인자로 전달된 문자열을 사용합니다.

const elem = document.querySelector('.my-element');
elem.classList.add('active', 'highlight');

remove(class1, class2, ...): 지정된 클래스를 요소의 클래스 리스트에서 제거합니다.

const elem = document.querySelector('.my-element');
elem.classList.remove('active');

toggle(class, force): 클래스가 요소에 존재하는 경우 제거하고, 존재하지 않는 경우 추가합니다. 두 번째 인자 force를 사용하면 클래스를 강제로 추가하거나 제거할 수 있습니다.

const elem = document.querySelector('.my-element');
elem.classList.toggle('active');

contains(class): 지정된 클래스가 요소의 클래스 리스트에 존재하는지 여부를 반환합니다.

const elem = document.querySelector('.my-element');
if (elem.classList.contains('active')) {
  // ...
}

classList 객체는 다른 메소드와 속성을 제공하지 않습니다. 하지만 클래스 리스트를 조작하는 데 필요한 기능을 모두 갖추고 있으므로, 일반적인 클래스 조작 작업에 대해 간단하고 직관적인 해결책을 제공합니다.