javascript의 데이터를 멋있게 다루는 방법에 대한 총 정리. (filter / find / reduce / map / forEach /new Map / new Set / lodash / regex)

filter()

: 콜백 함수 내의 결과가 true인 요소를 모아 새로운 배열로 반환하는 함수

: 콜백 함수 내에서 true / false를 반환하거나 요소를 반환하는 코드를 작성하여

  조건에 맞는 데이터만 골라낼 수 있음

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
//  ['exuberant', 'destruction']

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter((w) => {
	return w.includes(s);
})

 

 

 

 

find()

: 콜백 함수 내의 결과가 true인 단 하나의 요소만 반환하는 함수

: 조건에 맞는 첫 번째 요소를 반환하고 종료된다

: 콜백 함수 내에서 true / false를 반환하거나 요소를 반환하는 코드를 작성하여

  조건에 맞는 데이터를 골라낼 수 있음

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.find(word => word.length > 6);

console.log(result);
// 'exuberant'

 

 

 

 

reduce()

: 배열의 각 요소에 대해 주어진 reducer 함수를 실행하고 하나의 결과 값을 반환

: map()이나 filter() 등의 함수의 기능을 reduce() 하나로 가능

: 별도의 변수를 선언하지 않고도 결과가 출력됨

const numbers = [2, -5, -123, 59, -5480, 24, 0, -69, 349, 3];
const result = numbers.reduce((acc, cur, idx) => { 
  if(cur < 0){
    // 처리할 현재 요소가 음수일 경우
    acc[0]++;
  }
  else if(cur > 0){
    // 처리할 현재 요소가 양수일 경우
    acc[1]++;
  }
  return acc;
 }, [0,0]);
console.log(result);  // [4, 5]

 

 

 

 

 

map()

: 배열 내 모든 요소 각각에 대해 콜백함수를 실행한 결과를 모아 새로운 배열로 반환하는 함수

: 데이터를 골라내는 데에는 filter가 좋지만, 모든 데이터에 대해 연산이 필요한 경우에는 map이 좋음

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

var kvArray = [{key:1, value:10},
               {key:2, value:20},
               {key:3, value: 30}];

var reformattedArray = kvArray.map(function(obj){
   var rObj = {};
   rObj[obj.key] = obj.value;
   return rObj;
});
// reformattedArray는 [{1:10}, {2:20}, {3:30}]

// kvArray는 그대로
// [{key:1, value:10},
//  {key:2, value:20},
//  {key:3, value: 30}]

 

 

 

 

forEach()

: 배열 내 모든 요소 각각에 대해 콜백함수를 실행하는 함수

: map()과 비슷하지만 반환 값이 없음

: for of, for in 반복문 보다 빠르게 반복문을 사용할 때 활용

: 단, for문들과 달리 순서가 보장되지 않으며 동기방식에는 사용할 수  없음

const array1 = ['a', 'b', 'c'];

array1.forEach(element => console.log(element));

// expected output: "a"
// expected output: "b"
// expected output: "c"

const items = ['item1', 'item2', 'item3'];
const copy = [];

// 이전
for (let i=0; i<items.length; i++) {
  copy.push(items[i]);
}

// 이후
items.forEach(function(item){
  copy.push(item);
});

 

 

 

 

 

new Map()

: key와 value로 이루어진 일반 객체와 비슷하나, key에 여러 자료형을 허용하는 객체

let map = new Map();

map.set('1', 'str1');   // 문자형 키
map.set(1, 'num1');     // 숫자형 키
map.set(true, 'bool1'); // 불린형 키

// 객체는 키를 문자형으로 변환한다는 걸 기억하고 계신가요?
// 맵은 키의 타입을 변환시키지 않고 그대로 유지합니다. 따라서 아래의 코드는 출력되는 값이 다릅니다.
alert( map.get(1)   ); // 'num1'
alert( map.get('1') ); // 'str1'

alert( map.size ); // 3

let recipeMap = new Map([
  ['cucumber', 500],
  ['tomatoes', 350],
  ['onion',    50]
]);

// 키(vegetable)를 대상으로 순회합니다.
for (let vegetable of recipeMap.keys()) {
  alert(vegetable); // cucumber, tomatoes, onion
}

// 값(amount)을 대상으로 순회합니다.
for (let amount of recipeMap.values()) {
  alert(amount); // 500, 350, 50
}

// [키, 값] 쌍을 대상으로 순회합니다.
for (let entry of recipeMap) { // recipeMap.entries()와 동일합니다.
  alert(entry); // cucumber,500 ...
}

 

 

 

 

 

객체관련 함수

- Object.keys(obj)

: obj라는 객체의 key 값만 배열로 반환

 

- Object.values(obj)

: obj라는 객체의 value 값만 배열로 반환

 

