이것저것아무거나공부한다

이것저것 공부한다:: JS 문법 중 모르는 것. 기본 문법.

map, filter, find, spread,

자바 스크립트의 문법 중 모르는 부분에 대하여 조금 더 알아보고자 한다. 내가 미처 알지 못한 기본 문법은 다음과 같다::

  1. map

  2. filter

  3. find

  4. spread

  5. Rest

1. Map

-ES6에서 나온 신 문법으로. 값들을 매핑하기 위해 나온 새로운 데이터 구조, 객체이다.

-키 값으로 모든 값을 가질 수 있다.

-Map은 삽입된 순서대로 반복되어 안전성을 보장한다.

-size 속성을 통해 쉽게 크기를 구할 수 있다.

JS의 모든 객체는 Object의 인스턴스이다. 일반적인 객체는 Object.prototype에서 속성을 상속받는다. Object 생성자는 주어진 값에 대한 객체 레퍼런스를 생성한다.

Map은 Object와 다른 형식의 객체이다. 키-값의 쌍을 이루는 집합이다. 한 Map에서의 키는 오직 단 하나만 존재한다. 이는 Map 집합의 유일성이다.

이 Map은 ‘key와 value가 각각 같은 타입일 경우’, ‘런타임까지 key가 정해지지 않은 경우’, ‘데이터의 크기가 클 경우’, ‘안전성을 유지해야 할 때(순서 보장)’ 사용한다. 데이터를 저장한다는 점에서 객체와 유사하지만, 맵은 키에 다양한 자료형을 허용한다는 점에서 차이가 있다.

Map에는 아래와 같은 메소드들이 포함되어 있다::

-new Map() //Map을 만드는 생성자

-map.set(key, value) //key를 이용해 value를 저장한다.

-map.get(key) //key에 해당하는 값을 반환한다. key가 존재하지 않으면 undefined를 반환한다.

-map.has(key) //key가 존재하면 true, 존재하지 않으면 false를 반환한다.

-map.delete(key) //key가 존재하면 해당하는 값을 삭제한다.

-map.clear() //맵 안의 모든 요소를 제거한다.

-map.size //요소의 개수를 반환한다.

/*Map 요소에 반복 작업하는 메소드들*/

-map.keys() //각 요소의 키를 모은, 반복 가능한 iterable 객체를 반환한다.

-map.values() //각 요소의 값을 모은 이터러블 객체를 반환한다.

-map.entries() //요소의 [키, 값]을 한 쌍으로 하는 이터러블 객체를 반환한다. 이 이터러블 객체는 for… …of 반복문의 기초로 쓰인다.

객체와 달리 Map은 키를 문자형으로 변환하지 않고, 자료형의 제약이 없다는 점이 특징이다. 이 Map을 사용할 때에는 set, get과 같은 전용 메소드를 사용한다. 다음은 Map 객체를 만드는 예시이다::

이 Map 객체와 관련된 메소드와 Map을 통해. 우리는 데이터를 효과적으로 관리할 수 있다.

2. Filter 함수

배열의 요소를 순회하며 콜백 함수를 사용하여, 콜백 함수를 사용하여 원하는 조건에 따라 필터링하는 함수. 필터링된 배열을 반환한다.

filter 함수는 위와 같이, callback함수를 사용하여 배열의 요소를 순회하며, 콜백함수의 조건에 맞는 요소를 필터링하는 함수이다. 위 예시의 경우 isEven(value) 함수가 callback 함수로 등록되었다. filter 함수는 배열의 요소를 순환하며 검사하고 isEven에 부합하는 요소를 필터링한다.

const /*필터링한 값을 넣을 배열명*/ = /*필터링할 배열*/.filter(/*콜백 함수*/)

…의 식으로 사용된다. 이를 통해 배열의 중복 요소를 제거하거나 다중 조건으로 필터링하는 등의 행동을 취할 수 있다.

3. Find 함수

배열에서 특정 조건을 만족하는 요소를 찾아 첫 번째 요소를 반환하는 함수.

배열의 각 요소에 대해 콜백 함수를 사용하여 원하는 조건의 요소를 찾는다. 이 함수는 배열에서 특정 요소를 찾는 데에 유용하다.

이 함수는 콜백 함수가 찾아낸 ‘첫 번째 조건을 만족하는 배열 요소’이며, 만약 조건을 만족하는 요소를 찾지 못했다면 undefined를 반환한다.

4. Spread 문법

ES6에서 추가된 문법으로, spread(펼치다. 퍼뜨리다)에서 유래된 이 문법을 사용하면 객체 또는 배열을 펼칠 수 있다.

이 문법의 핵심은 ‘기존의 것을 건들이지 않고 새로운 객체나 배열을 만들 수 있다’는 점이다.

5. Rest 문법

rest 문법은 '매개변수‘에 사용하며, 파라미터를 배열의 형태로 받아올 수 있다. 파라미터 개수가 가변적일 때 유용하다.

spread 문법과 같이 ‘...’ 을 사용하나, 이것은 파라미터에 주로 사용한다는 점이 Spread 문법과 다르다고 볼 수 있다.

함수를 호출하며 많은 전달 인자를 받아야 할 때, 그러나 변수의 갯수를 알 수 없을 때 사용하면 좋다.

[참고 자료]

-https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Map

-https://codingeverybody.kr/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-map-%ED%95%A8%EC%88%98/

-https://velog.io/@soshin_dev/Node.js-Map-%EC%82%AC%EC%9A%A9%EB%B2%95

-https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object //Object

-https://codingeverybody.kr/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-filter-%ED%95%A8%EC%88%98/ //filter 함수

-https://learnjs.vlpt.us/useful/07-spread-and-rest.html //spread 문법

-

카테고리
#기타

댓글 0



추천 포스트