모든 초보자가 알아야 할 필수 JavaScript 방법

이 글에서는 map(), filter(), Reduce(), forEach(), find() 등 5가지 필수 JavaScript 메서드를 살펴보겠습니다. 이러한 기능을 익히면 코드가 더욱 선명하고 빨라지며 작성이 훨씬 더 재미있어집니다.

크리스 파인.

1. map() – 배열 변환

빈 티셔츠 더미가 있고 모든 티셔츠에 디자인을 인쇄하고 싶다고 상상해 보세요. 원본 스택을 변경하는 대신 디자인이 적용된 새로운 스택을 만듭니다. 이것이 map()의 작동 방식입니다. 각 항목에 함수를 적용하고 새로운 배열을 제공합니다.

분류:

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // Output: [2, 4, 6, 8]

숫자: 원래 배열은 그대로 유지됩니다.

• doubled: 변환된 값이 포함된 새 배열입니다.
• 실제 사용 사례:

유용한 이유:

const pricesInUSD = [10, 20, 30];
const pricesInEUR = pricesInUSD.map(price => price * 0.85);
console.log(pricesInEUR); // Output: [8.5, 17, 25.5]

map()이 새 배열을 생성한다는 점을 항상 기억하세요. 현재 위치에서 데이터를 수정하려는 경우 이는 해당 작업에 적합한 도구가 아닙니다.

2. filter() – 특정 항목 선택

옷장을 정리하고 자신에게 딱 맞는 옷만 보관하고 있다고 상상해 보세요. filter()는 필요한 것만 선택하고 나머지는 생략하는 데 도움이 됩니다. 간단하고 효율적입니다.

예:
배열에서 짝수를 필터링해 보겠습니다.

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // Output: [2, 4, 6, 8]

분류:

• 숫자: 원래 배열은 그대로 유지됩니다.
• 조건: num % 2 !== 0은 숫자가 홀수인지 확인합니다.
• 결과: 필터링된 값을 사용하여 새로운 배열인 홀수번호가 생성됩니다.

실제 사용 사례:
제품 목록을 관리하고 있는데 재고가 없는 항목을 필터링하려고 한다고 가정해 보겠습니다.

const pricesInUSD = [10, 20, 30];
const pricesInEUR = pricesInUSD.map(price => price * 0.85);
console.log(pricesInEUR); // Output: [8.5, 17, 25.5]

사용 시기:

• 데이터세트에서 관련 데이터만 추출합니다.
• 필요한 것만 작업하여 프로세스를 단순화하세요.

초보자가 좋아하는 이유:
루프와 달리 filter()는 간단합니다. 오류 가능성이 줄어들고 더 적은 코드로 더 많은 것을 달성할 수 있습니다.

3. Reduce() – 데이터 집계

당신이 식료품점 계산대에 있는데 계산원이 모든 품목의 가격을 합산하여 총액을 알려준다고 가정해 보겠습니다. 이것이 바로 Reduce()의 작동 방식입니다. 배열의 모든 요소를 ​​합계, 곱 또는 사용자 정의 결과와 같은 단일 값으로 결합합니다.

기능:
Reduce()는 배열 요소를 요소별로 처리하고 정의한 함수에 따라 단일 출력 값으로 축소합니다.

예:
배열의 총합을 계산해 보겠습니다.

const numbers = [1, 2, 3, 4, 5];
const oddNumbers = numbers.filter(num => num % 2 !== 0);
console.log(oddNumbers); // Output: [1, 3, 5]

분류:

• 누산기: 진행 중인 합계를 추적합니다(0에서 시작).
• currentValue: 처리 중인 배열의 현재 항목을 나타냅니다.
• 결과: 모든 숫자를 하나의 합계로 결합합니다.

실제 사용 사례:
온라인 쇼핑 카트를 구축한다고 가정해 보겠습니다. 사용자가 선택한 모든 항목의 총 비용을 계산해야 합니다.

const products = [
  { name: 'Laptop', inStock: true },
  { name: 'Phone', inStock: false },
  { name: 'Tablet', inStock: true }
];

const availableProducts = products.filter(product => product.inStock);
console.log(availableProducts);
// Output: [{ name: 'Laptop', inStock: true }, { name: 'Tablet', inStock: true }]

특별한 이유:
Reduce()는 숫자에만 사용되는 것이 아닙니다. 다음 용도로 사용할 수 있습니다.

• 문자열을 결합합니다.
• 배열을 평면화합니다.
• 객체를 동적으로 구축하세요.

재미있는 반전:
창의력을 발휘해 보세요! Reduce()를 사용하면 각 문자가 단어에 나타나는 횟수를 계산할 수 있습니다.

