221201_TIL

콜백 함수

• 콜백함수 핸들링으로 에러를 꼭 넣어줘야 함. (에러 핸들링)

function loadScript(src, callback) {
  let script = document.createElement('script');
  script.src = src;

  script.onload = () => callback(null, script);
  script.onerror = () => callback(new Error(`${src}를 불러오는 도중에 에러가 발생했습니다.`));

  document.head.append(script);
}

==>ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
  
  loadScript('/my/script.js', function(error, script) {
  if (error) {
    // 에러 처리
  } else {
    // 스크립트 로딩이 성공적으로 끝남
  }
});

이를 오류 우선 콜백(Erroe-first-callback)이라 한다.

오류 우선 콜백은 다음의 관례가 있음.
1. callback의 첫 번째 인수는 에러를 위해 남겨둠. 에러가 발생하면 이 인수를 이용하여 callback(err)이 호출된다.
2. 두 번째 인수(필요하면 인수를 더 추가할 수 있음)는 에러가 발생하지 않았을 때를 위해 남겨둠.
원하는 동작이 성공한 경우엔 callback(null, result1, result2 ...)가 호출된다.

오류 우선 콜백 스타일을 사용하면, 단일 콜백 함수에서 에러 케이스와 성공 케이스 모두를 처리할 수 있음.

---

sort()

Javascrpt에서 배열을 정렬하기 위해서는 sort() 함수를 사용한다.

arr.sort([compareFunction])

파라미터로 compareFunction이 들어가는데, 정렬 순서를 정의하는 함수를 뜻한다.

해당 값이 생략되면, 배열의 요소들은 문자열로 취급. 유니코드 값 순서대로 정렬된다.

compareFunction는 두 개의 배열 요소를 파라미터로 입력 받음.

해당 함수가 a,b 두 개의 요소를 파라미터로 입력받을 경우,
이 함수가 return하는 값이 0보다 작을 경우, a가 b보다 앞에 오도록 정렬하고,
return값이 0보다 클 경우, b가 a보다 앞에 오도록 정렬한다.

return값이 0 이면, a와 b의 순서를 변경하지 않음.

⭐️ 파라미터 값이 생략되면, 유니코드 순서에 따라 '오름차순'으로 정렬.

const arr1 = [2, 1, 3];
const arr2 = ['banana', 'apple', 'orange']
const arr3 = [2, 1, 3, 10];

arr1.sort();
document.writeln(arr1); // [1, 2, 3]

arr2.sort();
document.writeln(arr2); // ['apple', 'banana', 'orange']

arr3.sort();
document.writeln(arr3); // [1, 10, 2, 3]
// [1, 2, 3, 10]순으로 정렬하기 위해서는 compareFunction(파라미터)를 활용해야 함.

👇

arr3.sort(function(a, b)  {
  if(a > b) return 1; // 오름차순
  if(a === b) return 0; // 그대로
  if(a < b) return -1; // 내림차순
});
document.writeln(arr3); // [1, 2, 3, 10] 오름차순으로 정렬
// 배열의 숫자들을 유니코드 순서가 아닌, 숫자 크기 순서대로 정렬하기 위해서 sort() 함수의 파라미터로 함수를 정의하였습니다.
// 이 함수는 a, b 두 개의 파라미터를 입력받고,
// a > b이면 1, a == b이면 0, a < b이면 -1을 리턴하여,
// 주어진 배열을 오름차순으로 정렬하였습니다.

⭐️ 두 숫자의 차가 양수값이냐, 음수값이냐를 이용하여
숫자를 오름차순으로 정렬할 수도 있다.

const arr1 = [2, 1, 3, 10];

arr.sort(function(a, b)  {
  return a - b;
});
document.writeln(arr1); // [1, 2, 3, 10] 오름차순
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

const arr2 = [2, 1, 3, 10];

arr.sort(function(a, b)  {
  return b - a;
});
document.writeln(arr2); // [10, 3, 2, 1] 내림차순