[JavaScript] 배열을 유용하게 활용하는 10가지 방법

👨‍💻 [JavaScript] 배열을 유용하게 활용하는 10가지 방법

안녕하세요 TriplexLab 입니다.

이번 시간에는 객체 배열에서(key-value)에서 유용하게 활용하는 10가지 방법에 관해서 정리해보겠습니다. 

이번 포스트는  다음 링크를 참고 했습니다.

[Javascript] 15가지 유용한 map, reduce, filter

다음과 같은 데이터가 있다고 가정해봅시다.

const datas = [ 
	{ id: 1, type: "ko", name: '비빔밥', price : '8,000' }, 
    { id: 2, type: "ko", name: "삼계탕", price : "12,000" }, 
    { id: 3, type: "ko", name: "김치찌개", price : "8,500" }, 
    { id: 4, type: "ko", name: "라볶이", price : "5,000" }, 
    { id: 5, type: "ch", name: "짜장면", price : "8,000" }, 
    { id: 6, type: "ch", name: "탕수육", price : "17,000" }, 
    { id: 7, type: "ch", name: "짬뽕", price : "8,500" }, 
    { id: 8, type: "jp", name: "라멘", price : "9,000" }, 
    { id: 9, type: "jp", name: "스시", price : "14,900" }, 
    { id: 10, type: "jp", name: "우동", price : "8,000" }, 
    { id: 11, type: "jp", name: "나가사키 짬뽕", price : "7,500" } 
];

✅간단한 검색(case-sensitive)

const res = datas.filter(el => el.name.includes('비빔밥'));
console.log(res)

// 결과) 👇
Array(1)
0: {id: 1 name: "비빔밥" price: "8,000" type: "ko"}

✅특정 값을 가지고 있는지 여부 체크

const res = datas.some(el => el.price === '8,000');
console.log(res)

// 결과) 👇
true

✅특정값들만 조회하기

const res = datas.filter(el => el.price === '8,000');
console.log(res)

// 결과) 👇
(3) [{…}, {…}, {…}]
0: {id: 1, type: 'ko', name: '비빔밥', price: '8,000'}
1: {id: 5, type: 'ch', name: '짜장면', price: '8,000'}
2: {id: 10, type: 'jp', name: '우동', price: '8,000'}
length: 3

✅특정 조건에 해당되는 원소만 새로운 배열에 추가하기

//쉼표 빼는 함수
function uncomma(str) {
  str = String(str);
  return str.replace(/[^\d]+/g, "");
}
function getLen(list) {
  // 👉2) reduce문을 사용해서 newArr에 값을 추가합니다.
  return list.reduce((newArr, el) => {
    if (parseInt(uncomma(el["price"])) < 8000) {
      const gu_name = el["name"];
      const gu_price = el["price"];
      const newObj = { gu_name: gu_name, gu_price: gu_price };
      newArr.push(newObj);
    }
    return newArr;
  }, []);
}

const groupAge = getLen(mise_list);
console.log(groupAge);

// 결과) 👇
[
  { gu_name: '라볶이', gu_price: '5,000' },
  { gu_name: '나가사키 짬뽕', gu_price: '7,500' }
]

✅특정 키의 빈도를 포함하는 객체를 만들기

const res = datas.reduce((acc, el) => (
	{ ...acc, [el.price]: (acc[el.price] || 0) + 1 }
),{});
console.log(res)

// 결과) 👇
{8,000: 3, 12,000: 1, 8,500: 2, 5,000: 1, 17,000: 1, …}
5,000: 1
7,500: 1
8,000: 3
8,500: 2
9,000: 1
12,000: 1
14,900: 1

✅특정 값을 가지고 key로 만들기

name로 유저를 찾기위해 전체 array를 처리하는 것 대신에 datas의 name 값을 가지고 key로 적용되는 객체를 만들 수 있습니다.

const res = datas.reduce((acc, el) => ({...acc, [el.name]: el }), {});
console.log(res)

