JS를 독학하면 놓치기 쉬운 부분들(2) - 데이터 타입과 연산자

== vs ===

C나 Java 등에서 ==연산자는 두 값을 비교한다.
자바스크립트에서 위와 같은 역할을 하는 연산자는 ===이다.

자바스크립트에서 ==는 두 값을 비교하긴 하지만, 조금 관대하게 비교한다. 다시 말하면, 두 값의 데이터 타입이 다르면 자동으로 타입을 통일하여 비교한다.

예를 들어 10과 "10"을 비교하면 ==연산자는 true라는 결과를 낸다. 두 값의 데이터 타입이 다를 때 내부적으로 어떠한 규칙에 따라 형변환이 일어나는데 이에 따라 결국 10과 10을 비교하게 된다.

따라서 값을 비교할 땐 ===연산자를 사용하기를 권한다.

객체 자체를 비교할 수는 없다

두 객체를 비교할 때 아래와 같이 코드를 작성할 지도 모른다.

const obj1 = {a: 1}
const obj2 = {a: 1}

console.log(obj1 === obj2)

아이러니하게도 위의 결과는 false이다.

변수에 객체를 할당할 때는 사실 객체가 메모리에 올라가고 그 주소를 변수에 할당한다고 했었다.

고로 obj1과 obj2를 비교하는 것은 두 주소를 비교하는 것이다.

그런 의미에서 아래의 코드 결과는 true가 된다.

const obj1 = {a: 1}
const obj2 = obj1

console.log(obj1 === obj2)

🎈 배열도 마찬가지로 객체이기 때문에 배열끼리의 연산 또한 동일하게 동작한다

!! 연산자

boolean이 아닌 데이터 타입을 boolean으로 변환해주는 연산자이며 아래와 같이 사용한다.

!!{a: 1}
!!undefined
!!0
!![]
// 등

연산 결과가 flase가 되는 경우는 아래와 같다

• 0
• 빈 문자열
• null
• undefined

이외엔 모두 true이다. 객체는 그 존재 자체로 true이므로 빈 객체라 해도 true가 된다. 물론 빈 배열도 마찬가지이다.

null과 undefined

null과 undefined모두 값이 비었다는 의미이지만, null은 코드 작성자가 '값이 없다'라고 명시해 놓는 것이다.

let a; // type: undefined, value: undefined
a = null; // type: object, value: null

위처럼 null은 코드 작성자가 의도적으로 넣는 값이며 타입또한 object이다.

undefined는 '값이 정의되지 않았다' 이고,
null은 '값이 없다고 정의한다' 이다.

숫자 연산 시 주의사항

자바스크립트에는 C나 Java처럼 정수타입과 실수타입이 구분되어 있지 않다.

따라서 C에서는 1/3을 정수타입 변수에 저장하면 그 값이 0이고 실수타입 변수에 저장하면 0.333333이지만, 자바스크립트에서는 모두 실수값으로 저장된다.

대신에 실수를 정수처럼 변환해주는 메서드들이 존재한다.

• Math.floor(값)
  floor는 '바닥'이라는 뜻이다. 소숫점 아래 부분들을 모두 버린 값을 반환한다.

Math.floor(0.9) // 0

• Math.ceil(값)
  ceil은 '천장'이라는 뜻이다. 소숫점 아래로 값이 있으면 전부 없애버리고 일의 자리 값을 1 올린 숫자를 반환한다.

Math.ceil(0.21) // 1
Math.ceil(0.001) //1

• Math.round(값)
  1의 자리까지 반올림한 값을 반환한다.

Math.round(0.9) // 1
Math.round(0.21) // 0

소숫점 n자리까지 반올림하는 방법

3.141592653 이라는 값을 소숫점 둘째 자리까지 반올림 해보자.

Math.round()메서드를 이용할 건데, 이 메서드는 소숫점 몇째 자리 까지 반올림 할지 지정할 수 없다.

그래서 그냥 소숫점을 미리 옮긴 값을 Math.round()메서드에 집어넣고, 반환 받은 값의 소숫점을 다시 원래대로 되돌려 놓을 것이다.

const pi = 3.141592653;
const temp = Math.round(pi*100);
const roundResult = temp/100;

console.log(roundResult) // 3.14

+

위의 코드에서 100 대신에 Math.pow(10, 2)라고 해줄 수 있는데, 이를 이용해서 원하는 값을 원하는 소숫점까지 반올림한 값을 계산해주는 함수를 작성할 수도 있다.

// value: 반올림 하려는 값
// n: "소숫점 n번째 자리까지"에서의 n
const customRound = (value, n) => {
  const elevator = Math.pow(10, n);
  const temp = Math.round(value * elevator);
  
  return temp / elevator;
}