const numbers = [5, 10, 15, 20];
const total = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(total); // Output: 50

초보자가 배워야 하는 이유:
비록 Reduce()가 처음에는 약간 진보된 것처럼 느껴질 수도 있지만, 이를 익히면 복잡한 작업을 단순화할 수 있는 무한한 가능성이 열립니다. 다재다능하고 강력한 배열 방법의 스위스 군용 칼과 같습니다.

“먼저 문제를 해결하세요. 그럼 코드를 작성해 보세요.” – 존 존슨.
Reduce()를 사용하면 우아하고 최소한의 코드로 문제를 효율적으로 해결할 수 있습니다.

4. forEach() – 배열을 위한 친숙한 일꾼

상황 설정:
자신이 주방에서 여러 가지 요리를 준비하는 요리사라고 생각해보세요. 목록에 있는 각 재료를 살펴보고 필요에 따라 잘게 썰거나 양념을 합니다. 성분 목록 자체를 변경하는 것이 아니라 각 항목에 대해 작업을 수행하는 것뿐입니다. 이것이 바로 forEach()가 하는 일입니다.

기능:
forEach()를 사용하면 배열을 반복하고 각 요소에 대해 함수를 실행할 수 있습니다. map() 또는 filter()와 달리 새 배열을 반환하지 않고 단순히 작업을 수행합니다.

예:
각 과일을 목록으로 인쇄해 보겠습니다.

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // Output: [2, 4, 6, 8]

여기서 무슨 일이 일어나는지:

• 입력: 과일 배열
• 동작: 이 기능은 각 과일에 대해 개인화된 메시지를 기록합니다.
• 결과: 새 어레이가 생성되지 않고 작업만 수행합니다.

실제 사용 사례:
작업 목록을 관리하고 있으며 "완료"로 기록하고 싶다고 가정해 보겠습니다.

const pricesInUSD = [10, 20, 30];
const pricesInEUR = pricesInUSD.map(price => price * 0.85);
console.log(pricesInEUR); // Output: [8.5, 17, 25.5]

다른 방법과 다른 이유:
새로운 배열을 생성하는 map()과 달리 forEach()는 부작용, 즉 직접적인 결과를 생성하지 않고 배열 외부의 항목을 수정하거나 상호 작용하는 작업에만 중점을 둡니다.

예:

• 목록의 각 항목에 대한 API 요청을 보냅니다.
• 요소 목록에 대한 DOM 업데이트
• 콘솔에 값을 로깅합니다.

사용 시기:

• 다음과 같은 경우에 forEach()를 사용하세요.
• 배열을 반복하고 싶을 뿐입니다.
• 새 어레이 없이 작업을 수행해야 합니다.

초보자가 주의해야 할 사항:
forEach()는 아무것도 반환하지 않으므로 연결 작업에는 적합하지 않습니다. 변환된 배열이 필요한 경우 map() 또는 filter()를 사용하세요.

창의적인 예:
목록에 있는 각 고객에게 감사 이메일을 보내보겠습니다(시뮬레이션):

const numbers = [1, 2, 3, 4, 5];
const oddNumbers = numbers.filter(num => num % 2 !== 0);
console.log(oddNumbers); // Output: [1, 3, 5]

초보자가 좋아하는 이유:
forEach()는 간단하고 직관적입니다. 이는 배열을 효과적으로 사용하는 방법을 배우는 첫 번째 단계입니다.

이 점을 기억하세요. "코드 단순성은 복잡성이 없는 것이 아니라 그것을 마스터하는 기술입니다."
forEach()는 간단한 방법으로 복잡성을 처리하기 위한 첫 번째 도구입니다.

5. find() – 첫 번째 일치 항목 검색

지도를 들고 보물찾기를 하고 있는데, 단서는 '숲에서 첫 번째 금화를 찾아라'라고 하더군요. 당신은 찾기 시작했지만, 나무 아래에서 빛나는 첫 번째 동전을 발견하자마자 멈추었습니다. 필요한 것을 찾았고 나머지 동전은 중요하지 않습니다. 이것이 바로 find()의 작동 방식입니다. 배열에서 조건과 일치하는 첫 번째 항목을 찾고 해당 항목에 대한 검색을 중단하는 데 도움이 됩니다.

기능:
find()는 배열을 검색하여 함수의 조건을 충족하는 첫 번째 요소를 반환합니다. 일치하는 항목이 없으면 정의되지 않은 값을 반환합니다.

코드 예:
20보다 큰 첫 번째 숫자를 찾아보겠습니다.

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // Output: [2, 4, 6, 8]

