[Draft] Add Map & Set's Method Table, Description #66
Conversation
|
오오 이렇게 작은 단위로 머지해 나가는 것이 좋은 것 같습니다!! 👍 |
| ["city", "seoul"], | ||
| ["country", "korea"], | ||
| ]); | ||
| console.log(m2); // Map(2) {"city" => "seoul", "country" => "korea"} |
There was a problem hiding this comment.
Map(2) {...} 라는 표기법이 표준이 아니고, 브라우저마다 다를 수 있기 때문에 (FF 에서는 Map { 1 → 2 } 라고 나오네용) 교재에 쓰지 않는게 좋을 것 같습니다. 그래서 이 경우에는
console.log(m2.get("city")); // 'seoul'
console.log(m2.get("country")); // 'korea'
이렇게 고치는게 어떨까 합니다~~
| ``` | ||
|
|
||
| `Map`으로 생성된 객체는, 일반적인 객체와 비교했을 때 아래와 같은 차이점을 갖습니다. | ||
|
|
||
| | 구분 | 객체 | Map 객체 | | ||
| | ---------------------- | ----------------------- | --------------------- | | ||
| | 키로 사용할 수 있는 값 | 문자열 또는 심벌 값 | 객체를 포함한 모든 값 | |
There was a problem hiding this comment.
Symbol -> 대체로 심볼 로 음차했던 것 같습니닷!
|
|
||
| | 메소드 | 설명 | 예제 | 반환 값 | | ||
| | ------ | ---------------------------------------------------------- | -------------------------- | -------------------------------------------------------------- | | ||
| | set | Map 객체에 요소를 추가할 때 사용합니다 | `m.set("hello", "world");` | 해당 Map의 내부 값을 반환합니다. `Map(1) {"hello" => "world"}` | |
There was a problem hiding this comment.
Map.prototype.set 의 반환값은 '메소드가 호출된 Map 객체' 입니다!
Set.prototype.add 도 마찬가지네용 ㅎㅎ
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/set
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/add
| | 메소드 | 설명 | 예제 | 반환 값 | | ||
| | ------ | ---------------------------------------------------------- | -------------------------- | -------------------------------------------------------------- | | ||
| | set | Map 객체에 요소를 추가할 때 사용합니다 | `m.set("hello", "world");` | 해당 Map의 내부 값을 반환합니다. `Map(1) {"hello" => "world"}` | | ||
| | get | Map 객체에서 특정 요소를 취득할 때 사용합니다. | `m.get("hello");` | 해당 키에 알맞는 값을 반환합니다. `"world"` | |
There was a problem hiding this comment.
'알맞는' 보다는 '해당 키에 연관된 값을 반환합니다' 는 어떨까요?
(맵, 딕셔너리 등을 '연관 배열'로 부르기도 해서 '연관' 이라는 단어가 떠올랐습니당)
| | get | Map 객체에서 특정 요소를 취득할 때 사용합니다. | `m.get("hello");` | 해당 키에 알맞는 값을 반환합니다. `"world"` | | ||
| | has | Map 객체에서 해당 키의 요소가 있는지 알기 위해 사용합니다. | `m.has("hello")` | 해당 키의 요소가 존재하는지 Boolean으로 반환해줍니다. `true` | | ||
| | delete | Map 객체에서 요소를 삭제하기 위해서 사용합니다. | `m.delete("hello")` | 해당 요소가 삭제되었는지 Boolean으로 반환해줍니다. `true` | | ||
| | clear | Map 객체의 요소를 일괄삭제 하기 위해서 사용합니다. | `m.clear()` | 삭제된 Map의 내부 값을 반환합니다. `Map(0) {}` | |
There was a problem hiding this comment.
Map.prototype.clear, Set.prototype.clear 는 반환값이 없네요!
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/clear
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/clear
| `Map` 객체는 **데이터의 추가/삭제가 빈번하게 일어나는 경우** 일반적인 객체보다 훨씬 빠르게 동작한다는 장점이 있는 반면, JSON 등으로 **직렬화 하기 어렵다**는 특징이 있습니다. 키-값 쌍 형태의 데이터를 다루면서 속도가 중요한 경우에는 `Map`의 사용을 고려해보세요. | ||
|
|
||
| ## Set | ||
|
|
||
| ES2015에서 도입된 `Set` 생성자는 **집합** 형태의 자료구조를 제공합니다. `Set` 객체 내부에 이미 존재하는 데이터를 추가하려고 하면, 이는 무시됩니다. 즉, `Set` 객체는 내부에 **중복된 데이터가 저장되는 것을 허용하지 않습니다** | ||
| ES2015에서 도입된 `Set` 생성자는 **집합** 형태의 자료구조를 제공합니다. `Set` 객체 내부에 이미 존재하는 데이터를 추가하려고 하면, 이는 무시됩니다. 즉, `Set` 객체는 내부에 **중복된 데이터가 저장되는 것을 허용하지 않습니다** <br/> | ||
| 배열과 달리 요소의 순서에 의미가 없으며, 인덱스로 접근이 불가합니다. |
There was a problem hiding this comment.
순서가 아주 의미가 없진 않은게, 인덱스로 접근할 수는 없지만, 순회할 때에는 삽입된 순서대로 순회가 됩니다!
Set objects are collections of values. You can iterate through the elements of a set in insertion order.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set#description
그리고 (아주 사소한 부분이지만 일관성을 위해) 교재 전체적으로 <br/> 을 쓰지 않고 있어서, 특별한 이유가 없다면 개행을 없애는 쪽이 좋을 것 같습니다 ㅎㅎ
| | has | Set 객체에서 특정 요소가 있는지 알기 위해 사용합니다. | `s.has("hello")` | 해당 요소가 존재하는지 Boolean으로 반환해줍니다. `true` | | ||
| | delete | Set 객체에서 요소를 삭제하기 위해서 사용합니다. | `s.delete("hello")` | 해당 요소가 삭제되었는지 Boolean으로 반환해줍니다. `true` | | ||
| | clear | Set 객체의 요소를 일괄삭제 하기 위해서 사용합니다. | `s.clear()` | 삭제된 Set의 내부 값을 반환합니다. `Set(0) {}` | | ||
|
|
||
| **배열과 유사한 형태의 자료구조**가 필요하지만 **순서가 중요하지 않은 경우,** 그리고 **중복된 데이터의 저장을 허용하지 않아야** 할 경우, `Set`의 사용을 고려해보세요. |
There was a problem hiding this comment.
배열과 유사한 형태의 자료구조가 필요하지만 순서가 중요하지 않은 경우, 그리고 중복된 데이터의 저장을 허용하지 않아야 할 경우,
Set의 사용을 고려해보세요.
그러고보니 원래도 순서 관련해서 애매하게 적어놓은 부분이 있었네요. 이거 쓸 당시에 Set 의 삽입 순서 관련된 스펙을 몰랐나 봅니다 ^^; 해당 부분은 삭제하는게 좋을 것 같네요.
| // 이렇게 응용 가능해요! | ||
| // 중복된 값을 제거하는 요소만 반환하는 함수 uniq입니다. | ||
| const uniq = (array) => [...new Set(array)]; | ||
| console.log(uniq([2, 1, 2, 3, 5])); // [2, 1, 3, 5]; |
There was a problem hiding this comment.
이 부분은 Set 의 중요한 활용 사례이니 'Set 의 내장 메소드' 와 같은 레벨로 섹션을 하나 더 만들어서 간단한 설명과 함께 다루는게 어떨까 합니다 ㅎㅎ
Map과 Set의 설명을 조금 더 추가합니다. ( 주로 사용되는 메소드 설명 추가 )
이터러블에 관련된 설명을 추가하려다가 일단 Draft 레벨로 먼저 올려봤습니다.
어렵지 않은 선에서 부담없이 필요에 맞게 Map과 Set을 사용하는데 도움이 될 수 있도록
접근하고 있는데, 피드백주시면 더 보강하도록 하겠습니다.
생각보다 설명이라는 것을 적는게 어렵군요..
하지만 열심히 해보겠습니다.