TIL. Day16-17(Underbar sprint, 비동기호출)

jeyoon·2021년 2월 19일

✔️ 배열 내장 함수

slice

arr.slice([begin[, end]])

어떤 배열의 begin부터 end까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다. 원본 배열은 바뀌지 않습니다.
begin: 추출 시작점의 인덱스를 의미합니다.
- begin이 undefined인 경우에는, 0번 인덱스부터 slice 합니다.
- begin이 배열의 길이보다 큰 경우에는, 빈 배열을 반환합니다.
end: 추출을 종료할 기준 인덱스입니다. end 인덱스를 제외하고 추출합니다.
- end가 생략되면 slice()는 배열의 끝까지(arr.length) 추출합니다.
- end 값이 배열의 길이보다 크다면, silce()는 배열의 끝까지(arr.length) 추출합니다.
음수 인덱스는 배열의 끝에서부터의 길이를 나타냅니다
반환 값: 추출한 요소를 포함한 새로운 배열.
slice()는 원본을 대체하지 않습니다. 원본 배열에서 요소의 얕은 복사본을 반환합니다.

let fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
let citrus = fruits.slice(1, 3)
// fruits contains ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
// citrus contains ['Orange','Lemon']

indexOf

배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고 존재하지 않으면 -1을 반환합니다.

const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];

console.log(beasts.indexOf('bison'));
// expected output: 1

// start from index 2
console.log(beasts.indexOf('bison', 2));
// expected output: 4

console.log(beasts.indexOf('giraffe'));
// expected output: -1

splice

배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다.
Array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
start: 배열의 변경을 시작할 인덱스입니다. 값의 절대값이 배열의 길이 보다 큰 경우 0으로 설정됩니다.
deleteCount(Optional): 배열에서 제거할 요소의 수입니다.
- 생략하거나 값이 array.length - start보다 크면 start부터의 모든 요소를 제거합니다.
- deleteCount가 0 이하라면 어떤 요소도 제거하지 않으며, 이 때는 최소한 하나의 새로운 요소를 지정해야 합니다.
item1, item2, ... Optional: 배열에 추가할 요소입니다. 아무 요소도 지정하지 않으면 splice()는 요소를 제거하기만 합니다.
반환 값: 제거한 요소를 담은 배열.

(하나도 제거하지 않고, 2번 인덱스에 "drum"과 "guitar" 추가)

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(2, 0, 'drum', 'guitar');

// myFish is ["angel", "clown", "drum", "guitar", "mandarin", "sturgeon"]
// removed is [], no elements removed

(2번 인덱스에서 한 개 요소 제거하고 "trumpet" 추가)

var myFish = ['angel', 'clown', 'drum', 'sturgeon'];
var removed = myFish.splice(2, 1, 'trumpet');

// myFish is ["angel", "clown", "trumpet", "sturgeon"]
// removed is ["drum"]

forEach

주어진 함수를 배열 요소 각각에 대해 실행합니다.

arr.forEach(callback(currentvalue[, index[, array]])[, thisArg])

callback: 각 요소에 대해 실행할 함수. 다음 세 가지 매개변수를 받습니다.
- currentValue: 처리할 현재 요소.
- index (Optional): 처리할 현재 요소의 인덱스.
- array (Optional): forEach()를 호출한 배열.
- thisArg (Optional): callback을 실행할 때 this로 사용할 값.
반환 값: undefined.

(for 반복문을 forEach()로 바꾸기)

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);
});

map

arr.map(callback(currentValue[, index[, array]])[, thisArg])

배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.
callback: 새로운 배열 요소를 생성하는 함수. 다음 세 가지 인수를 가집니다.
- currentValue: 처리할 현재 요소.
- index (Optional): 처리할 현재 요소의 인덱스.
- array (Optional): map()을 호출한 배열.
- thisArg (Optional): callback을 실행할 때 this로 사용되는 값.
반환 값: 배열의 각 요소에 대해 실행한 callback의 결과를 모은 새로운 배열.

var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
// roots는 [1, 2, 3]
// numbers는 그대로 [1, 4, 9]

filter

arr.filter(callback(element[, index[, array]])[, thisArg])

주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.
callback: 각 요소를 시험할 함수. true를 반환하면 요소를 유지하고, false를 반환하면 버립니다. 다음 세 가지 매개변수를 받습니다.
- element: 처리할 현재 요소.
- index (Optional): 처리할 현재 요소의 인덱스.
- array (Optional): filter를 호출한 배열.
- thisArg (Optional): callback을 실행할 때 this로 사용하는 값.
반환 값: 테스트를 통과한 요소로 이루어진 새로운 배열. 어떤 요소도 테스트를 통과하지 못했으면 빈 배열을 반환합니다.

