[JavaScript] 자바스크립트 리스트 컴프리헨션 - map(), filter(), find(), from(), fill(), reduce()

728x90

리스트 컴프리헨션(List Comprehension)

배열이나 리스트를 간결하게 생성하는 문법을 의미합니다.

리스트 컴프리헨션은 리스트를 짧고 직관적인 방식으로 생성하거나 변형할 수 있는 문법입니다.

메서드	설명
map()	배열의 각 요소를 변형하여 새로운 배열 생성 (원본배열 유지)
filter()	조건에 맞는 요소만을 포함하는 새로운 배열 생성 (원본배열 유지)
find()	배열에서 조건을 만족하는 첫 번째 요소의 값을 반환 조건에 맞는 요소가 없다면 undefined를 반환 (원본배열 유지)
from()	유사 배열 객체나 반복 가능한 객체를 배열로 변환 (원본배열 유지)
fill()	배열의 모든 요소를 특정 값으로 채우기 시작과 끝 인덱스를 지정하여 배열의 일부만 채운다. (원본배열 변경)
reduce()	배열의 요소를 누적하여 단일 값을 생성 (원본배열 유지)

_ 언더스코어(Underscore)

무시되는 변수 : 배열 메서드 map(), filter(), reduce() - 콜백 함수의 인자로 사용
무시하는 인자 표기 : 함수 여러 인자를 받을 때 일부만 사용하고 나머지는 무시
라이브러리 : Lodash와 같은 유틸리티 라이브러리에서 해당 네임스페이스로 사용

📝 필요 없는 매개변수를 의미

코드에서 _는 사용되지 않는 변수, 즉 "무시해도 되는" 변수로 사용됩니다.

예를 들어, 배열의 메서드인 map(), filter(), reduce() 등에서 콜백 함수의 인자로 사용됩니다.

특히 함수에서 여러 인자를 받을 때 일부만 사용하고 나머지는 무시할 때 유용합니다.

// ▶ map의 첫번째 매개변수는 사용하지 않는다는 의미
let arr=new Array(5).fill().map((_,index)=>(index+1))
 // [ 1, 2, 3, 4, 5 ]
 
function exampleFunction(a, _, c) {
    console.log(a, c);
}
exampleFunction(1, 2, 3); // 출력: 1 3

// Array 생성자 함수
const a = [...new Array(10)].map((_, i) => i + 1); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

// Array.from 메서드
const b= Array.from({length: 10}, (_, i) => i + 1); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

📝 라이브러리 및 프레임워크에서의 사용

일부 라이브러리나 프레임워크에서는 _를 특별한 용도로 사용하기도 합니다.

예를 들어, Lodash와 같은 유틸리티 라이브러리에서는 _를 해당 라이브러리의 네임스페이스로 사용합니다.

const _ = require('lodash');
const result = _.map([1, 2, 3], x => x * 2);
console.log(result); // [2, 4, 6]

📌 map()

배열의 각 요소를 변환하여 새로운 배열을 반환합니다.

원본 배열은 그대로 유지됩니다.

📝 map() 형식

arr : 원본 배열
callback : 새로운 배열 요소를 생성하는 함수
- currentValue : 호출된 배열의 현재 요소
- index : 호출된 현재 요소의 인덱스 (생략 가능)
- array : 호출한 원본 배열을 참조, 원본 배열이 필요할 때 사용 (생략 가능)
thisArg
- callback을 실행할 때 this로 사용되는 값
- 생략하는 경우 undefined값이 this 값으로 사용됨

원본배열.map((요소, 인덱스, 배열) => { return 요소 });
arr.map(callbackFunction(currenValue, index, array), thisArg)

사용예시

let numbers = [1, 2, 3, 4, 5];
let doubled = numbers.map(number => number * 2);

document.writeln(doubled);  // [2, 4, 6, 8, 10]

let numbers = [1, 2, 3, 4, 5];

let doubled = numbers.map(function(number) {
  return number * 2;
});

document.writeln(doubled);  // [2, 4, 6, 8, 10]

