본문 바로가기
Web/JavaScript

[JavaScript] map 객체 - has(), get(), set(), delete(), clear(), entries(), values()

by coding-choonsik 2023. 4. 20.
728x90
반응형
SMALL

1. 맵(map)

  •  Key, Value로 이루어진 데이터 집합의 자료구조
  • 키-값 쌍으로 반복
    const 맵이름 = new Map([['키1','값1'], ['키2','값2']... ])

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>맵</title>
</head>
<body>
    <h2>맵</h2>
    <script>
    	// Map 객체 생성법
        const map = new Map([
            ['apple', '🍎'], ['banana', '🍌']
        ])
        console.log(map)

    </script>
</body>
</html>

2. 메서드

2-1. set()

  • 지정된 키와 값을 Map 객체에 추가
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>맵</title>
</head>
<body>
    <h2>맵</h2>
    <script>
        const map = new Map([
            ['apple', '🍎'], ['banana', '🍌']
        ])
     
        // 값 추가
        map.set('orange', '🍊')
        map.set('grape', '🍇')
        console.log(map)

    </script>
</body>
</html>

2-2. get()

  • 지정된 키에 대응하는 값을 반환
  • 해당 키가 없으면 undefined 반환
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>맵</title>
</head>
<body>
    <h2>맵</h2>
    <script>
        const map = new Map([
            ['apple', '🍎'], ['banana', '🍌']
        ])
        // console.log(map)

      
        //데이터 찾기
        console.log(map.get('apple'))
        console.log(map.get('banana'))
        console.log(map.get('orange'))  // undefined
        console.log('-------------')

        obj = {'apple': '🍎', 'banana': '🍌'}
        // console.log(obj.get('apple'))  // object객체는 get 함수 존재 x
        console.log('obj:', obj['apple'])
        console.log('obj:',obj.apple)
        console.log('map:',map['apple'])  // undefined
        console.log('map:',map.get('apple'))
        console.log('map:',map.apple) // undefined
    </script>
</body>
</html>

▲ Map 객체는 object 객체처럼 [] 대괄호 키값을 넣어 해당 키에 대응하는 값을 찾을 수 없음(undefined)

2-3. has()

  • Map 객체 내에 지정된 키가 있는지 여부를 반환
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>맵</title>
</head>
<body>
    <h2>맵</h2>
    <script>
        const map = new Map([
            ['apple', '🍎'], ['banana', '🍌']
        ])
        // console.log(map)

        // 키 존재 확인
        console.log(map.has('apple'))  // true
        console.log(map.has('🍎'))  //false ,value값x 
        console.log(map.has('orange'))  //false

    </script>
</body>
</html>

2-4. delete()

  • 지정된 키와 해당 값을 Map 객체에서 제거
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>맵</title>
</head>
<body>
    <h2>맵</h2>
    <script>
     
        const map = new Map([
            ['apple', '🍎'], ['banana', '🍌']
        ])
        // console.log(map)

        // 값 추가
        map.set('orange', '🍊')
        map.set('grape', '🍇')
        console.log(map)

        // 삭제
        map.delete('orange')
        console.log(map)

    </script>
</body>
</html>

▲ orange 키-값 모두 삭제됨

2-5. clear()

  • Map객체에서 모든 요소를 제거
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>맵</title>
</head>
<body>
    <h2>맵</h2>
    <script>
        const map = new Map([
            ['apple', '🍎'], ['banana', '🍌']
        ])
        // console.log(map)

        // 값 추가
        map.set('orange', '🍊')
        map.set('grape', '🍇')
        console.log(map)


        // map 전체 삭제
        map.clear()
        console.log(map)
    </script>
</body>
</html>

2-6. size

  • Map 객체 내의 요소 개수를 반환
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>맵</title>
</head>
<body>
    <h2>맵</h2>
    <script>
  
        const map = new Map([
            ['apple', '🍎'], ['banana', '🍌']
        ])
               // 값 추가
        map.set('orange', '🍊')
        map.set('grape', '🍇')
        console.log(map)


         // 사이즈 확인
        console.log(map.size)  //4
    </script>
</body>
</html>

2-7. entries()

  • Map 객체의 모든 키를 포함하는 새로운 iterator 객체를 반환

2-8. values()

  • Map 객체의 모든 값을 포함하는 새로운 iterator 객체를 반환
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>맵</title>
</head>
<body>
    <h2>맵</h2>
    <script>
        const map = new Map([
            ['apple', '🍎'], ['banana', '🍌']
        ])
   
        // 값 추가
        map.set('orange', '🍊')
        map.set('grape', '🍇')
        console.log(map)

        console.log(map.entries())  // 키값 iterator 반환
        console.log(map.values())	// value값 iterator 반환
        
    </script>
</body>
</html>

MDN: map

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Map

 

Map - JavaScript | MDN

Map 객체는 키-값 쌍과 키의 원래 삽입 순서를 기억합니다. 모든 값(객체 및 원시 값 모두)은 키 또는 값으로 사용될 수 있습니다.

developer.mozilla.org

 

 

728x90
반응형
LIST

'Web > JavaScript' 카테고리의 다른 글

[JavaScript] Promise객체 - 1️⃣ 비동기 작업 처리란? & Promise 객체 생성과 콜백함수 사용  (0) 2023.04.20
[JavaScript] 예외처리 - try~catch~finally, throw문  (0) 2023.04.20
[JavaScript] 세트(Set) - add(), has(), delete(), clear()  (0) 2023.04.20
[JavaScript] Spread 연산자( ... )  (0) 2023.04.20
[JavaScript] 제네레이터(Generator)  (0) 2023.04.19

관련글

티스토리툴바