(10이하의 값 걸러내기)

function isBigEnough(value) {
  return value >= 10;
}

var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered 는 [12, 130, 44]

reduce

arr.reduce(callback[, initialValue])

배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다.
callback: 배열의 각 요소에 대해 실행할 함수. 다음 네 가지 인수를 받습니다.
-accumulator: 콜백의 반환값을 누적합니다. 콜백의 첫 번째 호출이면서 initialValue를 제공한 경우에는 initialValue의 값입니다.
-currentValue: 처리할 현재 요소.
-currentIndex (Optional): 처리할 현재 요소의 인덱스. initialValue를 제공한 경우 0, 아니면 1부터 시작합니다.
-array (Optional): reduce()를 호출한 배열.
initialValue (Optional): callback의 최초 호출에서 첫 번째 인수에 제공하는 값. 초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용합니다. 빈 배열에서 초기값 없이 reduce()를 호출하면 오류가 발생합니다.
반환 값: 누적 계산의 결과 값.

sort

arr.sort([compareFunction])

배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환합니다.
compareFunction (Optional): 정렬 순서를 정의하는 함수. 생략하면 배열은 각 요소의 문자열 변환에 따라 각 문자의 유니 코드 코드 포인트 값에 따라 정렬됩니다.
반환 값: 정렬한 배열. 복사본이 만들어지는 것이 아니라 원 배열이 정렬된다.
compareFunction이 제공되면 배열 요소는 compare 함수의 반환 값에 따라 정렬됩니다.
compareFunction(a, b)이 0보다 작은 경우 a를 b보다 낮은 색인으로 정렬합니다. 즉, a가 먼저옵니다.
compareFunction(a, b)이 0을 반환하면 a와 b를 서로에 대해 변경하지 않고 모든 다른 요소에 대해 정렬합니다.
compareFunction(a, b)이 0보다 큰 경우, b를 a보다 낮은 인덱스로 소트합니다.
compareFunction(a, b)은 요소 a와 b의 특정 쌍이 두 개의 인수로 주어질 때 항상 동일한 값을 반환해야합니다. 일치하지 않는 결과가 반환되면 정렬 순서는 정의되지 않습니다.

✔️ 이외 개념들

|| (OR 연산자, short circuit evaluation)

expr1 || expr2
expr1을 true로 변환할 수 있으면 expr1을 반환하고, 그렇지 않으면 expr2를 반환합니다.

       o1 = true  || true       // t || t returns true
       o2 = false || true       // f || t returns true
       o3 = true  || false      // t || f returns true
       o4 = false || (3 == 4)   // f || f returns false
       o5 = 'Cat' || 'Dog'      // t || t returns "Cat"
       o6 = false || 'Cat'      // f || t returns "Cat"
       o7 = 'Cat' || false      // t || f returns "Cat"
       o8 = ''    || false      // f || f returns false
       o9 = false || ''         // f || f returns ""
       o10 = false || varObject // f || object returns varObject

spread syntax

rest parameter

arguments

arrow function expression(화살표 함수)

배열 내장 메소드 : includes, every, some
객체 커스텀 메소드 : extends, defaults
배열 커스텀 메소드 : zip, zipStrict, intersection, difference,, shuffle

비동기 호출

비동기 처리란?
=> 특정 코드의 연산이 끝날 때까지 다른 코드의 실행을 멈추는 것이 아니고, 다음 코드를 먼저 실행하는 것
비동기 함수 전달 패턴

1. callback 패턴
let request = 'caffelatte';
orderCoffeeAsync(request, function(response) {
// response -> 주문한 커피 결과
drink(response);
});

 2. 이벤트 등록 패턴
let request = 'caffelatte';
orderCoffeeAsync(request).onready = function(response) {
  // response -> 주문한 커피 결과
  drink(response);
  });

비동기의 주요 사례
- DOM Element의 이벤트 핸들러
  - 마우스, 키보드 입력 (click, keydown 등)
  - 페이지 로딩 (DOMContentLoaded 등)
- 타이머
  - 타이머 API (setTimeout 등)
  - 애니메이션 API (requestAnimationFrame)
- 서버에 자원 요청 및 응답
  - fetch API
  - AJAX (XHR)