// 결과) 👇
{비빔밥: {…}, 삼계탕: {…}, 김치찌개: {…}, 라볶이: {…}, 짜장면: {…}, …}
김치찌개: {id: 3, type: 'ko', name: '김치찌개', price: '8,500'}
나가사키 짬뽕: {id: 11, type: 'jp', name: '나가사키 짬뽕', price: '7,500'}
라멘: {id: 8, type: 'jp', name: '라멘', price: '9,000'}
라볶이: {id: 4, type: 'ko', name: '라볶이', price: '5,000'}
비빔밥: {id: 1, type: 'ko', name: '비빔밥', price: '8,000'}
삼계탕: {id: 2, type: 'ko', name: '삼계탕', price: '12,000'}
스시: {id: 9, type: 'jp', name: '스시', price: '14,900'}
우동: {id: 10, type: 'jp', name: '우동', price: '8,000'}
짜장면: {id: 5, type: 'ch', name: '짜장면', price: '8,000'}
짬뽕: {id: 7, type: 'ch', name: '짬뽕', price: '8,500'}
탕수육: {id: 6, type: 'ch', name: '탕수육', price: '17,000'}

✅배열 안의 각각의 data에서 특정 key로 유일한 값들만 조회하기

const res = [...new Set(datas.map(el => el.price))];
console.log(res)

// 결과) 👇
(8) ['8,000', '12,000', '8,500', '5,000', '17,000', '9,000', '14,900', '7,500']
0: "8,000"
1: "12,000"
2: "8,500"
3: "5,000"
4: "17,000"
5: "9,000"
6: "14,900"
7: "7,500"

✅객체 배열에서 key-value 쌍을 찾아서 바꾸기

여기서는 id 11을 찾아서 price 값을 18,000원으로 바꿨습니다.

const res = datas.map(el => {
    return el.id !== 11 ? el : {...el, price: '18,000'}
});
console.log(res)

// 결과) 👇
(11) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {id: 1, type: 'ko', name: '비빔밥', price: '8,000'}
1: {id: 2, type: 'ko', name: '삼계탕', price: '12,000'}
2: {id: 3, type: 'ko', name: '김치찌개', price: '8,500'}
3: {id: 4, type: 'ko', name: '라볶이', price: '5,000'}
4: {id: 5, type: 'ch', name: '짜장면', price: '8,000'}
5: {id: 6, type: 'ch', name: '탕수육', price: '17,000'}
6: {id: 7, type: 'ch', name: '짬뽕', price: '8,500'}
7: {id: 8, type: 'jp', name: '라멘', price: '9,000'}
8: {id: 9, type: 'jp', name: '스시', price: '14,900'}
9: {id: 10, type: 'jp', name: '우동', price: '8,000'}
10: {id: 11, type: 'jp', name: '나가사키 짬뽕', price: '18,000'}

✅중복 제거

배열은 중복을 허용하는 자료구조이에요.
Set이라는 함수는 중복을 허용하지 않는 자료구조 입니다. 

const array = ['⚾️','⚽️','🏓','⚾️','🏀']

console.log([...new Set(array)])

// 결과) 👇
(4) ['⚾️', '⚽️', '🏓', '🏀']
0: "⚾️"
1: "⚽️"
2: "🏓"
3: "🏀"
length: 4

✅객체를 쿼리 스트링으로 인코딩하기

최근에는 쿼리 스트링을 잘 사용하진 않지만 알아두면 용이 하게 쓸수 있을것 같다.

const params = {lat: 45, lng: 6, alt: 1000};
const queryString = Object.entries(params).map(el => encodeURIComponent(el[0]) + '=' + encodeURIComponent(el[1])).join('&')
console.log(queryString)

// 결과) 👇
lat=45&lng=6&alt=1000

 

지금까지 객체 배열에서 용이하게 쓰일수 있는 것들을 정리해봤습니다.
FE개발자로 일을 하다보면 React로 사용하든, Vue로 사용하든 데이터(API)를 사용해서 전체 데이트를 가져와서
내가 필요한 데이터만 따로 새로운 객체 배열을 만들어서
화면에 뿌려주는 일들을 자주합니다. 그럴때 참고하면 좋을것 같습니다. 😄

위에서 작업해본 코드를 파일로 제공합니다.
필요하신 분들이 다운받으세요 👍 👍

👉전체 소스코드

전체 소스코드를 github에도 공유합니다.😃🔥👍 

GitHub - younhoso/younhoso