[JavaScript] 자료형과 연산자

1. typeof

typeof 메소드는 타입을 반환해주는 메소드입니다. 리턴 값으로는 문자열로 타입을 반환합니다.

자바스크립트는 동적타입을 지닌 언어이기 때문에 즉각적으로 자료형을 확인하는것이 불가능합니다. 따라서 이 메소드를 사용하여 자료형의 타입을 확인합니다.

 

사용방법은 아래와 같습니다.

typeof 변수

2. boolean

1) 선언과 표현

boolean은 참과 거짓. 두가지 값만 존재하는 자료형입니다. 즉 반환값으로는 true, false밖에 없습니다. 이러한 boolean 자료형은 주로 제어문에 사용합니다.

 

const x = true;
console.log(x, typeof x); //true 'boolean'

const y= 1 > 2;
console.log(y, typeof y); //false 'boolean'

console.log(true, typeof true); //true 'boolean'
console.log(false, typeof false); //false 'boolean'

let a = 1 === 2;
console.log(a, typeof a); //false 'boolean'
let b = 'abc' !== 'def'
console.log(b, typeof b); //true 'boolean'
let c = a !== b;
console.log(c, typeof c); //true 'boolean'
let d = typeof a === typeof b === true;
console.log(d, typeof d); //true 'boolean'

2) 연산자

1] 부정연산자

console.log(
  true, //true
  !true, //false
  false, //false
  !false //true
);

console.log(
  true, //true
  !true, //false
  !!true, //true
  !!!true //false
);

console.log(
  false, //false
  !false, //true
  !!false, //false
  !!!false //true
);

console.log(
  true === !false, //true
  !(1 == '1'), //false
  !(1 === '1'), //true
  !(typeof false === 'boolean') //false
);

2] and, or 연산자

//and연산자 -> 양쪽 모두 참일 경우 true
console.log(
  true && true, //
  true && false,
  false && true,
  false && false,
);

//or연산자 -> 둘중 하나라도 참이면 true
console.log(
  true || true,
  true || false,
  false || true,
  false || false,
);

//두 연산자를 활용
let x = 14;

console.log(
  (x > 10 && x <= 20) || x % 3 === 0
);

// 드 모르간의 법칙 -> 항상 true
let a = true;
let b = true;

console.log(
  !(a && b) === (!a || !b),
  !(a || b) === (!a && !b)
); 

//단축평가
let error = true;
// error = false; 

// 앞의 것이 true일 때만 뒤의 코드 실행
error && console.warn('오류 발생!');

// 앞의 것이 false일 때만 뒤의 코드 실행
error || console.log('이상 없음.');


let xx = true;

// &&, || 연산자는 값 자체를 반환
let yy = xx && 'abc'; //and연산자에서는 x가 true이므로 뒤 코드를 실행 -> abc를 반환
let zz = xx || 123; // or연산자에서는 x가 true이므로 뒤 코드를 실행하지 않음 -> true반환

console.log(yy, zz); //abc true

let xxx = false;

let yyy = xxx && 'abc';
let zzz = xxx || 123;

console.log(yyy, zzz); //false 123

3]삼항연산자

삼항연산자는 조건을 확인하여 참과 거짓에 따라 다른 결과를 반환하는 것을 말합니다.

사용방법은 아래와 같습니다

조건?조건이 참일 경우 반환값: 조건이 거짓일경 우 반환값

 

예제)

let x = true;
// x = false;

let y = x ? '참입니다.' : '거짓입니다.';
console.log(y); // 참입니다.

let num = 343246;

console.log(
  'num은 3의 배수' +
  (num % 3 === 0 ? '입니다.' : '가 아닙니다.')
); // num은 3의 배수가 아닙니다.

let error = true;
//error = false;

error 
  ? console.error('오류 발생!') //출력
  : console.log('이상 없음'); // 출력하지 않음

4] Truthy 와 Falsy