📌 filter()

배열의 요소를 조건에 따라 필터링하여 새로운 배열을 생성합니다.

array.filter() 는 배열을 순환하면서
콜백함수의 조건 "true" 인 모든 요소를 새로운 배열로 반환한다.
만약 조건에 맞는 요소가 없다면, 비어있는 배열을 리턴

원본 배열은 그대로 유지됩니다.

📝 filter() 형식

arr : 원본 배열
callback : 배열의 모든 요소를 test 할 함수. 조건에 "true" 인 요소는 새로운 배열로 리턴
- element : 현재 처리중인 요소
- index : 현재 처리중인 요소의 index (생략 가능)
- array : filter() 가 실행되고 있는 원본배열 (생략 가능)
thisArg
- callback 함수가 실행중일 때 this로 사용될 값

// ▶ 화살표함수 표기법
원본배열.filter((요소, 인덱스, 배열) => {
  return 조건;
});

// ▶ 콜백함수 호출법
원본배열.filter(콜백함수, thisArg);

// ▶ 익명함수 표기법
원본배열.filter(function(요소, 인덱스, 배열) {
  return 조건;
}, thisArg);

사용예시

const sample = [
  { name: "a", age: 22, role: "member", pay: 100 },
  { name: "b", age: 25, role: "member", pay: 120 },
  { name: "c", age: 30, role: "leader", pay: 130 }
];

const result = sample
  .filter(data => data.role !== "leader") // 필터링된 배열 생성
  .map(data => <div key={data.name}>{data.name}</div>); // filter() 메서드로부터 반환된 배열의 각 요소를 React JSX 요소인 <div>로 변환

● filter() 메서드 풀어서 작성

const filteredData = sample.filter(function(data) {
  return data.role !== "leader";
});
// [{ name: "a", age: 22, role: "member", pay: 100 }, { name: "b", age: 25, role: "member", pay: 120 }]

● map() 메서드 풀어서 작성

const result = filteredData.map(function(data) {
  return <div key={data.name}>{data.name}</div>;
});
// [<div key="a">a</div>, <div key="b">b</div>]

📌 find()

배열에서 조건을 만족하는 첫 번째 요소의 값을 반환합니다.

조건에 맞는 요소가 없다면 undefined를 반환합니다.

원본 배열은 그대로 유지됩니다.

📝 find() 형식

arr : 원본 배열
callback : 배열의 모든 요소를 test 할 함수. 조건에 "true" 인 요소는 새로운 배열로 리턴
- element : 현재 처리중인 요소
- index : 현재 처리중인 요소의 index (생략 가능)
- array : find() 가 실행되고 있는 원본배열 (생략 가능)
thisArg
- callback 함수가 실행중일 때 this로 사용될 값

원본배열.find((요소, 인덱스, 배열) => { return 조건식 }, this값);

사용예시

● 조건에 맞는 요소가 있을 때

let arr = [1, 5, 6, 3, 2];
let even = arr.find((item)=> item % 2 === 0 );
console.log(even);	// 6

● 조건에 맞는 요소가 없을 때

let arr = [1, 5, 6, 3, 2];
let over = arr.find((item)=> item > 10 );
console.log(over);	// undefined

● 배열이 아닌 객체도 가능

let obj = [
    {name : 'Jennie', age : 23},
    {name : 'Rose', age : 21},
    {name : 'Jisu', age : 24},
    {name : 'Lisa', age : 22},
];
let under = obj.find((item) => item.age < 22);
console.log(under);	// {name : 'Rose', age : 21}

📌 from()

유사 배열 객체나 반복 가능한 객체를 배열로 변환하거나,

배열을 생성하고 초기화합니다.

원본 배열은 그대로 유지됩니다.

📝 from() 형식

// ▶ 기본 사용법
Array.from(유사 배열 또는 반복 가능한 객체);

// ▶ 화살표함수 사용법
Array.from(유사 배열 또는 반복 가능한 객체, (요소, 인덱스) => {
  return 요소;
});

