Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

JavaScript에서 객체의 키와 값을 반전시키는 방법 – _.invert() 메서드 활용법

객체 반전(inverting)은 underscore.js라는 자바스크립트 프레임워크가 등장하기 전까지는 상당히 까다로운 작업 중 하나였습니다. underscore.js는 다양한 유틸리티 함수를 제공하며, 그중 하나가 바로 _.invert()입니다. 이 메서드는 객체의 키(key)/값(value) 쌍을 서로 뒤바꾸는 역할을 합니다. 예를 들어 어떤 객체에 name/Kiran이라는 키/값 쌍이 있다면, _.invert() 메서드를 적용한 후에는 Kiran/name처럼 값과 키의 위치가 서로 바뀌게 됩니다. 지금부터 예제를 통해 자세히 살펴보겠습니다.

문법

_.invert(object);

이 메서드는 객체를 인수로 전달받아 해당 객체의 키/값 쌍을 값/키 쌍으로 변환합니다.

참고: _.invert()는 underscore.js뿐만 아니라 유사한 유틸리티 라이브러리인 lodash에서도 동일하게 제공됩니다. 아래 예제에서는 lodash를 CDN으로 불러와 사용합니다.

예제 1

다음 예제에서는 한 사람의 'name(이름)', 'salary(급여)', 'age(나이)' 속성이 각각 값/키 형태로 반전되는 과정을 보여줍니다.

<html>
<body>
<script
    src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/0.10.0/lodash.min.js"></script>
</head>
<body>
<script>
    var res = JSON.stringify(_.invert({name: 'Raj', age: 38, "salary": 120000}));
    document.write((res));
</script>
</body>
</html>

출력 결과

{"38":"age","120000":"salary","Raj":"name"}

예제 2

다음 예제에서는 'name', 'Organization', 'age' 속성이 값/키 형태로 반전되어 출력되는 것을 확인할 수 있습니다.

<html>
<body>
<script 
    src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/0.10.0/lodash.min.js"></script>
</head>
<body>
    <script type="text/javascript">
        var res = JSON.stringify(_.invert({"name": 'ElonMusk', age: 47, "Organization":'Spacex' }));
        document.write((res));
    </script>
</body>
</html>

출력 결과

{"47":"age","ElonMusk":"name","Spacex":"Organization"}

주의 사항

_.invert()를 사용할 때는 두 가지를 기억하는 것이 좋습니다. 첫째, 반전된 객체의 모든 키는 문자열로 변환되므로 숫자 값도 문자열 키가 됩니다. 둘째, 원래 객체에 중복된 값이 존재하면 반전 과정에서 나중에 등장한 키가 앞선 키를 덮어쓰게 되므로, 값의 고유성을 미리 확인한 후 사용하는 것이 안전합니다.