Truthy와 Falsy는 삼항연산자에서 사용되며 Truthy는 존재하는 값을 Falsy는 존재하지 않는 값을 의미합니다.

즉 제어문 등에서 true 또는 false를 반환하는 값을 의미합니다.

예제를 통해 확인해보겠습니다.

// Truthy
console.log(
  1.23 ? true : false, // true -> 0이 아니므로
  -999 ? true: false, // true -> 0이 아니므로
  '0' ? true : false, // true -> ''(빈문자)가 아니므로
  ' ' ? true : false, // true -> 문자안에 스페이스(띄움)이라는 문자열이 있으므로
  Infinity ? true : false, //true -> 0이 아니므로
  -Infinity ? true : false, //true -> 0이 아니므로
  {} ? true : false, //true -> 배열이 있으므로
  [] ? true : false, //true -> 리스트가 있으므로
);

//true와 동일한 '값'은 아님
console.log(
  1.23 == true, //false
  ' ' == true, //false
  {} == true //false
);

// Falsy
console.log(
  0 ? true : false, //false -> 0이므로
  -0 ? true : false, //false -> 음수라도 0이므로
  '' ? true : false, //false -> 빈문자이므로
  null ? true : false, //false -> 값이 없으므로
  undefined ? true : false, //false -> 값이 정의되지 않았으므로
  NaN ? true : false, //false -> 숫자가 아니므로
);

console.log(
  0 == false, //true -> boolean은 0과 1로 표현할 수 있고 0은 false값을 가짐
  0 === false, // false -> 값은 같지만 타입이 다르기 때문에
  '' == false, //true -> 공백도 값이 없기 때문에 boolean의 false와 값은 같음
  '' === false // false -> 값은 같지만 타입이 다르기 때문에
);
console.log(
  null == false, //false
  undefined == false, //false
  NaN == false, //false
);

// 변수에 넣어서 사용가능
let x = 0; //false와 값이 동일
let y = 1; //true와 값이 동일

x && x++; //x가 false이므로 x++ 실행하지 않음 -> x= 0
y && y++; //y가 true이므로 y++실행 -> y =2

console.log(x, y); // 0 2

//홀짝 판별시에도 사용가능
let x = 2;
let y = 3;

console.log(
  x % 2 ? '홀' : '짝', // 2%2 =0이므로 거짓 -> 짝 
  y % 2 ? '홀' : '짝' //3%2 =1이므로 참 -> 홀
);

//문자열 반환
let x = '';
let y = '회사원';
let z = x || y; //x가 false이므로 z = y = 회사원

console.log(z); //회사원

x = x || '단기알바'; //x가 ''이므로 false -> x = '단기알바'
y = y || '단기알바'; // y가 빈문자가 아니므로 true -> 뒤는 실행안함 -> y='회사원'

console.log(
	x, //단기알바
	y //회사원
);


//부정연산자를 사용하여 값을 boolean으로 변환
console.log(
  !1, typeof !1, //false 'boolean'
  !-999,typeof !-999, //false 'boolean'
  !'hello',typeof !'hello', //false 'boolean'
  !0,typeof !0, //true 'boolean'
  !'',typeof !'', //true 'boolean'
  !null,typeof !null //true 'boolean'
);

//부정연산자를 두번사용하면 해당값의 boolean값으로 변환 가능
console.log(
  !!1, typeof !!1, //true 'boolean'
  !!-999,typeof !!-999, /true 'boolean'
  !!'hello',typeof !!'hello', /true 'boolean'
  !!0,typeof !!0, //false 'boolean'
  !!'',typeof !!'', //false 'boolean'
  !!null,typeof !!null //false 'boolean'
);

 

3. number

1) 선언과 표현

number는 숫자형입니다. 자바스크립트에서는 정수와 실수를 구분하지 않습니다. 따라서 정수값도 실수값으로 처리합니다.

1] 선언

