여러 인자 넘기기, NaN 체크, 값 서로 교체, 글 작성 가능한 div

1. 여러 인자 넘기기

: 코드를 짜다보면 여러 인자들을 함수에 넘겨야할 때가 있다.
: 어쩌면 아래와 같이 넘길지도 모른다.

function A() {
  let a = [1,2,3,4];
  let b = {a: 1, b:2};
  let c = 'hello';
  let d = 21;
  B(a,b,c,d); 
}

function B(a, b, c, d) {  
 console.log(a, b, c, d);
}

인자를 넘기는 또 다른 방법은 뭐가 있을까?

: 아래와 같이 쓰는 방법도 있을 것이다.
: 변수를 객체에 담아 보내는 방식으로, 인자가 일일이 쓰지 않아도 된다.
: 또한, 인자가 더 늘어날 시 함수내부 코드만 수정하면 된다.

function A() {
  let a = [1,2,3,4];
  let b = {a: 1, b:2};
  let c = 'hello';
  let d = 21;

  let result = {a, b, c, d};  //[1]
  B(result);
}

function B(result) {
 const {a, b, c, d} = result;  //[2]
 console.log(a, b, c, d);
}

추가적으로 위 방법은 아래와 같이 변형할 수도 있다 :)

: 위 방법에서 인자를 받는 부분만 수정한 코드이다.

function B({a, b, c, d}) {  //this!
 console.log(a, b, c, d);   //인자 바로 씀
}

2. number 체크법

: 평소와 다름없이 코드를 짜던 중, NaN을 처리해야할 일이 있었다.
: NaN은 숫자가 아니니까, typeof NaN !== 'number' 라고 생각했다.
: 하지만! 어림도 없는 소리~ 바로 오류가 발생했다!

아니, NaN인데 왜 타입이 number라고 뜨는 거죠?
왜 NaN의 타입이 숫자냐!라는 게시물들...😂

: 일단, 왜 NaN이 발생하는지 알아야한다.
: 아래는 왜 때문에 NaN이 발생하는지, 그 상황을 작성했다.

NaN이 발생하는 경우	예시
- 0을 0으로 나누기	ex) 0/0
- 무한대에 연산하기	ex) infinity/infinity
-undefined, string을 숫자로 바꾸기	ex) Number('hello')
-숫자가 아닌 값과 숫자와 빼기 연산	ex) 'helllo' - 12
-NaN에 연산하기	ex) NaN * 12
결과가 허수인 연산하기	ex) Math.sqrt(-1)

왜 NaN이 발생하는지는 알겠고요
왜 어째서 NaN의 타입이 숫자인거냐구욧! 😡

: NaN의 타입이 숫자인 이유는 NaN이 발생하는 원인과 관련있는데 NaN이
-> 컴퓨터가 표현하기에 큰 숫자(infinity)와의 연산
-> 숫자와 숫자가 아닌 값과의 연산 으로 나온다는 점이다.
: 그렇다고 NaN이 String, undefined, null타입은 또 아닌 것이다.

결국 NaN은 String, null, undefined 등도 아니고,
정의할 수 없는 수치의 결과이니까, 타입이 Number라는 것!

: 그럼, 숫자 속에서 NaN은 어떻게 판별할 수 있을까?
: 그 방법은 바로 Number()을 사용하는 것이다.
: 한 예시로, 배열에 NaN이 담겨있고 숫자가 아니면 반복문을 중단시켜보자.

const coins = [123, 345, 567, NaN];
for (let coin of coins) {
  if (Number(coin) !== coin) {   //this!
    break;
  }
}

: 코드를 보면 Number(value) !== value을 사용해 숫자인지 판별했다.
: 이게 가능한 이유는 NaN !== NaN이기 때문이다.
(NaN는 해석 할 수없는 숫자 값이니까, 다른 NaN과 같다고 할 수 없음)

3. 값 서로 바꾸기

: 만약 여러분이 두 변수의 값을 서로 바꾸려고 한다면, 아래와 같이 해보자! 🙂
: 단 한 줄의 코드로 두 변수를 쉽게 바꿀 수 있다!

let a = 11; 
let b = 12;
[a, b] = [b, a]; 

// a = 12 
// b = 11

: 아 혹시나 해서 얘기하는 거지만 []없으면 값이 안 바뀌더라ㅎㅎ

a, b = b, a //이거 안됨!!!!

4. 글 작성 가능한 div

: 혹시 글 에디터 라이브러리를 사용해본 적이 있는가?
: 우리가 처음 html을 배울 때는 input, textarea에서만 글 작성이 가능하다고 배웠다.
: 그런데, 신기하기도 에디터 라이브러리에서는 div인데 글 작성이 가능하다.
: 그 이유는 contentEditable속성 때문이다.
: 아래 코드는 contentEditable=true을 한 div이다.

See the Pen contentEditable by KumJungMin (@kumjungmin) on CodePen.

: 신기하게도 div지만 글 작성이 가능한 걸 볼 수 있다!

: 그렇다면, 이 div가 글 작성이 가능한지 확인하는 함수가 있을까?

있다! 그건 바로 HTMLElement.isContentEditable이다.
만약 이 요소에 contentEditable이 걸려있다면 이 함수는 true를 반환한다.

출처
아래 사이트에 가면 더 자세히 알 수 있어요!

• HTMLElement.isContentEditable
• 10 JavaScript One-liners You Have Got to Add Your Arsenal as a Developer
• Why does typeof NaN return 'number'?
• NaN and typeof