삶을 더 쉽게 만들기 위해 알아야 할 5가지 필수 JavaScript 배열 방법

소개

배열은 관련 데이터를 저장하는 데 적합하며 정보를 구성하는 방법으로 자주 사용됩니다. 우리 대부분은 그것들을 매일 사용하지만 JavaScript에 내장된 정말 멋진 배열 메서드도 있다는 것을 알고 계셨습니까?

이러한 방법은 여러 줄의 코드를 하나의 간단한 명령으로 최적화하여 우리의 삶을 훨씬 쉽게 만듭니다. 어레이를 이제 막 시작했든 이미 전문가가 된 기분이든 관계없이 이 기사는 어레이 작업을 보다 효율적으로 수행하는 데 도움이 될 것입니다.

필터()

특정 기준에 따라 배열을 필터링하려면 filter() 메서드가 필요할 수 있습니다. 관심 있는 모든 항목이 포함된 새 배열을 반환하는 유용한 함수입니다.

배열의 각 요소에 대해 호출되는 매개변수로 함수가 필요합니다. 함수가 true를 반환하면 해당 요소는 배열에 남아 있습니다. 그렇지 않으면 어레이에서 제거됩니다.

예시

우리는 백엔드에서 데이터를 요청했으며 개체 배열이 가진 속성을 기반으로 클라이언트 측 필터링을 수행하려고 합니다. 이 경우 JokeAPI에서 농담을 요청했으며 범주 속성이 프로그래밍과 동일한 농담을 필터링하려고 합니다.

암호

const response = {
    "error": false,
    "amount": 4,
    "jokes": [
        {
            "category": "Programming",
            "type": "single",
            "joke": "Judge: \"I sentence you to the maximum punishment...\"\nMe (thinking): \"Please be death, please be death...\"\nJudge: \"Learn Java!\"\nMe: \"Damn.\"",
            "id": 45,
            "safe": true,
            "lang": "en"
        },
        {
            "category": "Christmas",
            "type": "twopart",
            "setup": "How will Christmas dinner be different after Brexit?",
            "delivery": "No Brussels!",
            "id": 251,
            "safe": false,
            "lang": "en"
        },
        {
            "category": "Christmas",
            "type": "twopart",
            "setup": "What do Santa's little helpers learn at school?",
            "delivery": "The elf-abet!\n",
            "id": 248,
            "safe": true,
            "lang": "en"
        },
        {
            "category": "Christmas",
            "type": "twopart",
            "setup": "Why couldn't the skeleton go to the Christmas party?",
            "delivery": "Because he had no body to go with!",
            "id": 252,
            "safe": true,
            "lang": "en"
        }
    ]
}

const programmingJokes = response.jokes.filter((joke) => 
   joke.category === "Programming"
);

console.log("programmingJokes: ", programmingJokes);

콘솔 출력

programmingJokes: [
  {
    "category": "Programming",
    "type": "single",
    "joke": "Judge: \"I sentence you to the maximum punishment...\"\nMe (thinking): \"Please be death, please be death...\"\nJudge: \"Learn Java!\"\nMe: \"Damn.\"",
    "id": 45,
    "safe": true,
    "lang": "en"
  },
]

샌드박스 링크 - https://playcode.io/982694

지도()

map() 메서드는 초기 배열을 실제로 변경하지 않고 배열의 각 항목을 변환하여 함수를 적용하고 결과를 새 배열에 저장합니다.

예시

백엔드에서 데이터를 요청했으며 해당 데이터에서 정보를 추출하고 싶습니다. 이 경우 RandomDataAPI에서 임의의 사용자 데이터를 요청했으며 각 사람의 나이를 배열로 추출하려고 합니다.

암호

const response = [
  {
    "id": 7433,
    "uid": "4c2c1731-2c3c-4983-b39f-0f988791e98f",
    "password": "L903JpXGAj",
    "first_name": "Dalene",
    "last_name": "Kuhn",
    "username": "dalene.kuhn",
    "email": "[email protected]",
    "avatar": "https://robohash.org/autmagnisunt.png?size=300x300&set=set1",
    "gender": "Agender",
    "phone_number": "+964 771-857-9446 x77784",
    "social_insurance_number": "607847845",
    "age": 25,
  },
  {
    "id": 3764,
    "uid": "0c1c9485-2b90-4e68-a795-0e4925aa8344",
    "password": "XjyI92Y1dl",
    "first_name": "Laurence",
    "last_name": "Lowe",
    "username": "laurence.lowe",
    "email": "[email protected]",
    "avatar": "https://robohash.org/quinonomnis.png?size=300x300&set=set1",
    "gender": "Agender",
    "phone_number": "+689 743-128-5476 x530",
    "social_insurance_number": "737935460",
    "age": 30,
  },
  {
    "id": 9408,
    "uid": "4933cb5d-f4f5-4bc3-8d37-f4c9b3129923",
    "password": "JrI8e4KVjs",
    "first_name": "Gabriella",
    "last_name": "Tillman",
    "username": "gabriella.tillman",
    "email": "[email protected]",
    "avatar": "https://robohash.org/repellatmaioresmolestiae.png?size=300x300&set=set1",
    "gender": "Bigender",
    "phone_number": "+675 552-834-4168 x39534",
    "age": 21,
  }
]

