Logseq/pages/javascript_typescript.md

deck:: Logseq/coding tip

• ► 이차원 배열(n*m) 생성

  id:: 6909ee5d-6a76-4db6-9192-4c63f0f9d9fe
  • id:: 6909ee5c-3008-4d05-b2aa-98f80c7081b6
    1. Array.from() 사용법 #card

    • const arr = Array.from({length : n}, () => new Array(m).fill(0));
      

  • id:: 6909ee7c-8b96-4dda-a325-3bcccca6be17 2. Array().fill() 사용법 #card

    • 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

      • 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

      • Array.map(callback(element, index, array))
        // element(필수) : 순회하는 현재 요소
        // index(선택) : 현재 요소의 인덱스
        // array(선택) : 순회중인 원본 배열
        

      • 목적 : 배열의 모든 요소를 순회하며, 콜백 함수가 반환하는 결과로 새로운 배열을 생성한다.
      • 반환 값 : 새로운 배열
      • 원본 수정유무 : X
    • ◉ filter() #card id:: 690c7217-8d56-48c9-a4c6-d25b9b3919d9

      • Array.filter(callback(element, index, array))
        // element(필수) : 순회하는 현재 요소
        // index(선택) : 현재 요소의 인덱스
        // array(선택) : 순회중인 원본 배열
        

      • 콜백함수가 true를 반환하는 요소들만 모아서 새로운 배열을 생성한다.
      • 반환 값 : 새로운 배열
      • 원본 수정유무 : X
    • ◉ every() #card id:: 690c7258-f134-4b47-93d3-ef1ed0b1b0cf

      • Array.every(callback(element, index, array))
        // element(필수) : 순회하는 현재 요소
        // index(선택) : 현재 요소의 인덱스
        // array(선택) : 순회중인 원본 배열
        

      • 목적 : 모든 요소가 콜백함수의 조건을 통과하는지 확인
      • 반환 값 : true(모든 요소에 대해 콜백함수가 true를 반환) / false
      • 원본 수정유무 : X
    • ◉ forEach() #card id:: 690c72b7-52f6-44b7-a984-413803266251

      • Array.forEach(callback(element, index, array))
        // element(필수) : 순회하는 현재 요소
        // index(선택) : 현재 요소의 인덱스
        // array(선택) : 순회중인 원본 배열
        

      • 목적 : 각 요소에 대해 콜백 함수를 실행한다. (단순 반복문 대체)
      • 반환 값 : undefined(항상)
      • 원본 수정유무 : X
    • ◉ reduce() #card id:: 690c7caf-1e7a-47ae-a3a8-cadadce5d00d

      • 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

      • Array.find(callback(element, index, array))
        // element(필수) : 순회하는 현재 요소
        // index(선택) : 현재 요소의 인덱스
        // array(선택) : 순회중인 원본 배열
        

      • 목적 : 콜백함수로 주어진 판별 조건을 만족하는 첫 번째 요소의 값을 반환한다.
      • 반환 값 : 찾은 요소의 값(없을 경우 undefined)
      • 원본 수정유무 : X
      • findLast()도 사용법은 동일함
        • find() 는 앞에서부터, findLast()는 뒤에서 부터 찾는다는 차이가 있음.
    • ◉ findIndex() #card id:: 690c84c0-95ba-4784-a2b4-5d532d7301e5

      • Array.find(callback(element, index, array))
        // element(필수) : 순회하는 현재 요소
        // index(선택) : 현재 요소의 인덱스
        // array(선택) : 순회중인 원본 배열
        

      • 목적 : 콜백함수로 주어진 판별 조건을 만족하는 첫 번째 요소의 인덱스를 반환한다.
      • 반환 값 : 찾은 요소의 인덱스(number)(없을 경우 -1)
      • 원본 수정유무 : X
      • findLastIndex()도 사용법은 동일함
        • findIndex() 는 앞에서부터, findLastIndex()는 뒤에서 부터 찾는다는 차이가 있음.
    • ◉ sort() #card id:: 690c8559-e964-4d45-8def-eb1e9ec8bf8f

      • Array.sort(compareFunction(a,b));
        // comapreFunction(선택) : 정렬기준을 지정해줄 콜백함수
        // a, b(선택) : 비교함수로 비교할 두 요소
        

      • 목적 : 배열의 요소를 정렬한다. 정렬 순서는 콜백 함수(비교 함수)를 통해 지정할 수 있다.
      • 반환 값 : 정렬된 배열의 참조를 반환. 복사본이 만들어지는 것이 아닌 원본 배열 자체가 정렬되어 참조된 반환을 함.
      • 원본 수정유무 : O
      • 핵심 특징 :
        • 비교함수가 없을 경우, 모든 요소를 문자열로 변환하여서 그것을 기준으로 오름차순으로 정렬한다.
          • 이때문에 숫자의 정렬의 경우 예기치 않은 결과가 나올 수도 있다.
        • 비교함수 예시 :

          • 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;
            }) // 객체의 이름순 내림차순으로 정렬하고 이름이 같을 경우 값 기준으로 오름차순으로 정렬