[멋쟁이사자처럼] JS 실무자 노하우 코드 DB - typeof, isNaN, sort

의도대로 결과가 나오지 않는 JavaScript (JS) 메서드를 어떻게 사용하면 좋을까?

그때그때 퍼포먼스를 발휘해 예외 케이스를 찾고 해치우면서 코드를 하는게 맞는 걸까?

나는 훌륭한 코드를 자신의 코드로 학습하고 DB화 하거나 GitHub Repository 에 정리하여 효율적으로 일하는게 맞다고 생각한다.

 

그래서 이 글은 내가 JS를 기초부터 다시 공부하면서 유용한 실무자 노하우 코드만을 따로 뽑아 정리한 일종의 DB 이다.

실무자 노하우 코드는 VSCode 의 경우 스니펫(snippet)으로 등록해서 쓰면 훨씬 편할 것이다.

실무를 하면서 오류를 최대한 출력하지 않으면서, 작동을 멈추지 않는 JS 의 메소드로부터 우리 모두 자유로워지는데 도움이 되길 바란다.

 

1. type 체크 : typeof() 함수

---

1-1. 그대로 사용하기

// typeof 가 정확하게 나오긴 하지만 우리가 원하는 값이 아닐 수 있다.
console.log(typeof(10)) // number
console.log(typeof('10')) // string
console.log(typeof([1, 2, 3])) // object
console.log(typeof(null)) // object로 나옴(javascript의 버그)
console.log(typeof([])) // object
console.log(typeof({})) // object
console.log(typeof(function () { })) // function
console.log(typeof(/a/g)) // object
console.log(typeof(true)) // boolean
console.log(typeof(NaN)) // number
console.log(typeof(undefined)) // undefined

 

1-2. 실무자 노하우 코드 : typeCheck()

// 직접 만들지 말고 검증된 이 코드를 사용하라. (실무자 코드 저장.)
function typeCheck(value) {
    const return_value = Object.prototype.toString.call(value);
    const type = return_value.substring(
    	return_value.indexOf(" ") + 1,
    	return_value.indexOf("]")
	);
	return type.toLowerCase();
}

console.log(typeCheck(10)) // number
console.log(typeCheck('10')) // string
console.log(typeof ([1, 2, 3])) // object
console.log(typeCheck(null)) // null
console.log(typeCheck([]))  // array
console.log(typeCheck({})) // object
console.log(typeCheck(function () { })) // function
console.log(typeCheck(/a/g)) // regexp
console.log(typeCheck(true)) // boolean
console.log(typeCheck(NaN)) // number
console.log(typeCheck(undefined)) // undefined

 

- 다른 예시로 getType() 함수를 만드는데 훨씬 간단해 보인다.

function getType(data) {
    return Object.prototype.toString.call(data).slice(8, -1);
}

(https://mu-mu-syo.tistory.com/49)

자바스크립트 - 데이터 타입 확인하기

2. isNaN 판별 : isNaN() 함수

---

2-1. 그대로 사용하기

- 숫자로 판별되는 것들은 false 를 반환하고, 숫자로 판별되지 않는 것들은 true 를 반환한다. (타입 구분없음)

- 불분명한 결과를 암기해야 할 케이스가 많음

//isNaN
isNaN(NaN); //true
isNaN(10); //false
isNaN('10'); //false
isNaN('a'); //true
isNaN('10px'); //true
isNaN([]); //true
isNaN({}); //true

 

2-2. 일반적인 코드 : Number 키워드 사용하기

//Number.isNaN 사용을 권고한다.
Number.isNaN(NaN); //true
Number.isNaN(null); //false
Number.isNaN(NaN); //false
Number.isNaN(10); //false
Number.isNaN('10'); //false
Number.isNaN('a'); //false
Number.isNaN('10px'); //false
Number.isNaN([]); //false
Number.isNaN({}); //false

 

3. Javascript 정렬 코드 : arr.sort() 메소드

---

3-1. 그대로 사용하기

// 언뜻 보기엔 잘 되는 것 같다.
let data = ['a', 'z', 'b', 'e'];
data.sort(); // ['a', 'b', 'e', 'z']

// 사전식 정렬이어서 아래와 같은 값은 정렬이 되지 않는다!
let data = [1, 11, 2, 111, 22];
data.sort(); // [1, 11, 111, 2, 22]

 

3-2. 일반적인 코드

- 0 보다 작은 경우 a를 b 보다 낮은 색인으로 정렬한다. (즉, a가 먼저 온다)

// 배열의 숫자형 데이터 요소를 다룰 때 자주 사용하는 코드
let data = [1, 11, 2, 22];
data.sort((a,b) => (a-b)); // 오름차순
data.sort((a,b) => (b-a)); // 내림차순

 

3-3. 실무자 노하우 코드 : 객체 정렬

- 앞단의 삼항연산자만 생각해보면 이해하기 쉽다.

- 오름차순은 a를 기준으로 b 보다 작다면 낮은 색인(-1)으로 정렬한다. (작은게 먼저 온다)

- 내림차순이면 a를 기준으로 b 보다 크다면 낮은 색인(-1)으로 정렬한다. (큰게 먼저 온다)

- 한글에서도 오류없이 동작한다.

// 일반적인 코드의 다른 표현
// 실무 DB 에 저장.
let data = [1, 11, 2, 22];
data.sort((a,b) => (a<b ? -1 : (a>b ? 1:0))) // 오름차순
data.sort((a,b) => (a>b ? -1 : (a<b ? 1:0))) // 내림차순

// 예시 : 한글 정렬
let data = ['김광수', '한광수', '이광수', '고광수','방광수','박광수'];
data.sort((a,b) => (a<b ? -1 : (a>b ? 1:0)))
// ['고광수', '김광수', '박광수', '방광수', '이광수', '한광수']

// 애러가 발생하지 않는 무결한 코드
// 실무 DB 에 저장.
data.sort((a, b) => (a[key] < b[key] ? -1 : (a[key] > b[key] ? 1 : 0))) // 오름차순
data.sort((a, b) => (a[key] > b[key] ? -1 : (a[key] < b[key] ? 1 : 0))) // 내림차순


// 예시 : 객체 정렬
const fesClass = [
    {이름:'김철수', 나이:10},
    {이름:'박철수',나이:60},
    {이름:'이철수',나이:50},
    {이름:'황철수',나이:30}
]

// 오름차순 정렬
fesClass.sort((a, b) => (a['나이'] < b['나이'] ? -1 : (a['나이'] > b['나이'] ? 1 : 0)))
//const fesClass = [
//    {이름:'김철수', 나이:10},
//    {이름:'황철수',나이:30},
//    {이름:'이철수',나이:50},
//    {이름:'박철수',나이:60}
//]