const arrayOfAges = response.map(person => person.age);

console.log("arrayOfAges: ", arrayOfAges)

콘솔 출력

arrayOfAges: [25, 30, 21]

샌드박스 링크 - https://playcode.io/982843

줄이다()

reduce() 메서드는 각 요소에 함수를 적용하고 결과를 누적하여 배열을 단일 값으로 줄입니다. 합계를 찾거나 모든 항목의 평균을 찾는 데 좋은 방법입니다.

예시

월별 예치금이 포함된 배열이 있고 모든 예치금의 합계를 알고 싶습니다.

암호

const depositsArray = [
    {
        id: 1231,
        deposit: 5,
        currency: '$',
    },
    {
        id: 1231,
        deposit: 10,
        currency: '$',
    },
    {
        id: 1231,
        deposit: 20,
        currency: '$',
    },
    {
        id: 1231,
        deposit: 5,
        currency: '$',
    },
    {
        id: 1231,   
        deposit: 15,    
        currency: '$',
    },
];



const sumOfDeposits = depositsArray.reduce((total, transaction) => 
   total + transaction.deposit, 0
);

console.log('depositsArray: ', depositsArray);
console.log('sumOfDeposits: ', sumOfDeposits);

콘솔 출력

depositsArray: [{...}, {...}, {...}, {...}, {...}]
sumOfDeposits: 55

샌드박스 링크 - https://playcode.io/982850

약간()

some() 메서드는 배열의 요소 중 적어도 하나가 제공된 함수에 의해 구현된 테스트를 충족하는지 확인합니다. 테스트를 만족하면 true를 반환합니다. 그렇지 않으면 false를 반환합니다.

예시

백엔드에서 사용자를 요청했으며 그 중 하나가 봇으로 플래그 지정되었는지 알고 싶습니다.

암호

const response = [
  {
    id: 101,
    firstName: 'Muhammad',
    lastName: 'Ovi',
    age: 25,
    isBot: false,
  },
    {
    id: 102,
    firstName: 'John',
    lastName: 'Doe',
    age: 30,
    isBot: true,
  },
    {
    id: 103,
    firstName: 'Chris',
    lastName: 'Smith',
    age: 27,
    isBot: false,
  },
];

const isNotValidUsers = response.some((user) => user.isBot === false);

console.log("isNotValidUsers: ", isNotValidUsers)

콘솔 출력

isNotValidUsers: true

샌드박스 링크 - https://playcode.io/983403

모든()

every() 메서드는 배열의 모든 요소가 제공된 함수에 의해 구현된 테스트를 충족하는지 확인합니다. 그렇다면 true를 반환합니다. 그렇지 않으면 false를 반환합니다.

예시

장바구니에 제품 목록이 있고 재고가 있는지 확인하고 싶습니다.

암호

const response = [
    {
      "id": 1,
      "title": "iPhone 9",
      "price": 549,
      "discountPercentage": 12.96,
      "rating": 4.69,
      "stock": 94
    },
    {
      "id": 2,
      "title": "Apple Watch",
      "price": 300,
      "discountPercentage": 10,
      "rating": 4.40,
      "stock": 20
    },
     {
      "id": 3,
      "title": "Apple Headphones",
      "price": 600,
      "discountPercentage": 7,
      "rating": 4.65,
      "stock": 2
    },
]

const hasStock = response.every((item) => item.stock > 0);

console.log("hasStock: ", hasStock);

콘솔 출력

hasStock: true

샌드박스 링크 - https://playcode.io/986629

결론

배열은 모든 프로그래밍 언어에서 가장 기본적이고 중요한 데이터 구조 중 하나입니다. JavaScript를 배울 때 이러한 배열 메서드를 사용하여 데이터를 보다 효율적으로 조작하고 저장하는 방법을 아는 것이 도움이 됩니다. 이러한 메서드에는 코드를 보다 효율적으로 만드는 데 도움이 되는 filter(), map(), reduce(), some() 및 every()가 포함됩니다.