현재 상황:

• 조건 num > 각 요소별로 20이 확인됩니다.
• 25가 조건을 만족하면 검색을 중단하고 25가 반환됩니다.
• 첫 번째 일치 이후에는 더 이상 요소를 확인하지 않습니다.

find()를 "첫 번째 빨간 꽃을 찾으세요"라는 말을 듣는 보물찾기에 있다고 생각해보세요. 모든 빨간 꽃을 모으지는 않습니다(그것이 filter()가 하는 일입니다). 대신 보자마자 멈춰서 “알았어!”라고 외쳐보세요

실제 사용 사례:
연락처 목록을 관리하고 있으며 특정 이메일 주소를 가진 첫 번째 사람을 찾고 싶다고 가정해 보겠습니다.

const pricesInUSD = [10, 20, 30];
const pricesInEUR = pricesInUSD.map(price => price * 0.85);
console.log(pricesInEUR); // Output: [8.5, 17, 25.5]

초보자가 좋아하는 이유:
find()는 사용이 간편하고 결과가 하나만 필요할 때 시간을 절약해 줍니다. 마치 어두운 방에서 하나의 물체를 찾기 위해 손전등을 사용하는 것과 같습니다. 방 전체를 밝히려고 하는 것은 아닙니다.

창의적인 예:
이를 전자상거래의 세계로 가져가 보겠습니다. 제품 목록이 있는데 가장 먼저 세일하는 제품을 찾고 싶다고 가정해 보겠습니다.

const numbers = [1, 2, 3, 4, 5];
const oddNumbers = numbers.filter(num => num % 2 !== 0);
console.log(oddNumbers); // Output: [1, 3, 5]

가장자리 처리:
조건에 맞는 품목이 없으면 어떻게 되나요? 걱정하지 마세요. find()는 정의되지 않은 결과를 반환할 것입니다. 대체를 사용하여 이 문제를 우아하게 처리할 수 있습니다.

const products = [
  { name: 'Laptop', inStock: true },
  { name: 'Phone', inStock: false },
  { name: 'Tablet', inStock: true }
];

const availableProducts = products.filter(product => product.inStock);
console.log(availableProducts);
// Output: [{ name: 'Laptop', inStock: true }, { name: 'Tablet', inStock: true }]

find()가 강력한 이유:

• 효율성: 첫 번째 일치 항목을 찾는 즉시 중지됩니다.
• 명확성: 코드에서 단일 항목을 검색하려는 의도를 명확하게 합니다.
• 실제 사용: 대규모 데이터 세트에서 단일 사용자, 제품 또는 데이터 포인트를 찾는 데 적합합니다.

결론

JavaScript는 강력한 도구이며 map(), filter(), Reduce(), forEach() 및 find()의 5가지 메소드는 진정한 잠재력을 발휘하는 열쇠입니다. 끝없는 루프와 중복 작업을 방지하면서 더 깔끔하고 효율적인 코드를 작성하는 데 도움이 됩니다. 개발자 도구 상자에 들어 있는 스위스 군용 칼이라고 생각하세요. 다재다능하고 안정적이며 삶을 더 쉽게 만들어줍니다.

이러한 방법을 익히는 것은 단지 구문을 배우는 것이 아니라 프로그래머처럼 생각하는 것입니다. map()으로 데이터를 변환하거나, filter()로 노이즈를 필터링하거나, Reduce()로 모든 것을 요약하거나, forEach()로 원활하게 반복하거나, find()로 숨겨진 보석을 찾는 등 무엇이든 구축하고 있습니다. 코드를 더욱 전문적이고 영향력있게 만들어줄 기술입니다.

코딩의 마법은 길고 복잡한 프로그램을 작성하는 데 있는 것이 아니라 일상적인 문제에 대한 우아한 해결책을 찾는 데 있다는 것을 기억하세요. 작게 시작하세요. 한 가지 방법을 선택하고 실험하고 다음 프로젝트에서 시도해 보세요. 더 많이 연습할수록 이러한 방법이 제2의 천성처럼 느껴질 것입니다.

“가장 좋은 코드는 설명할 필요가 없는 코드입니다.” – 마틴 파울러
이러한 방법을 사용하여 자체적으로 말하는 코드를 작성하세요.

댓글로 여러분의 생각을 알려주세요! 프로젝트에서 이러한 방법을 사용해 보셨나요? 귀하의 경험을 듣고 싶습니다.

이 기사는 원래 Hashnode에 게시되었습니다

위 내용은 모든 초보자가 알아야 할 필수 JavaScript 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!