JavaScript를 배우는 동안 실제로 이러한 주제를 놓치고 React JS로 전환하려고 했습니다. 다행히 저는 이 주제들을 건너뛰지 않고 이러한 기능과 방법도 배웠습니다. 따라서 JavaScript를 배우는 사람은 React를 배우기 전에 이 블로그를 읽어야 합니다.🙌

1. forEach()

forEach() 메서드는 배열을 변경하지 않고 배열의 각 요소에 대해 한 번씩 함수를 호출합니다. 배열의 항목을 반복하는 동안 유용한 방법 중 하나입니다.forEach()는 두 개의 인수를 사용합니다. 첫 번째는 배열의 각 항목에 대해 호출되는 콜백 함수이고 두 번째 인수는 콜백에 설정된 this의 값을 참조하는 선택 사항입니다.

Syntax:

array.forEach(callback [ , thisArgument])

다음은 예입니다.

const companies = [
  { name: "amazon" , start: 1971, end: 2001},
  { name: "netflix" , start: 1972, end: 2004},
  { name: "flipkart" , start: 1971, end: 2009}
  ];

companies.forEach(company => { 
    console.log(company);
});
//Object { name: "amazon", start: 1971, end: 2001 }
//Object { name: "netflix", start: 1972, end: 2004 }
//Object { name: "flipkart", start: 1971, end: 2009 }

company는 여기서 콜백 함수입니다. companies.forEach(company) 는 company 의 모든 항목에 대해 companies 함수를 실행하고 반복되는 항목을 첫 번째 인수로 설정합니다. 이것이 forEach() 방법이 작동하는 방식입니다.

이제 배열companies에 이름 속성만 있는 항목을 반복하려는 경우 방법은 다음과 같습니다.

const companies = [
  { name: "amazon" , start: 1971, end: 2001},
  { name: "netflix" , start: 1972, end: 2004},
  { name: "flipkart" , start: 1971, end: 2009}
  ];

companies.forEach( company => { 
    console.log(company.name);
});
// "amazon"
// "netflix"
// "flipkart"

forEach()는 어디에 사용하나요?

forEach()는 깨지지 않고 동시에 일부 부작용 없이 배열 항목을 반복하는 데 널리 사용됩니다. 또는 대안으로 array methods을 사용할 수 있습니다.

2. 필터()

filter() 메서드는 제공된 함수에 의해 구현된 테스트를 통과하는 모든 요소로 새 배열을 만듭니다. 테스트를 통과한 요소가 없으면 빈 배열이 반환됩니다.

Syntax:

array.filter(function(currentValue, index, arr), thisValue)
thisValue is an optional parameter.

21세 미만의 성인을 필터링하고 싶다고 가정해 보겠습니다. 예를 들면 다음과 같습니다.

const ages = [45,67,7,21,4,19,11];

const adultPersons = ages.filter( age => {
    if(age>=21) {
        return true;
    } 
});
console.log(adultPersons);
// Array [45, 67, 21]

함수에서 제공한 테스트를 통과한 adultPersons의 모든 배열 항목을 저장할 수 있는 새 변수ages를 만들었습니다.

1971년에 시작된 회사를 가져오려는 filter() 메서드의 또 다른 예-

const companies = [
  { name: "amazon" , start: 1971, end: 2001},
  { name: "netflix" , start: 1972, end: 2004},
  { name: "flipkart" , start: 1971, end: 2009}
  ];

const year = companies.filter(company => { 
    if( company.start == "1971") {
    return true;
    }
});
console.log(year);
//output-->  Array [Object { name: "amazon", start: 1971, end: 2001 }, Object { name: "flipkart", start: 1971, end: 2009 }]

companies 범주에 1971를 포함하는 배열start에서 두 개의 객체를 얻었습니다.

3. 지도()

map() 메서드는 모든 배열 요소에 대해 제공된 함수를 호출한 결과로 새 배열을 만듭니다. 이 메서드는 값이 없는 배열 요소에 대해 함수를 실행하지 않습니다.map() 메서드는 배열의 각 요소에 대해 제공된 함수를 순서대로 한 번씩 호출합니다.

Syntax:

array.map(function(currentValue, index, arr), thisValue)
thisValue is an optional parameter.

다음은 map()을 사용하여 모든 회사 이름을 가져오는 예입니다.

const companies = [
  { name: "amazon" , start: 1971, end: 2001},
  { name: "netflix" , start: 1972, end: 2004},
  { name: "flipkart" , start: 1971, end: 2009}
  ];

const compNames = companies.map(company => { 
        return company.name;
    });
console.log(compNames);
//Array ["amazon", "netflix", "flipkart"]

모든 회사 이름이 포함된 간단한 배열을 얻었습니다. 쉬운 완두콩!✌

이제 map() 방법을 사용하여 회사 이름과 연말을 얻으려면 template literals/strings도 사용할 수 있습니다.

