JavaScript - 데이터타입, 연산자

자바스크립트의 동작 원리

데이터 타입의 특징과 종류

데이터 타입의 특징

• 자바스크립트는 다른 프로그래밍 언어에 비해서 데이터 타입이 유연하다.
• 상황에 따라 데이터 타입이 변할 수 있다는 의미이다.
• 한 변수에 여러 데이터 타입의 값을 할당할 수 있기는 하지만, 값마다 데이터 타입이 있긴 하다.

데이터 타입의 종류

기본형(Primitive Type)

• Number
• String
• Boolean
• Null
• Symbol
• BigInt

 

참조형(Reference Type)

• Object

Symbol

정의하기

// Symbol('변수의 설명');

const user = Symbol();
const user = Symbol('this is a user');

Symbol이 된 변수는 그 어떤 값과 비교해도 false가 된다.

user === 'this is user'; // false
user === 'user'; // false
user === 'Symbol'; // false
user === true; // false
user === false; // false
user === 123; // false
user === 0; // false
user === null; // false
user === undefined; // false

const user2 = Symbol('this is a user');
console.log(user === user2); // false

bigInt

• 아주 큰 정수를 표현하기 위해 등장한 데이터 타입.
• 자바스크립트는 안전한 정수 표현의 한계가 있다.
• 안전한 최대 정수는 2**53-1, 최소 정수는 -(2**53-1)이다.
• 2**53 - 1 = 9007199254740991 로, 약 9,000조 정도의 숫자.
• 이 범위를 초과하는 정숫값을 사용하려고 하면 연산에 미세한 오류가 발생한다.
• 예를들면 9007199254740991 + 1과 9007199254740991 + 2를 비교하면 true라는 결과가 리턴된다.
• 이유는 JavaScript가 IEEE 754에 기술된 배정밀도 부동소수점 형식 숫자체계를 사용하기 때문이라는데 넘어가자.

정의하기

const bigNum = 9007199254740993n;
const bigNum2 = BigInt(9007199254740993);

• bigInt는 int를 표현하기 위한 데이터 타입이기때문에 소수점 표현은 사용할 수 없다.
• 그래서 소수형태의 결과가 리턴되는 연산은 소수점 아래를 버린다.
• 연산은 bigInt끼리만 할 수 있고, 서로 다른 타입끼리의 연산은 명시적 형변환을 해야한다.

1.5n; // 에러 발생
10n / 6n; //1n
5n / 2n; //2n
3n * 2; // typeError

typeof 연산자

typeof 'Codeit'; // string
typeof Symbol(); // symbol
typeof {}; // object
typeof []; // object
typeof true; // boolean
typeof(false); // boolean
typeof(123); // number
typeof(NaN); // number
typeof(456n); // bigint
typeof(undefined); // undefined
typeof null; // object
typeof (function(){}); // function

Boolean

• 자바스크립트느 if, for, while문 등과 같이 조건문이 들어가는 부분에 boolean타입이 아닌 값을 작성하면 boolean값으로 자동 형변환한다.

false로 평가되는 값 ( = falsy값)

• false
• null
• undefined
• NaN
• 0
• ''(빈문자열)

 

true로 평가되는 값(= truthy값)

• falsy값을 제외간 나머지 값들.
• [](빈배열), {}(빈 객체)도 truty값이다.

AND 와 OR연산 방식

AND

• AND연산자는 한 쪽을 선택해서 return하는데
• 왼쪽 값이 truthy하면 오른쪽값을 리턴하고,
• 왼쪽 값이 falsy하면 왼쪽값을 리턴한다.
• 따라서 문자열끼리 AND연산을 할 경우, 왼쪽이 turthy한 값이기 때문에 무조건 오른쪽 값이 return된다.

console.log('AAA' && ;BBB'); // BBB

OR

• OR연산자는 AND연산자와 반대로
• 왼쪽값이 truty하면 왼쪽값을 리턴하고
• 왼쪽값이 falsy하면 오른쪽 값을 리턴한다.

function print(value){
	const message = value || ‘no message’;
	console.log(message);
}

print(); // 값을 보내지 않으면 print파라미터에 undefined가 전달되고, undefined는 falsy값이며 OR연산자를 만나 message 변수에 ‘no message’가 담긴다.
print('Hi'); // 값을 보냈기 때문에 OR연산자를 만나 message 변수에 value가 담긴다.

AND와 OR연산자 사이에서는 AND연산자의 우선순위가 더 높다.

console.log(true || false && false); // true
console.log((true || false) && false); // false

console.log('AAA' || NaN && false); // AAA
console.log(('BBB' || NaN) && false); // false

연산이 복합적으로 사용될 경우, 나는 AND연산이 우선순위가 높다는 것을 알고 있어도, 의도에 맞는 연산 우선순위를 소괄호를 사용해 명확하게 표기하는 것이 좋다.

Null 병합 연산자

• Nullish coalescing operator
• ??(물을표 두개)를 사용해서 null 혹은 undefined값을 가려내는 연산자이다.
• 좌항이 null이거나 undefined라면 우항이 리턴되고,
• 좌항이 null이거나 undefined가 아니라면 좌항이 리턴된다.

const name = null ?? ‘Ann’; // Ann
const age = undefined ?? 10; // 10
const job = 'Student' ?? 'noJob'; // Student

마치 OR연산자와 결과가 비슷해보일 수 있으나, Null병합 연산자는 falsy값이 아닌 null과 undefined만 찾아내므로 

const threeA = false || 'AAA';  // AAA
const threeA2 = false ?? 'AAA'; // false

threeA2는 좌항이 false이기 때문에(null이나 undefined가 아니기 때문에) 좌항 값 그대로 리턴했다.