스터디 9회차 공부 내용 - JS Map 자료구조 구현

잔잔바리디자이너·2022년 4월 23일
0

Study

목록 보기
13/19
post-thumbnail

Js 함수로 Map 자료구조 구현하기

Array.prototype.push() 메서드는 배열에 자동으로 key 밸류를 넣어주면서 값을 넣는다.
key, value 쌍을 이루는 객체를 생성할 수 있는 함수를 구현해보았다.
또 get, set 등의 메서드로 키, 값을 넣어줄 수 있고, 인덱스가 아닌 키값으 해당 밸류에 바로 접근할 수 있는 메서드를 만들어주었다.

const Map = (function Map(){
  function Map(){
    this.arr = []
  	this.length = 0 
  }
  Map.prototype.set = function(key,value){
    this.arr.push({key,value})
    this.length++
  }
  Map.prototype.getValue = function(keyValue){
   	for(let element in this.arr){
      if(this.arr[element].key === keyValue){
        return this.arr[element].value
      }
    }
    return false
  }
  return Map
}())

const map = new Map()
for(let i = 0; i < 10; i++){
  map.set(`k${i}`,`v${i}`)
}
console.log(map)

/*
Map {
  arr: [
    { key: 'k0', value: 'v0' },
    { key: 'k1', value: 'v1' },
    { key: 'k2', value: 'v2' },
    { key: 'k3', value: 'v3' },
    { key: 'k4', value: 'v4' },
    { key: 'k5', value: 'v5' },
    { key: 'k6', value: 'v6' },
    { key: 'k7', value: 'v7' },
    { key: 'k8', value: 'v8' },
    { key: 'k9', value: 'v9' }
  ],
  length: 10,
  __proto__: {
    constructor: ƒ Map(),
    set: ƒ (),
    getValue: ƒ ()
  }
}
*/

map.getValue('k9') // 'v9'

그리고 js에서 제공하는 Map 생성자 함수로 한번 비교해보고 따라 구현해보기.

const map = new Map();
for(let i =0; i < 10; i++){
  map.set(`k${i}`,`v${i}`)
}
/*
Map(10) {
  'k0' => 'v0',
  'k1' => 'v1',
  'k2' => 'v2',
  'k3' => 'v3',
  'k4' => 'v4',
  'k5' => 'v5',
  'k6' => 'v6',
  'k7' => 'v7',
  'k8' => 'v8',
  'k9' => 'v9',
  __proto__: {
    constructor: ƒ Map(),
    get: ƒ get(),
    set: ƒ set(),
    has: ƒ has(),
    delete: ƒ delete(),
    clear: ƒ clear(),
    entries: ƒ entries(),
    forEach: ƒ forEach(),
    keys: ƒ keys(),
    size: 10,
    values: ƒ values()
  }
}
*/
console.log(map.get('k4')) // v4
console.log(map.get('none')) // undefined
console.log(map.has('none')) // false
map.clear()
console.log(map)
/*
Map(0) {
  __proto__: {
    constructor: ƒ Map(),
    get: ƒ get(),
    set: ƒ set(),
    has: ƒ has(),
    delete: ƒ delete(),
    clear: ƒ clear(),
    entries: ƒ entries(),
    forEach: ƒ forEach(),
    keys: ƒ keys(),
    size: 0,
    values: ƒ values()
  }
}
*/


map.delete('k1') // true
console.log(map)
/*
Map(9) {
  'k0' => 'v0',
  'k2' => 'v2',
  'k3' => 'v3',
  'k4' => 'v4',
  'k5' => 'v5',
  'k6' => 'v6',
  'k7' => 'v7',
  'k8' => 'v8',
  'k9' => 'v9',
  __proto__: {
    constructor: ƒ Map(),
    get: ƒ get(),
    set: ƒ set(),
    has: ƒ has(),
    delete: ƒ delete(),
    clear: ƒ clear(),
    entries: ƒ entries(),
    forEach: ƒ forEach(),
    keys: ƒ keys(),
    size: 9,
    values: ƒ values()
  }
}
*/
map.size // 9

구현할것:

  • get (완료)
  • set (완료, 오버라이딩 처리 완료)
  • clear (완료)
  • delete (완료)
  • has (완료)
const Map = (function Map(){
  function Map(){
    this.arr = []
  	this.length = 0 
  }
  
  Map.prototype.set = function(key,value){
    //has() 메서드 재사용하기
    if(!this.has(key)){
      this.arr.push({key:key,value:value})
    	this.length++
    }
    for(let element in this.arr){
      if(this.arr[element].key === key){
        this.arr[element].value = value
      }
    }
    return this.arr
  }
  
  Map.prototype.getValue = function(keyValue){
   	for(let element in this.arr){
      if(this.arr[element].key === keyValue){
        return this.arr[element].value
      }
    }
    return false
  }
  
  Map.prototype.has = function(keyValue){
    // Returns a boolean asserting whether a value has been associated to the key in the Map object or not.
	for(let element in this.arr){
      if(this.arr[element].key === keyValue){
        	return true
      }
  	}
  return false
  }
  
  Map.prototype.delete = function(keyValue){
    for(let element in this.arr){
      if(this.arr[element].key === keyValue){
        	this.arr.splice(element,1)
        	this.length--
        	return true
      }
  	}
    return false
  }
  
  Map.prototype.clear = function(){
    //Removes all key-value pairs from the Map object.
    this.arr = []
    // At first, I put this.arr = null
    // but it makes us not allow to push new pair values in.
    this.length = 0
  }
  return Map
}())

const map = new Map()
for(let i = 0; i <= 10; i++){
  map.set(`k${i}`,`v${i}`)
}
console.log(map)

완료~~~

0개의 댓글