let i1 = 100;
let f1 = 12.34;
let minus = -99;

console.log(i1, f1, minus); //출력: 100 12.34 -99

2] 무한대

자바스크립트에서는 다른 언어와 다르게 0으로 나눈값도 무한대로 표현합니다 그리고 이 무한대값은 음과 양도 존재합니다.

let x = 1 / 0;
console.log(x, typeof x); //출력: Infinity 'number'

console.log(-x, typeof -x); //출력: -Infinity 'number'

let y = -1 / 0;
console.log(y, typeof y); //출력: -Infinity 'number'

//
let z = Infinity; //Infinity는 무한대로 의미하는 예약어
console.log(z, typeof z); // Infinity 'number'

3] 숫자가 아닌 것 -> NaN

자바스크립트에서 연산결과가 숫자가 아닌 값은 NaN으로 표현합니다.

기능 ( 메서드 )	설명
isNaN	숫자가 아니다 싶으면 무조건 true 반환
Number.isNaN	숫자 자료형이지만 숫자가 아니라면 true 반환

let a = 1 / 'abc';
console.log(a, typeof x); //출력: NaN 'number'
let b = 2 * '가나다';
console.log(b, typeof b); //출력: NaN 'number'
let c = NaN;
console.log(c, typeof c); //출력: NaN 'number'

//주어진 값이 NaN인지 아닌지 확인하는 방법 
let x = 1 / 'abc';

console.log(
  x, //NaN 
  x == NaN, //false 
  x === NaN, //false 
  isNaN(x), // true  -> 숫자가 아닐 시 true 
  Number.isNaN(x) // true -> 보다 엄격한 버전
);

2) 연산자

1] 산술연산자

// 값 반환
let x = 10;
let y = x * 10;

console.log(y); //출력: 100

console.log(
  y + 1, //101
  y - 1, //99
  y * 2, //200
  y / 5, //20
  y % 3, //1 
  y ** 2 //10000
);

2] 문자열 숫자변환

let x = '1111';
console.log(x, typeof x); //1111 string
x = +x;
console.log(x, typeof x); //출력: 1111 'number'

let y = '100';
console.log(y++, y); //출력: 100 101

let z = '100';
console.log(--z, z); //출력: 99 99

//숫자로 변환할 수 없다면 NaN반환
let str = 'aaaa';
str = +str;
console.log(str); //출력: NaN

3] 할당 산술 연산자

연산자	의미
x += y	x = x + y
x -= y	x = x - y
x *= y	x = x * y
x /= y	x = x / y
x %= y	x = x % y
x **= y	x = x ** y

 

예제)

let x = 3;

x += 2;
console.log(x); //5

x -= 3;
console.log(x); //2

x *= 12;
console.log(x); //24

x /= 3;
console.log(x); //8

x %= 5; 
console.log(x); //3

x **= 4;
console.log(x); //81

let y = 25;

console.log(
  y **= 0.5, // 5
  y          // 5
);

3) 부동소수점으로 인한 실수계산 오차

실수계산의 오차가 발생하는 이유는 컴퓨터는 실수값을 이진법으로 계산하기 때문입니다.

즉, 2진법으로 표현가능한 실수는 오차가 생기지 않으며, 2진법으로 표현하지 못하는 실수는 오차가 발생합니다.

따라서 정확한 실수계산을 하려면 일반적으로 라이브러리를 사용합니다.

//실수 연산이 의도하지 않은 값이 나타남
console.log(
  0.1 + 0.2, //0.30000000000000004
  0.1 + 0.2 === 0.3 //false
);

let x = 0.1 * 10; //1
let y = 0.1 + 0.1 + 0.1 + 0.1 + 0.1 
 + 0.1 + 0.1 + 0.1 + 0.1 + 0.1; //0.9999999999999999

console.log(
  x, y, x === y //false
);