// ▶ 콜백함수 사용법
Array.from(유사 배열 또는 반복 가능한 객체, 콜백함수, thisArg);

// ▶ 익명함수 사용법
Array.from(유사 배열 또는 반복 가능한 객체, function(요소, 인덱스) {
  return 요소;
}, thisArg);

🔎 유사 배열 객체 (Array-like Object)

유사 배열 객체는 배열처럼 동작하지만 실제 배열이 아닌 객체입니다.

주로 배열과 비슷하게 length 속성을 가지며, 인덱스 값을 통해 요소에 접근할 수 있습니다.

하지만 배열의 메서드(map, filter 등)는 사용할 수 없습니다. Array.from()으로 배열로 변환 가능

대표적인 유사 배열 객체의 예로는 함수의 arguments 객체나 DOM 메서드들이 반환하는 NodeList 등이 있습니다.

숫자형 인덱스 속성
객체는 숫자형 키를 사용하여 접근할 수 있는 속성들을 가져야 합니다.
예를 들어, 0, 1, 2 등의 인덱스 속성이 있어야 합니다.
length 속성
객체는 length 속성을 가져야 하며
이 속성은 객체의 요소 개수를 정확히 나타내야 합니다.
이 속성은 배열의 길이와 같은 역할을 합니다.

const arrayLike = {
  0: 'a',
  1: 'b',
  length: 2
};

// ▶ Array.from()으로 배열로 변환 가능
const arr = Array.from(arrayLike); // ['a', 'b']

🔎 반복 가능한 객체 (Iterable Object)

반복 가능한 객체는 for...of 문으로 반복할 수 있는 객체를 말합니다.

이 객체들은 기본적으로 [Symbol.iterator] 메서드를 구현하고 있습니다.

문자열, Set, Map, 배열 등이 대표적인 반복 가능한 객체입니다.

const str = 'hello';

// ▶ 문자열은 반복 가능한 객체이므로 Array.from()으로 배열로 변환 가능
const arr = Array.from(str); // ['h', 'e', 'l', 'l', 'o']

사용예시

// length 가 5 이고, v(value)는 예의상 놔두는 undefined 이고, 실제 i(index)로 배열을 만든다.
const result = Array.from({length: 5}, (_, i) => i); // [0, 1, 2, 3, 4]

// 배열[1,2,3]을 기반으로 원소를 하나씩 검사해 새 배열을 만든다.
Array.from([1, 2, 3], x => x + x); // [2, 4, 6]

📌 fill()

배열의 모든 요소를 특정 값으로 채웁니다.

시작과 끝 인덱스를 지정하여 배열의 일부만 채울 수도 있습니다.

원본 배열을 직접 수정합니다.

📝 fill() 형식

값 : 배열의 모든 요소를 이 값으로 채웁니다.
시작 인덱스 (선택 사항)
이 인덱스부터 채우기 시작합니다. (기본값 0)
끝 인덱스 (선택 사항)
이 인덱스 전까지 채웁니다. (기본값 배열끝)

// ▶ 기본 사용법
원본배열.fill(채울값, 시작인덱스, 끝인덱스);

사용예시

const arr = [1, 2, 3, 4, 5];

// ▶ 기본 사용법
arr.fill(0); // [0, 0, 0, 0, 0]

// ▶ 시작 인덱스와 끝 인덱스를 지정
arr.fill(9, 1, 4); // [0, 9, 9, 9, 0]

const result = Array(5).fill('white'); // ['white', 'white', 'white', 'white', 'white']

📌 reduce()

배열의 각 요소를 누적하여 단일 값을 반환합니다.

reduce()는 배열의 변형이 아니라 단일 값을 생성합니다.

원본 배열은 그대로 유지됩니다.

📝 reduce() 형식

arr : 원본 배열
callback : 배열의 각 요소에 대해 호출되는 함수로, 누적값과 현재 요소를 처리하여 새로운 누적값 반환
- 누적값 : 이전 호출에서 반환된 값 (또는 초기값)
- 현재요소 : 배열의 현재 요소
- 인덱스 : 배열의 현재 요소의 인덱스 (생략 가능)
- 원본배열 : reduce()를 호출한 배열 (생략 가능)
초기값 (생략 가능)
- 누적값의 초기값을 설정
- 제공되지 않으면 배열의 첫 번째 요소가 초기값으로 사용