- Object.entries(obj)

: obj라는 객체의 key와 Value 쌍을 배열로 반환

let obj = {
  name: "John",
  age: 30
};

let map = new Map(Object.entries(obj));

alert( map.get('name') ); // John

 

- Obejct.fromEntries(arr)

: key, value 쌍인 배열을 객체로 반환

let map = new Map();
map.set('banana', 1);
map.set('orange', 2);
map.set('meat', 4);

let obj = Object.fromEntries(map.entries()); // 맵을 일반 객체로 변환 (*)

// 맵이 객체가 되었습니다!
// obj = { banana: 1, orange: 2, meat: 4 }

alert(obj.orange); // 2

 

 

 

 

 

new Set()

: 중복을 허용하지 않는 값을 모아놓은 특별한 컬렉션

: key가 없는 값이 저장됨

let set = new Set();

let john = { name: "John" };
let pete = { name: "Pete" };
let mary = { name: "Mary" };

// 어떤 고객(john, mary)은 여러 번 방문할 수 있습니다.
set.add(john);
set.add(pete);
set.add(mary);
set.add(john);
set.add(mary);

// 셋에는 유일무이한 값만 저장됩니다.
alert( set.size ); // 3

for (let user of set) {
  alert(user.name); // // John, Pete, Mary 순으로 출력됩니다.
}

let names3 = ['Mike', 'John', 'Bob', 'Jane', 'Bob', 'John', 'Lee', 'Mason'] ;
let single3 = [...new Set(names3)];

console.log( single3 ) ;
// [ 'Mike', 'John', 'Bob', 'Jane', 'Lee', 'Mason' ]

 

 

 

 

 

lodash

: array, collcetion, date 등 데이터 구조를 쉽게 다룰 수 있도록 도구를 제공하는 라이브러리

: _.변수 형식으로 사용하여 lodash 라는 이름을 가짐

: javascript의 코드를 줄여주고 성능을 보장함 (퍼포먼스 측면에서 native 보다 더 나은 성능)

 

- lodash의 다양한 메서드

: https://lodash.com/docs/4.17.15

Lodash Documentation

 

 

 

 

regex (Regular Expression)

: 정규 표현식이라고 하며, 특정 패턴의 문자열을 찾기 위한 표현 방식

const regex = /\d{3}-\d{4}-\d{4}/; 
// (\d는 숫자를 의미하고, {} 안의 숫자는 갯수를 의미한다.) 

regex.test('010-1111-2222') // true; 
regex.test('01-11-22') // false;

 

 

 

 

 

정규표현식의 형식

: /패턴/플래그

: / 사이에는 매칭시킬 패턴을 작성

: / 다음에는 옵션을 설정하는 플래그를 작성

 

 

 

 

 

정규표현식 매칭 패턴

a-z A-Z : 영어 알파벳 (-으로 범위 지정)

ㄱ-ㅎ 가-힣 : 한글 문자 (-으로 범위 지정)

0-9 : 숫자 (-으로 범위 지정)

. : 모든 문자 (숫자, 영어, 한글, 특수기호, 공백 등 모두. 줄바꿈 제외)

\d : 숫자

\D : 숫자가 아닌 것

\w : 영어 알파벳, 숫자, 언더스코어 _

\W : 영어 알파벳, 숫자, 언더스코어 _가 아닌 것

\s : space 공백

\S : space 공백이 아닌 것

\특수기호: 해당 특수기호 인 것

 

 

 

 

정규표현식 검색 패턴

| : OR

[] : 괄호안의 문자들 중 하나

[^문자] : 괄호안의 문자를 제외한 것

^문자열 : 특정 문자열로 시작

문자열$ : 특정 문자열로 끝남

() : 그룹 검색 및 분류 (match 메서드에서 그룹별로 묶어줌)

(?:패턴) : 그룹 검색 (분류X)

\b : 단어의 처음/끝

\B : 단어의 처음/끝을 제외한 것

 

 

 

 

정규표현식 갯수(수량) 패턴

? : 최대 한 번

* : 있거나 없음 (여러 개)

+ : 최소 한 개

{n} : n개

{Min,} : 최소 Min개 이상

{Min, MAx} : 최소 Min개 이상, 최대 Max개 이하

 

 

 

 

정규표현식 플래그

: 동시에 여러개 사용 가능

g : Global, 모든 문자 검색 (안쓰면 매칭되는 첫 문자만 검색)

i : Ignore Case: 대소문자 구별 안함

m : Multi line: 여러 행의 문자열에 대해 검색

 

 

 

 

 

정규표현식 주요 메서드

("문자열").match(/정규표현식/플래그)

: 문자열에서 정규표현식에 매칭 되는 항목들을 배열로 반환

 

("문자열").replace(/정규표현식/, "대체문자열")