console.log(
  0.2 * 0.7, //0.13999999999999999
  0.4 * 3, //1.2000000000000002
  0.9 - 0.6, //0.30000000000000004
  0.9 - 0.3 //0.6000000000000001
);

// 2의 거듭제곱으로 나눈 수의 계산은 정확하게 나타남
console.log(
  0.25 * 0.5, //0.125
  0.5 + 0.25 + 0.125 + 0.125, //1
  0.0625 / 0.25 //0.25
);

4. 문자열

1) 선언방법

자바스크립트에서는 파이썬처럼 문자에 대한 개념은 없습니다. 따라서 작은 따옴표나 큰 따옴표, 백틱(`)으로 둘러쌓인 텍스트는 전부 문자열로 인식합니다. 백틱은 띄어쓰기 줄바꿈을 그대로 표현하며, 문자열 사이에 변수를 넣는것도 가능합니다.

let first_name = "zero";
let last_name = 'Code';
let description = `안녕하세요
나는 현재
자바스크립트를 공부하고 있습니다..`;

console.log(first_name, last_name); // 출력: zero Code
console.log(description);
//출력:
//안녕하세요
//나는 현재
//자바스크립트를 공부하고 있습니다..

const NAME = 'zero-week';
let age = 37;
let married = false;

console.log(
`제 이름은 ${NAME}, 나이는 ${age}세구요, \
${married ? '기혼' : '미혼'}입니다.`
);
// 출력: 제 이름은 zero-week, 나이는 37세구요, 미혼입니다.


//백슬래쉬를 통해 문자열을 세로로 입력 가능
let longName = '김수한무 거북이와 두루미 \
삼천갑자 동방삭 치치카포 사리사리센타 \
워리워리 세브리깡 무두셀라 구름이 \
허리케인에 담벼락 담벼락에 서생원 \
서생원에 고양이 고양이엔 바둑이 \
바둑이는 돌돌이';

// 줄바뀜 되는 것이 아님
// 큰따옴표도 마찬가지
console.log(longName);
//출력:
//김수한무 거북이와 두루미 삼천갑자 동방삭 치치카포 사리사리센타 워리워리 세브리깡 무두셀라 구름이 허리케인에 담벼락 담벼락에 서생원 서생원에 고양이 고양이엔 바둑이 바둑이는 돌돌이

2) 이스케이프

이스케이프 표현은 MDN문서를 확인하시면 됩니다. 일반적으로 다른 언어에서 사용하는 이스케이프와 동일합니다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String#%EC%9D%B4%EC%8A%A4%EC%BC%80%EC%9D%B4%ED%94%84_%ED%91%9C%ED%98%84

String - JavaScript | MDN

3)연산자

1] 비교연산자

연산자	의미	비고
x == y	값이 같다.
x === y	자료형도 값도 같다.	권장
x != y	값이 다르다.
x !== y	자료형 또는 값이 다르다.	권장
x < y	사전순상 x가 먼저 온다.
x <= y	사전순상 x가 먼저 오거나 같다.
x > y	사전순상 y 먼저 온다.
x >= y	사전순상 y 먼저 오거나 같다.

 

예졔)

console.log(
  '안녕하세요~' === "안녕하세요~",
  '안녕하세요~' === `안녕하세요~`,
  "안녕하세요~" === `안녕하세요~`,
);

//출력: true true true

//대소문자는 구분함
console.log('Hello!' === 'hello!'); //false


//==, !=은 값만 비교
console.log(
  '1' == '1', //true
  '1' == 1, //true
  '1' == 2 //false
);

console.log(
  '1' != '1', //false
  '1' != 1, //false
  '1' != 2 //true
);

//=== !==은 자료형도 비교
console.log(
  '1' === '1', //true
  '1' === 1, //false
  '1' === 2 //false
);

console.log(
  '1' !== '1', //false
  '1' !== 1, //true
  '1' !== 2 //true
);

//사전순 비교
console.log(
  'ABC' < 'abc', //true
  'apple' <= 'banana', //true
  '가나다' > '라마바', //false
  '안녕' >= '안녕' //true
);

// 숫자 문자열 관련 주의!
console.log(
  100 > 12, // 숫자는 그 자체로 비교 -> true
  '100' > '12', // 문자는 사전순으로 비교 -> false
  '100' > 12, // 문자와 숫자를 비교하면 문자를 숫자로 변환 -> true
);

2] 연결 연산자

연산자	의미	부수효과
x + y	x와 y를 이어붙인 값을 반환	x
x += y	x에 y를 이어붙이고 그 결과를 반환	o

 

부수효과란 기존의 값이 변하는 것을 의미합니다. 위 경우엔 x + y는 x변수,y변수의 값이 변하지 않지만, x+=y는 x 변수의 값이 변하게 됩니다.

 

예제)

//부수효과가 발생하지 않는 연결
let str1 = 'Hello';

let str2 = ' World';

console.log(str1+str2); //출력: Hello World
console.log(str1); //출력: Hello
console.log(str2); //출력:  World

//부수효과가 발생하는 연결
let str3 = "안녕";
console.log(str3); //출력: 안녕
str3 += "하세요";
console.log(str3); //출력: 안녕하세요

5. undefined

자바스크립트에서는 undifined도 자료형에 속합니다. 이 자료형은 값이 부여되지 않은 상태라는 의미를 가지고 있습니다.

예컨대 선언만 하고 출력하면 undifined가 나타나며 반환하지 않는 형태를 콘솔에 입력하면  undifined가 나타납니다.

let x;
console.log(typeof x); //출력: undefined

let y = 1; // 콘솔에 입력하면 undefined가 나타남

6. null

null은 undifined과 달리 값이 없음을 의미합니다. null의 타입은 undifined가 아니라 object. 즉 객체타입입니다.

let x = null;
console.log(x,typeof x); //출력: null 'object'

 

7. 기타연산자

1) 쉼표 연산자

쉼표 연산자는 마지막 실행값을 반환하는 연산자입니다. 그러나 앞의 코드를 실행한 후에 마지막을 반환합니다.

let x = 1, y = 2, z = 3;
console.log(x, y, z); //1 2 3

console.log(
  (++x, y += x, z *= y) //12 -> x = 2, y = 4 z = 12 -> 앞의 코드를 모두 실행한 후 마지막값을 반환함
);

2) null 병합연산자

이 연산자는 물음표 두개를 사용하여 표현합니다.  이 연산자는 앞의 조건이 null이거나 undefined일때 ?? 다음코드를 실행하는 것입니다. 따라서 ||보다 더 엄격하다고 볼 수 있습니다.

let x;
x ?? console.warn(x, 'x에 값이 없습니다.'); //실행

x = 0;
x ?? console.warn(x, 'x에 값이 없습니다.');

x = null;
x ?? console.warn(x, 'x에 값이 없습니다.'); //실행


let a = false;
let b = 0;
let c = '';
let d = null;
let e;

console.log(
  a ?? '기본값', //false
  b ?? '기본값', //0
  c ?? '기본값', //''
  d ?? '기본값', //기본값
  e ?? '기본값', //기본값
);

let baby1 = '홍길동';
let baby2; // 아직 이름을 짓지 못함

const nameTag1 = baby1 ?? '1번 아기';
const nameTag2 = baby2 ?? '2번 아기';

console.log(
	nameTag1, //홍길동
	nameTag2 //2번 아기
);

//병합 할당 연산자
let xx = 0;
let yy = '';
let zz = null;

xx ||= 100; 
yy &&= 'y값이 있음'; 
zz ??= '기본값'; 

console.log(
	xx, //100 -> xx가 falsy이기 때문에 100출력
    yy, // '' -> yy가 falsy이기 때문에 yy출력
    zz // 기본값 -> zz가 null이기 때문에 기본값 출력
);