JavaScript 목록 이해

Migel Hewage Nimesha 2024년2월15일
  1. JavaScript List Comprehension에 대한 구문 설명
  2. 지도를 사용한 JavaScript 목록 이해
  3. for..of 구문을 활용하여 목록 반복
  4. 결론
JavaScript 목록 이해

많은 프로그래밍 언어는 목록 내포라는 특정 언어 구문을 지원합니다. 이 목록 이해를 사용하여 기존 목록에서 새 목록을 파생시킬 수 있습니다.

JavaScript 표현식인 목록 이해 구문을 사용하면 기존 목록을 기반으로 새 목록을 쉽게 만들 수 있습니다. 그러나 표준 및 Firefox 구현에는 더 이상 포함되지 않습니다.

ECMAScript 2016의 목록 이해 표준화는 원래 기존 목록의 내용을 기반으로 새 목록을 작성하는 실용적인 지름길을 제공하기 때문에 제안되었습니다.

List Comprehension은 이전에 JavaScript Committee TC39에서 JavaScript에 추가할 것을 제안했지만 filter()map()과 같은 다른 JavaScript 목록 기술을 위해 포기되었습니다.

filter() 또는 map() 메서드는 목록 내포 구문에 대한 대안으로 목록과 함께 사용할 수 있습니다. JavaScript의 목록 이해 구문은 이것의 또 다른 이름입니다.

JavaScript List Comprehension에 대한 구문 설명

filter() 메서드를 사용하여 기존 목록에 특정 필터를 적용하면 원래 목록에서 새 목록을 생성할 수 있습니다.

필터는 함수 본문에 정의한 테스트 함수를 통과할 때 목록의 요소를 반환하는 JavaScript 표현식입니다.

예:

목록을 names = ["Rex", "Neon", "Jake", "Eid"]로 가져와 JavaScript에서 filter() 메서드를 시연하고 새 목록을 생성해 보겠습니다.

암호:

let names = ['Rex', 'Neon', 'Jake', 'Eid'];

let new_list = names.filter(function(name) {
  return name.includes('e');
});

console.log(new_list);

여기서 아래와 같이 출력을 얻을 수 있습니다.

필터 방식

필터는 원래 목록이 변경되지 않도록 새 목록을 작성합니다.

보시다시피 목록 이해 필터의 좋은 대체품은 filter() 메서드입니다.

화살표 함수 구문을 사용하면 메서드 본문을 한 줄로 압축할 수도 있습니다.

암호:

let names = ['Rex', 'Neon', 'Jake', 'Eid'];

let new_list = names.filter(name => name.includes('e'));

console.log(new_list);

출력으로 이전 예제에서 [ 'Rex', 'Neon', 'Jake' ]와 같은 출력을 받을 수 있습니다.

참고: JavaScript ES6 버전의 새로운 기능 중 하나는 화살표 기능입니다. 기존 함수에 비해 보다 명확하게 함수를 생성할 수 있습니다.

예를 들어:

이것이 원래 기능인 경우:

let testFunction = function(m, n) {
  return m * n;
}

화살표 함수를 사용하여 다음을 이 함수의 더 간단한 버전으로 작성할 수 있습니다.

let testFunction = (m, n) => m * n;

다음으로 map() 메서드가 목록 전체를 반복하는 방법을 살펴보겠습니다.

지도를 사용한 JavaScript 목록 이해

목록 이해는 각 목록 요소를 살펴보면서 반복적으로 사용할 수도 있습니다.

map() 메소드를 사용하면 filter() 메소드처럼 기존 목록에서 새 목록을 작성할 수 있습니다.

그러나 map() 메서드는 필터링 없이 기존 목록을 반복하므로 콜백 함수 내에서 코드를 자유롭게 실행할 수 있습니다.

예:

목록을 names = ["Rex", "Neon", "Jake", "Eid"]로 간주하여 JavaScript에서 map() 메서드를 시연하고 문자 "o"를 추가하여 새 목록을 생성합니다. 목록의 각 요소에.

암호:

let names = ['Rex', 'Neon', 'Jake', 'Eid'];

let new_list = names.map(function(name) {
  return name + 'o';
});

console.log(new_list);

여기에서 아래와 같이 결과를 받게 됩니다.

화살표 함수

map() 함수는 화살표 함수를 사용하여 한 줄로 압축할 수 있습니다.

암호:

let names = ['Rex', 'Neon', 'Jake', 'Eid'];

let new_list = names.map(name => name + 'o');

console.log(new_list);

결과적으로 이전 예제에서 [ 'Rexo', 'Neono', 'Jakeo', 'Eido' ]와 같은 출력을 얻을 수 있습니다.

JavaScript 목록을 반복하고 map() 메서드를 사용하여 지정된 콜백 함수를 실행할 수 있습니다.

for..of 구문을 활용하여 목록 반복

또는 아래와 같이 for..of 연산자를 사용하여 목록을 반복할 수도 있습니다.

let names = ['Rex', 'Neon', 'Jake', 'Eid'];
let new_list = [];

for (const name of names) {
  new_list.push(name + 'o');
}

console.log(new_list);

여기서 우리는 다음과 같이 출력을 받을 수 있습니다.

for

위의 예를 염두에 두고 각 반복은 목록에 저장된 요소를 보유하는 새로운 이름 변수를 생성합니다.

for..of 메서드 내에서 각 name 요소를 new_list로 푸시합니다. 각 요소에 대해 원하는 연산자를 자유롭게 선택할 수 있습니다.

결론

이 기사에서는 filter 함수, map 함수 및 for..of 반복과 같은 함수를 검토하여 JavaScript에서 목록 이해에 사용되는 메서드를 표현합니다.

Migel Hewage Nimesha avatar Migel Hewage Nimesha avatar

Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.