deck:: Logseq/coding tip

- ## **► 이차원 배열(n*m) 생성**
  id:: 6909ee5d-6a76-4db6-9192-4c63f0f9d9fe
	- id:: 6909ee5c-3008-4d05-b2aa-98f80c7081b6
	  1. Array.from() 사용법 #card
		- ```javascript
		  const arr = Array.from({length : n}, () => new Array(m).fill(0));
		  ```
	- id:: 6909ee7c-8b96-4dda-a325-3bcccca6be17
	  2. Array().fill() 사용법 #card
		- ```javascript
		  const arr = new Array(n).fill().map(() => new Array(m).fill(0));
		  ```
- ## **► 고차함수 및 매서드 정리**
	- ### **◼︎ 고차함수 정의** #card
	  id:: 6909efa6-f92a-466d-89bb-30efd050c04a
		- 다른 함수를 인자로 받거나 함수를 결과로 반환하는 함수
		- 자바스크립트(타입스크립트)에서는 함수도 일급 객체로 취급하기에 가능한 결과
	- ### **◼︎ 콜백함수 정의** #card
	  id:: 690c632e-7008-4113-b8c7-a1dae66a5449
		- 고차 함수에 인자로 전달되는 함수.
		- 주로 고차함수의 구체적인 동작 방식이나 조건을 정의한다.
		- 고차함수의 매개변수 안에서 직접 정의되거나 혹은 화살표함수나 function키워드로 미리 선언한 뒤 함수명으로 전달되기도 한다.
	- ### **◼︎ 화살표 함수**
		- function 키워드 대신 => 키워드로 함수를 더 간결하게 표현하는 문법(ES6 부터 도입됨)
		- 구문 : #card
		  id:: 690c6418-ab35-4882-a474-0b3de7ef27e0
			- ```typescript
			  const 함수명 = (변수명1: type, 변수명2: type, ...): type => { 함수 정의 };
			  const 함수명 = 변수명 => { 정의 }; // 인자가 1개인 경우 소괄호 생략 가능
			  const 함수명 = 변수명 => 변수명 + 1 // 함수 본문이 1줄일 경우 중괄호와 return 생략 가능
			  ```
		- 특징 : #card
		  id:: 690c64ea-7a29-4043-854c-9b88f0da355d
			- 화살표 함수는 자기만의 this를 가지지 않는다.(랙시컬 this)
				- 함수의 선언 시점에서의 상위 스코프에서 this값을 물려받아서 사용한다
				- 즉 일반적인 코드 본문에서 사용할 경우 this는 전역변수 그 자체 영역이 되고, 클래스 내부에서 선언될 경우 그 선언된 클래스가 this가 된다.
			- 생성자로 사용할 수 없다(new 키워드 불가)
	- ### **◼︎ 고차함수 종류**
		- **◉ map()** #card
		  id:: 690c65e0-a93b-476f-b299-bdc5352e9a98
			- ```javascript
			  Array.map(callback(element, index, array))
			  // element(필수) : 순회하는 현재 요소
			  // index(선택) : 현재 요소의 인덱스
			  // array(선택) : 순회중인 원본 배열
			  ```
			- 목적 : 배열의 모든 요소를 순회하며, 콜백 함수가 반환하는 결과로 새로운 배열을 생성한다.
			- 반환 값 : 새로운 배열
			- 원본 수정유무 : X
		- **◉ filter()** #card
		  id:: 690c7217-8d56-48c9-a4c6-d25b9b3919d9
			- ```javascript
			  Array.filter(callback(element, index, array))
			  // element(필수) : 순회하는 현재 요소
			  // index(선택) : 현재 요소의 인덱스
			  // array(선택) : 순회중인 원본 배열
			  ```
			- 콜백함수가 true를 반환하는 요소들만 모아서 새로운 배열을 생성한다.
			- 반환 값 : 새로운 배열
			- 원본 수정유무 : X
		- **◉ every()** #card
		  id:: 690c7258-f134-4b47-93d3-ef1ed0b1b0cf
			- ```javascript
			  Array.every(callback(element, index, array))
			  // element(필수) : 순회하는 현재 요소
			  // index(선택) : 현재 요소의 인덱스
			  // array(선택) : 순회중인 원본 배열
			  ```
			- 목적 : 모든 요소가 콜백함수의 조건을 통과하는지 확인
			- 반환 값 : true(모든 요소에 대해 콜백함수가 true를 반환) / false
			- 원본 수정유무 : X
		- **◉ forEach()** #card
		  id:: 690c72b7-52f6-44b7-a984-413803266251
			- ```javascript
			  Array.forEach(callback(element, index, array))
			  // element(필수) : 순회하는 현재 요소
			  // index(선택) : 현재 요소의 인덱스
			  // array(선택) : 순회중인 원본 배열
			  ```
			- 목적 : 각 요소에 대해 콜백 함수를 실행한다. (단순 반복문 대체)
			- 반환 값 : undefined(항상)
			- 원본 수정유무 : X
		- **◉ reduce()** #card
		  id:: 690c7caf-1e7a-47ae-a3a8-cadadce5d00d
			- ```javascript
			  Array.reduce(callback(accumulator, currentValue, currentIndex, array), initial value)
			  // accumulator(필수) : 누적자 (이전까지 누적된 결과)
			  // currentValue(필수) : 현재 순회하는 값
			  // currentIndex(선택) : 현재 순회하는 인덱스
			  // array(선택) : 순회중인 원본 배열
			  // initialValue(선택) : 누적자의 초기 값(미 입력시 배열의 첫 요소로 초기화함)
			  // ㄴ 이 경우에는 두번째 요소부터 순회를 한다.
			  ```
			- 목적 : 배열의 모든 요소를 순회하며 하나의 결과값으로 축약한다
			- 반환 값 : 최종 누적 값(자료형 무관)
			- 원본 수정유무 : X
			- reduceRight()도 사용법은 동일함
				- reduce() 는 첫번재 인덱스부터, reduceRight()는 마지막 인덱스부터 순회한다는 차이만 있음
		- **◉ find()** #card
		  id:: 690c83f1-ff9a-47ed-821e-4a55c955a405
			- ```javascript
			  Array.find(callback(element, index, array))
			  // element(필수) : 순회하는 현재 요소
			  // index(선택) : 현재 요소의 인덱스
			  // array(선택) : 순회중인 원본 배열
			  ```
			- 목적 : 콜백함수로 주어진 판별 조건을 만족하는 첫 번째 요소의 값을 반환한다.
			- 반환 값 : 찾은 요소의 값(없을 경우 undefined)
			- 원본 수정유무 : X
			- findLast()도 사용법은 동일함
				- find() 는 앞에서부터, findLast()는 뒤에서 부터 찾는다는 차이가 있음.
		- **◉ findIndex()** #card
		  id:: 690c84c0-95ba-4784-a2b4-5d532d7301e5
			- ```javascript
			  Array.find(callback(element, index, array))
			  // element(필수) : 순회하는 현재 요소
			  // index(선택) : 현재 요소의 인덱스
			  // array(선택) : 순회중인 원본 배열
			  ```
			- 목적 : 콜백함수로 주어진 판별 조건을 만족하는 첫 번째 요소의 인덱스를 반환한다.
			- 반환 값 : 찾은 요소의 인덱스(number)(없을 경우 -1)
			- 원본 수정유무 : X
			- findLastIndex()도 사용법은 동일함
				- findIndex() 는 앞에서부터, findLastIndex()는 뒤에서 부터 찾는다는 차이가 있음.
		- **◉ sort()** #card
		  id:: 690c8559-e964-4d45-8def-eb1e9ec8bf8f
			- ```javascript
			  Array.sort(compareFunction(a,b));
			  // comapreFunction(선택) : 정렬기준을 지정해줄 콜백함수
			  // a, b(선택) : 비교함수로 비교할 두 요소
			  ```
			- 목적 : 배열의 요소를 정렬한다. 정렬 순서는 콜백 함수(비교 함수)를 통해 지정할 수 있다.
			- 반환 값 : 정렬된 배열의 참조를 반환. 복사본이 만들어지는 것이 아닌 원본 배열 자체가 정렬되어 참조된 반환을 함.
			- 원본 수정유무 : O
			- 핵심 특징 :
				- 비교함수가 없을 경우, 모든 요소를 문자열로 변환하여서 그것을 기준으로 오름차순으로 정렬한다.
					- 이때문에 숫자의 정렬의 경우 예기치 않은 결과가 나올 수도 있다.
				- 비교함수 예시 :
					- ```javascript
					  arr.sort((a,b) => a-b) // 오름차순
					  arr.sort((a,b) => b-a) // 내림차순
					  arr.sort((a,b) => {
					    if(a.name === b.name) return a.value - b.value;
					    return b.name - a.name;
					  }) // 객체의 이름순 내림차순으로 정렬하고 이름이 같을 경우 값 기준으로 오름차순으로 정렬
					  ```