// ▶ 기본 사용법
원본배열.reduce(콜백함수, 초기값);

// ▶ 화살표함수 표기법
원본배열.reduce((누적값, 현재요소, 인덱스, 배열) => {
  return 처리결과;
}, 초기값);

// ▶ 콜백함수 호출법
원본배열.reduce(콜백함수, 초기값);

// ▶ 익명함수 표기법
원본배열.reduce(function(누적값, 현재요소, 인덱스, 배열) {
  return 처리결과;
}, 초기값);

사용예시

● 배열 요소의 합계 구하기

const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce((acc, val) => {
  return acc + val;
}, 0);

console.log(sum); // 15

● 배열에서 최대값 찾기

const numbers = [1, 2, 3, 4, 5];

const max = numbers.reduce((max, val) => {
  return val > max ? val : max;
}, numbers[0]);

console.log(max); // 5

● 배열의 요소를 문자열로 결합

const words = ['Hello', 'world', 'from', 'reduce'];

const sentence = words.reduce((str, word) => {
  return str + ' ' + word;
}, '');

console.log(sentence); // "Hello world from reduce"

● 배열의 요소를 객체로 변환

const fruits = ['apple', 'banana', 'cherry'];

const fruitObject = fruits.reduce((obj, fruit) => {
      obj[fruit] = true;
      return obj;
}, {});

console.log(fruitObject); // { apple: true, banana: true, cherry: true }

728x90

저작자표시

'📌 Front End > └ JavaScript' 카테고리의 다른 글

[JavaScript] 프록시(Proxy) 객체, 핸들러 메서드 - 객체 보호, 함수 호출 제어, 생성자 제어, 값 제한, 읽기 전용 (0)	2024.11.13
[JavaScript] 자바스크립트 구조 분해 할당 (0)	2024.09.04
[JavaScript] 자바스크립트 ...Spread 연산자(Spread Operator) - 배열, 객체, 함수, rest 파라미터 (0)	2024.08.21
[JavaScript] 자바스크립트 세미콜론(;) (0)	2024.07.26
[JavaScript] Console API 종류 (다양한 콘솔 API 모음) (0)	2024.07.15

사용자 중심의 서비스를 만들 때까지 🐇

[JavaScript] 자바스크립트 리스트 컴프리헨션 - map(), filter(), find(), from(), fill(), reduce()

리스트 컴프리헨션(List Comprehension)

_ 언더스코어(Underscore)

📝 필요 없는 매개변수를 의미

📝 라이브러리 및 프레임워크에서의 사용

📌 map()

📝 map() 형식

📌 filter()

📝 filter() 형식

📌 find()

📝 find() 형식

📌 from()

📝 from() 형식

🔎 유사 배열 객체 (Array-like Object)

🔎 반복 가능한 객체 (Iterable Object)

📌 fill()

📝 fill() 형식

📌 reduce()

📝 reduce() 형식

'📌 Front End > └ JavaScript' 카테고리의 다른 글

티스토리툴바

[JavaScript] 자바스크립트 리스트 컴프리헨션 - map(), filter(), find(), from(), fill(), reduce()

리스트 컴프리헨션(List Comprehension)

_ 언더스코어(Underscore)

📝 필요 없는 매개변수를 의미

📝 라이브러리 및 프레임워크에서의 사용

📌 map()

📝 map() 형식

📌 filter()

📝 filter() 형식

📌 find()

📝 find() 형식

📌 from()

📝 from() 형식

🔎 유사 배열 객체 (Array-like Object)

🔎 반복 가능한 객체 (Iterable Object)

📌 fill()

📝 fill() 형식

📌 reduce()

📝 reduce() 형식

'📌 Front End > └ JavaScript' 카테고리의 다른 글

관련글

티스토리툴바