이것을 상상해보십시오. API 호출 설정 및 작동이 완료되었습니다. 데이터는 예상했던 대로 돌아옵니다. 지금? 원하는 솔루션을 만들기 위해 해당 데이터로 작업할 시간입니다. 갑자기 콘솔에 오류가 표시됩니다.

무슨 일이 일어났으며, 왜 이 object.map is not a function 표시됩니까? 알아 보려면 계속 읽으십시오.

문제

오류의 원인은 실제로 매우 간단합니다. .map() 메서드는 배열로 작업할 때만 적용할 수 있습니다. 보다 구체적으로, 이 메서드는 Array 프로토타입에 Array.prototype.map() 으로 존재합니다.

이 방법은 원래 2009년 ES5와 함께 도입되었으며 많은 시나리오에서 매우 유용합니다. Array.map() 은 콜백 함수를 유일한 매개변수로 사용합니다. 해당 콜백에는 현재 항목과 배열의 인덱스라는 두 개의 매개변수가 제공됩니다. 메서드 자체는 콜백의 반환 값이 메서드 자체에서 반환되는 새 배열에 함께 배치된다는 점을 제외하고는 Array.forEach() 를 호출하는 것과 유사하게 작동합니다.

예를 들어, 숫자 배열이 있고 원래 배열의 각 숫자가 두 배로 되는 새 배열을 만들려면 다음과 같이 하면 됩니다.

 const items = [ 1 , 2 , 3 ]; // ES5 approach const doubledItems = items.map( function ( item ) { return item * 2 ; }); // ES6+ approach const doubledItems = items.map( ( item ) => { return item * 2 ; }); // Least code approach const doubledItems = items.map( ( item ) => item * 2 ); console .log(doubledItems); // [2, 4, 6]
 코드 언어: JavaScript ( javascript )

해결책

object.map is not a function 해결하려면 먼저 작업 중인 데이터의 모양을 파악한 다음 데이터가 무엇인지에 따라 해당 데이터에서 배열을 만듭니다. 예를 들어, 데이터가 단순한 객체일 수 있지만 찾고 있는 배열은 실제로 해당 객체 내부에 있습니다. 이 경우 점 표기법을 사용하여 원하는 속성에 액세스하면 됩니다.

 const object = { items : [ { id : 1 , data : "item 1 data" , }, { id : 2 , data : "item 2 data" , }, ], }; const error = object.map( ( item ) => item.data); // This will cause your error! // Instead, map over the items property rather than the parent object const result = object.items.map( ( item ) => item.data); console .log(result); // ["item 1 data", "item 2 data"]
 코드 언어: JavaScript ( javascript )

데이터가 단순한 객체일 수도 있지만 반복하려는 데이터는 객체의 각 키에 저장됩니다. 이 경우 해당 키를 반복하고 각 키의 해당 값에 대해 논리를 수행할 수 있습니다.

 const object = { 1 : { id : "1" , data : "item 1 data" , }, 2 : { id : "2" , data : "item 2 data" , }, }; const error = object.map( ( item ) => item.data); // This will cause your error! // Get an array of the keys in your object const array = Object .keys(object); // [1, 2] // Loop through that array using each key to get the value const result = array.map( ( key ) => { const value = object[key]; // Perform your desired logic here then return a new value return value.data; }); console .log(result); // ["item 1 data", "item 2 data"]
 코드 언어: JavaScript ( javascript )

JavaScript Set 또는 Map 으로 작업할 때 또 다른 일반적인 솔루션이 필요합니다. 둘 다 반복 가능하고 .forEach() 메서드가 있기 때문에 .map() 도 작동할 것이라고 합리적으로 가정할 수 있습니다. 그러나 기술적으로 어레이가 아니므로 해결 방법이 필요합니다. 솔루션은 Set 또는 Map 모두에 대해 유사하며 여기에서 볼 수 있는 더 자세한 값으로 작업하는 방법을 설명하는 기사도 있습니다.

 // --- Map solution example --- const myMap = new Map (); myMap.set( 1 , "item 1 data" ); myMap.set( 2 , "item 2 data" ); const myMapError = myMap.map(); // This will cause your error! // Create an array from the values of the Map const myMapArray = [...myMap.values()]; const myMapResult = myMapArray.map( ( item ) => { // Perform your logic here if (item) { return item; } }); console .log(myMapResult); // ["item 1 data", "item 2 data"] // --- Set solution example --- const mySet = new Set (); mySet.add( "item 1 data" ); mySet.add( "item 2 data" ); // Since set values are unique this won't be added to the Set mySet.add( "item 2 data" ); const mySetError = mySet.map(); // This will cause your error! const mySetArray = [...mySet.values()]; const mySetResult = mySetArray.map( ( item ) => { // Perform your logic here if (item) { return item; } }); console .log(mySetResult); // ["item 1 data", "item 2 data"]
 코드 언어: JavaScript ( javascript )

나중에 오류를 피하고 싶다면, 특히 Array.map() 을 호출하려고 할 데이터의 정확한 모양을 모르는 경우 다음은 배열 값을 안전하게 매핑하는 간단한 함수입니다.

 const safelyMap = ( data, callback ) => { if (!(data && Array .isArray(data))) { return []; } return data.map(callback); }; // Arbitrary callback function const callback = ( item ) => item; console .log(safelyMap( null , callback)); // [] console .log(safelyMap( new Set (), callback)); // [] console .log(safelyMap([ 1 , 2 , 3 ], callback)); // [1, 2, 3]
 코드 언어: JavaScript ( javascript )

이러한 솔루션 중 하나로 특정 사례가 해결되기를 바랍니다. 그렇지 않은 경우 의견을 남겨주시면 기꺼이 도와드리겠습니다.