다음은 예입니다.

const array = [
  { name: "amazon" , start: 1971, end: 2001, owner: "A"},
  { name: "netflix" , start: 1972, end: 2004, owner: "B"},
  { name: "flipkart" , start: 1971, end: 2009, owner: "C"}
  ];

const compNames = array.map(company =>
   `${company.name} [${company.end} - ${company.owner}]` );

console.log(compNames);
// Array ["amazon [2001 - A]", "netflix [2004 - B]", "flipkart [2009 - C]"]

이제 각 값, 즉 회사 이름과 함께 최종 연도 및 소유자가 포함된 배열이 있습니다.

Math 객체를 사용할 수 있는 map()의 또 다른 예 -

const num =[ 4 , 16 , 36];

const numSquareRoot = num.map(number => Math.sqrt(number));
console.log(numSquareRoot);
//Array [2, 4, 6]

단순한! 그렇지? 이제 map() 방법을 사용하는 방법을 배웠기를 바랍니다. 연습하면 더 많이 배울 수 있습니다.🙌

4. 정렬()

sort() 메서드는 배열의 요소를 제자리에서 정렬하고 정렬된 배열을 반환합니다. 정렬 순서는 오름차순 또는 내림차순뿐만 아니라 영문자 또는 숫자일 수 있습니다.

Note --> the sort() method sorts the values as strings in alphabetical and ascending order.
This method works well for strings ("Ant" comes before "Bat"). However, if numbers are sorted as strings, "30" is bigger than "200", because "3" is bigger than "2".
Thus, the sort() method generates an incorrect result when sorting numbers.
A "compare function" comes useful for fixing this.

시작 연도를 기준으로 회사를 정렬한다고 가정해 보겠습니다. 다음은 예입니다.

const companies= [
  { name: "amazon" , start: 1971, end: 2001, owner: "A"},
  { name: "netflix" , start: 1962, end: 2004, owner: "B"},
  { name: "flipkart" , start: 1991, end: 2009, owner: "C"}
  ];

//using short method via ternary operators
const sortedCompanies = companies.sort((a,b) => (a.start > b.start ? 1 : -1));
console.log(sortedCompanies);
//Array [Object { name: "netflix", start: 1962, end: 2004, owner: "B" }, Object { name: "amazon", start: 1971, end: 2001, owner: "A" }, Object { name: "flipkart", start: 1991, end: 2009, owner: "C" }]

여기서 sort() 메서드는 a와 b의 두 값을 가져와서 start 날짜를 기준으로 비교하는 함수를 사용합니다.
참고 -> a는 회사 1을 나타내고 b는 회사 2를 나타냅니다.

sort()의 또 다른 예 -

const num = [34,4,67,12,1];
const sortNum = num.sort();
console.log(sortNum);
//output->  Array [1, 12, 34, 4, 67]

//for ascending order
const numAscend = num.sort((a,b) => a-b);
console.log(numAscend);
//output->  Array [1, 4, 12, 34, 67]

// for descending order
const numDescend = num.sort((a,b)=> b-a);
console.log(numDescend);
//output->  Array [67, 34, 12, 4, 1]

5. 감소()

reduce() 메서드는 배열을 단일 출력 값으로 줄입니다. 이 메서드는 배열의 각 값에 대해 제공된 함수를 실행합니다(왼쪽에서 오른쪽으로). 함수의 반환 값은 accumulator(total)에 저장됩니다.

Syntax:

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

Note: reduce() does not execute the function for array elements without values.

다음은 reduce 메서드를 사용하여 배열에서 숫자의 합을 찾는 예입니다.

const num = [45,5,2,10];

const sum = num.reduce(function(total, number){
        return total + number;
},0);

console.log(sum);
// 62

여기에서 함수의 인수로 두 개의 인수total 및 number를 전달합니다. total는 함수의 이전에 반환된 값을 나타내고 number는 현재 요소의 값을 나타냅니다. 또한 두 번째 매개변수0를 전달했는데 이는 0부터 시작한다는 의미입니다.
화살표 기능도 사용할 수 있습니다. 초보자가 기능에 무슨 일이 일어나고 있는지 이해할 수 있도록 화살표 기능을 사용하지 않았습니다.

모든 회사의 총 연수를 얻는 축소 방법의 또 다른 예-

const companies= [
  { name: "amazon" , start: 1970, end: 2000, owner: "A"},
  { name: "netflix" , start: 1960, end: 2000, owner: "B"},
  { name: "flipkart" , start: 1990, end: 2010, owner: "C"}
  ];

const totalYears = companies.reduce((total, company) => 
    total + (company.end - company.start),0);

console.log(totalYears);
//90

이 게시물이 유용하고 유익하기를 바랍니다. 댓글 섹션에서 피드백을 공유하세요. 질문이 있으시면 , , github , 로 저에게 연락하십시오. 😀