Map & Set

객체와 배열의 좋은 점만 추출한 자료형태

객체의 단점 :
1) 객체의 프로퍼티에는 순서가 존재하지 않습니다. > for문을 활용해서 특정 구간을 반복하는데 어려움 혹은 제약 존재

단점 예시)

2) 객체는 프로퍼티의 개수를 알려주는 속성값이 없습니다.

Map 데이터 자료형에서 사용할 수 있는 프로퍼티와 메서드

size : 앱 요소의 개수의 개수를 알려주는 프로퍼티
set(키, 값)을 추가해주는 메서드
get(키) 해당 앱의 키 값을 반환하는 메서드
has(키) 해당 키가 맵에 있는지 여부에 따라서 true 혹은 false 값을 반환해주는 메서드
delete(키) 해당 키가 존재하는 프로퍼티를 삭제
clear() 맵의 모든 요소를 삭제
keys() 각 요소의 키만 모아서 반환
values() 각 요소의 값만 모아서 반환
entries() 각 요소의 키와 값을 반환

이터러블 = Iterable => 순서대로 처리할 수 있는

Map 과 Set 의 차이
Map : Map 데이터 안에 들어가는 요소가 중복이 되더라도 문제가 되지 않습니다. => 단점이 될 수가 있음.
set : 값이 중복될 수 없는 엄격한 자료 관리가 가능합니다.

set을 활용해 여러가지 기능들 활용하기

set이 중복된 데이터를 취급하지 않기 때문에

이와 같이 중복된 데이터를 출력하지 않았다.

[예시]

[HTML]

[JAVASCRIPT]

여기서 콘솔 로그로 보여주면

그리고 나서 아래 resultList 를 정의한 뒤에 console log로 보여주면

여기서 보면 set은 중복된 데이터를 가지고 오지 않기 때문에 중복된 데이터를 가져오지 않은 것을 볼 수 있다.

마지막으로 결과값을 넣어줄 공간을 정의하고

//join을 사용하면 문자열로 다시 만들어줌
// 배열객체 => 값을 복제할 때,
// 1) 원시유형 데이터
// 2) 주소 복사 데이터

결과창

결과 js

const member1 = ["HTML", "CSS"];
const member2 = ["CSS", "Javascript", "React"];
const member3 = ["Javascript", "Typescript"];

const subjects = [...member1, ...member2, ...member3]; //전개연산자 ...을 사용하면 원본데이터의 훼손없이 값을 복제할 수 있다.
// console.log(subjects);

const resultList = new Set(); //set을 사용해 각각의 데이터 값을 resultList에 넣어준건데 여기서 중요한 점은 중복으로 불러오지 않는다는 것이다.

subjects.forEach(subject => {
resultList.add(subject);
})
// //console.log(resultList);

const result = document.querySelector("#result"); //#result에 공간을 정의해주고 거기에 넣어준다
result.innerHTML = `
//.join("")으로 해주면 다시 문자열로 출력해준다.

`
//join을 사용하면 문자열로 다시 만들어줌
// 배열객체 => 값을 복제할 때,
// 1) 원시유형 데이터
// 2) 주소 복사 데이터

*이터레이터 & 제너레이터

1. 문자열, 배열, Map, Set :
   이터러블 객체 (iterable)

   이터러블 : 순서대로 처리할 수 있는

이터레이터 객체를 프로토타입으로 상속을 받아야지만, 이터러블 객체가 될 수 있다.

이터레이터 객체 > next()메서드
: 이터러블 객체 = 문자열, 배열 > 처음 실행했을 때에는 인덱스 첫번째 값을 호출하고, next()를 한번 더 실행하면 그 다음 인덱스 값을 호출한다.
어떤 것을 호출할 떄, 한번에 값을 호출하지 않고, 순차적으로 값을 호출하고 싶을 때, 그때 next()

생성자 함수!! => 동일한 프로퍼트 혹은 객체를 다수 생성하고자 할 떄, 템플릿을 만들어놓고, 해당 템플릿을 통해서 효율적으로 객체를 만들고 싶기 때문에!!

function* 함수명() {
yield 1;
yield 2;
yield 3;
yield 4;
}

제네레이터 함수

function* train() {
yield "판교";
yield "이매";
yield "삼동";
yield "경기광주";
yield "초월";
yield "곤지암";
yield "신둔도예촌";
yield "이천";
yield "부발";
yield "세종대왕릉";
yield "여주";
}
// 위처럼 제네레이터 함수 만들었다

let gyeonggang = train();
//경강이라는 곳에 우리가 만든 train함수를 넣어준다.
const button = document.querySelector("button");
const result = document.querySelector("#result");

button.addEventListener("click", () => {
let current = gyeonggang.next();
if(current.done !== true) {
result.innerText = current.value;
}else {
result.innerText = "종점!"; // 만약 끝났다면 undefined 대신 종점 출력
button.setAttribute("disabled", "disabled") //종점에 가면 버튼작동 중지
}
})

로또 번호 생성기

const result = document.querySelector("#result");
const button = document.querySelector("button");

const luckyNumber = {
digitCount : 6,
maxNumber : 45
};

button.addEventListener("click", () => {
let {digitCount, maxNumber} = luckyNumber;
let myNumber = new Set();
for(let i = 0; i < digitCount; i++) {
myNumber.add(Math.floor(Math.random() * maxNumber) + 1)
}
result.innerText = ${[...myNumber]};
})