: 정규표현식에 매칭되는 항목을 대체문자열로 변환

 

("문자열").split(정규표현식)

: 문자열을 정규표현식에 매칭되는 항목으로 쪼개어 배열로 반환

 

(정규표현식).test("문자열")

: 문자열이 정규표현식과 매칭되면 true, 아니면 false 반환

 

(정규표현식).exec("문자열")

: 문자열이 정규표현식에 매칭 되는 항목 중 첫 번째 결과만 반환

 

 

 

 

웹사이트 주소 정규표현식

const text = `대나무 빨대 구입 문의 : http://dogumaster.com http://google.com 010-1111-2222 02-333-7777 curryyou@aaa.com`; 

text.match(/https?:\/\/[\w\-\.]+/g); 
// ["http://dogumaster.com", "http://google.com"]


// /http → http로 시작하고
// s? → 다음에 s는 있거나 없고
// : → 다음에 :가 오고
// \/\/ → 다음에 특수기호 //가 오고
// [\w\-\]+ → \w (영문자, 언더스코어), 하이픈 -, 점 . 으로 이루어진 문자열이 한개 이상(+) 있다
// /g → 매칭 되는 모든 것을 다 찾는다 (플래그)

 

 

 

 

 

전화번호 정규표현식

const text = `대나무 빨대 구입 문의 : http://dogumaster.com http://google.com 010-1111-2222 02-333-7777 curryyou@aaa.com`; 

text.match(/\d{2,3}-\d{3,4}-\d{4}/g); 
// [ '010-1111-2222', '02-333-7777' ]


// \d{2,3} → 숫자 2~3개로 시작하고
// \- → 다음에 하이픈- 이 오고
// \d{3,4} → 다음에 하이픈- 이 오고
// \- → 다음에 하이픈- 이 오고
// \d{4} → 다음에 숫자 4개가 온다
// /g → 매칭되는 모든 것을 다 찾는다 (플래그)

 

 

 

 

 

이메일 정규표현식

const text = `대나무 빨대 구입 문의 : http://dogumaster.com http://google.com 010-1111-2222 02-333-7777 curryyou@aaa.com`; 

text.match(/[\w\-\.]+\@[\w\-\.]+/g); 
// [ 'curryyou@aaa.com' ]


// \[\w] → 영어 알파벳, 숫자, 언더스코어로 시작하고
// \- → 다음에 하이픈이 오고
// \. → 다음에 점 .이 오는 
// [\w\-\.]+ → 위 조건 중에 하나라도 만족하는 문자열

// \@ → 골뱅이 @로 시작하고
// [\w\-\.]+ → 영어, 알파벳, 숫자, 언더스코어, 하이픈, . 중에 하나 라도 가진 문자열
// /g → 매칭되는 모든 요소를 찾는다 (플래그)

 

 

 

 

정규표현식 활용 예시

주어진 문장
"대나무 빨대 a급 제품은 10개 남아있습니다. 010-1111-2222 로 Call Me~!"

 

/대/ :  '대'를 '하나'만 찾는다.
=> 대나무 빨대 a급 제품은 10개 남아있습니다. 010-1111-2222 로 Call Me~!

 

/대/g: '대'를 '모두' 찾는다
=> 대나무 빨대 a급 제품은 10개 남아있습니다. 010-1111-2222 로 Call Me~!



/대나무 빨대/: '대나무 빨대'를 찾는다.
=> 대나무 빨대 a급 제품은 10개 남아있습니다. 010-1111-2222 로 Call Me~!

 

/[대a0]/g: "대", "a", 0 중에 하나를 모두 찾는다. 
=> 대나무 빨대 a급 제품은 10개 남아있습니다. 010-1111-2222 로 Call Me~!
* 대괄호[]는 OR의 기능을 합니다.

 

/[0-9]/g : '숫자0~9'를 모두 찾는다.
=> 대나무 빨대 a급 제품은 10개 남아있습니다. 010-1111-2222 로 Call Me~!

 

/[a-zA-Z]/g : '영어알파벳 대문자/소문자'를 모두 찾는다.
=> 대나무 빨대 a급 제품은 10개 남아있습니다. 010-1111-2222 로 Call Me~!

 

/[^0-9]/g : '숫자0~9'가 아닌 것을 모두 찾는다.
=> 대나무 빨대 a급 제품은 10개 남아있습니다. 010-1111-2222 로 Call Me~!
* 대괄호[] 안에서 앞에 ^를 쓰면, 부정(Not)의 기능을 합니다.

 

 

 

 

출처

[자바스크립트] 정규표현식(Regular Expression) 기초/기본 쉽고 상세한 사용 방법 정리(샘플 예제 코

 

 

 

Refference

정규 표현식 - JavaScript | MDN