22.11.22 화
DAY 9 - javascript (기초다지기)
📌iterable 객체
반복가능한 객체 -> 배열을 일반화한 객체
어떤 객체든 for..of 빈복문 적용 가능
- 이터러블과 유사 배열
이터러블(iterable) : symbol.iterator 가 구현된 객체
유사 배열(array-like) : 인덱스와 length 프로퍼티가 있어서 배열처럼 보이는 객체
📌 맵과 셋
맵(Map) : 키가 있는 데이터를 저장한다는 점에서 객체와 유사합니다.
셋(Set) : 중복을 허용하지 않는 값을 모아놓은 특별한 컬렉션 / 키가 없는 값을 저장
📖 풀어보기
✏️배열에서 중복 요소 제거하기
arr은 배열이라 가정합시다.
arr에서 중복 값을 제거해 주는 함수 unique(arr)를 만들어보세요.
예시:
function unique(arr) {
/* 제출 답안 */
return new Set(arr);
}
let values = ["Hare", "Krishna", "Hare", "Krishna",
"Krishna", "Krishna", "Hare", "Hare", ":-O"
];
alert( unique(values) ); // 얼럿창엔 `Hare, Krishna, :-O`만 출력되어야 합니다.<정답>
function unique(arr) {
return Array.from(new Set(arr));답안. Array.from으로 한번 더 감싸야한다.
Array.from() 은 문자열 등 유사 배열(Array-like) 객체나 이터러블한 객체를 배열로 만들어주는 메서드입니다.
(※ 유사 배열 객체란, 키가 인덱스 값으로 되어있고 길이를 나타내는 length 속성을 갖는 객체를 의미합니다
✏️애너그램 걸러내기
- 애너그램(어구전철)은 단어나 문장을 구성하고 있는 문자의 순서를 바꾸어 다른 단어나 문장을 만드는 놀이입니다.
예시:
nap - pan
ear - are - era
cheaters - hectares - teachers애너그램으로 만든 단어를 걸러내는 함수 aclean(arr)을 만들어보세요.
예시:
let arr = ["nap", "teachers", "cheaters", "PAN", "ear", "era", "hectares"];
alert( aclean(arr) ); // "nap,teachers,ear"나 "PAN,cheaters,era"이 출력되어야 합니다.
<풀이>
1. 단어를 글자 단위로 쪼갠 후, 알파벳 순으로 정렬하면 애너그램을 찾을 수 있다.
이 과정을 거치면 같은 그룹에 속하는 애너그램이 동일한 단어가 되기때문
- 알파벳순으로 정렬된 글자를 맵의 키로 사용해, 키 하나엔 값 하나만 저장되도록 하겠습니다.
function aclean(arr) {
let map = new Map();
// 새로운 맵 생성
for (let word of arr) {
// 단어를 글자 단위로 쪼갠 후, 알파벳 순으로 정렬한 다음에 다시 합칩니다.
let sorted = word.toLowerCase().split('').sort().join(''); // (*)
// arr 단어들을 소문자로 바꾼후, 한글자씩 쪼갠후, 알파벳순으로 바꾼후
다시 쪼갠 단어를 합친 것!
map.set(sorted, word);
// map.set(key, value) – key를 이용해 value를 저장합니다.
// 단어들을 word에 저장!
}
return Array.from(map.values());
}
let arr = ["nap", "teachers", "cheaters", "PAN", "ear", "era", "hectares"];
alert( aclean(arr) );어떻게 풀이해야 할 지 몰라서 답을 보고 한 줄씩 풀이해봤다!!
문제 자체가 이해가 안된 느낌..!
✏️ 반복 가능한 객체의 키
- map.keys()를 사용해 배열을 반환받고, 이 배열을 변수에 저장해 .push와 같은 배열 메서드를 적용하고 싶다고 해봅시다.
작동하지 않네요.
let map = new Map();
map.set("name", "John");
let keys = map.keys();
// Error: keys.push is not a function
keys.push("more");이유가 무엇일까요? keys.push가 작동하게 하려면 어떻게 코드를 고쳐야 할까요?
// 위위에 문제풀이랑 같은 결과 값이 나왔다
// Array.from으로 감싸야한다.
그래야 배열로 바뀜!!
<정답>을 보고 덧붙이면, 배열이 아닌 이터러블을 반환했기때문!
💬오늘의 느낀점
이터럴객체, 맵과 셋..생소했다
바로 이해하면 좋겠지만, 반복해서 본 다는 생각으로 너무 집착하지 말아야지..
그래도 잘 이해가 안되서 조금 답답쓰 하지만..늘 그렇듯.. 계속 써봐야 익숙해지는거 같다..
자기 전에 한번 더 읽어보기!!!!
