데이터 타입 (Data Type)

데이터 타입은 프로그래밍 언어에서 사용할 수 있는 데이터 (숫자, 문자열, 불리언 등)의 종류를 말한다.

JavaScript의 데이터 타입 종류

• 원시 타입 (Primitive data type) : 원시 타입의 값은 변경 불가능한 값 (immutable value)이며 pass-by-value(값에 의한 전달) 이다.

  	* Number

  • String
  • Boolean
  • null
  • undefined
  • symbol (ES6에서 추가됨)

• 객체 타입 (object / reference type)

  	* object

1. Number (숫자형)

프로그래밍 언어에서의 숫자는 우리가 일반적으로 알고 있는 숫자와 그 성격이 사실상 동일하다. 우리는 숫자를 이용하여 덧셈(+)/뺄셈(-)/곱셈(*)/나눗셈(/)등의 연산을 할 수 있다.

1.1 숫자를 변수에 담기

var num = 1;

위 코드는 num이라는 변수를 생성하고, 1이라는 값을 할당하는 코드이다. num이라는 변수를 생성하기 전까지는 자바스크립트에서 num이라는 단어는 인식되지 않는 명령어지만 우리가 num이라는 변수를 생성함으로 해서, 인식 가능한 단어로 바뀌었고 해당 단어가 의미하는 값은 1이 되었다.

1.2 숫자 연산하기

모든 숫자는 +, -, /, *, %를 할 수 있다.

var num2 = num * 2;	
console.log(num2);	// num과 2를 곱한 값, 2

var remainder1 = 30 % 4;
console.log(remainder);  // 30을 4로 나눈 나머지, 2

var remainder2 = 100 % 5;
console.log(remainder2); // 100을 5로 나눈 나머지, 0

위 코드에서 사용한 %는 Modulo Operator, 나머지 값을 구할 수 있는 연산 기호(연산자)이다.

1.3 연산 우선 순위

수학에서 배운 것과 동일한 방식으로 곱하기와 나누기가 더하기와 빼기보다 더 우선시 된다.

var result = 3 + 7 * 2;
console.log(result); // 17

1.4 비교

부등호를 이용하여 숫자의 크고 작음을 비교할 수 있다.

var result = 3 > 7;
console.log(result); // false

var result2 = 3 >= 1;
console.log(result2); // true

1.5 같은 수 판별

일치연산자(===)를 이용하여 같은 수인지에 대한 정보를 확인할 수 있다.

var one = 5;
var two = 5;

console.log(one === two); // true

동등연산자(==)나 !=대신 항상 일치연산자(===)나 !==를 사용하는 습관을 갖는 것이 좋다.

1.6 증가시키기

var a = 1;
a = a + 1;

• 첫번째 줄 : a라는 변수를 만들고 1이라는 값을 대입해주고 있다.
• 두번째 줄 : 등호를 기준으로 오른쪽의 값을 왼쪽의 변수에 대입하고 있다.
  (오른쪽의 값을 먼저 연산하게 되는데 오른쪽의 값은 1 + 1로 결국 2라는 결과가 도출된다. 그 뒤, 오른쪽의 변수 a에 2라는 값을 대입한다.)

a += 1;  // a = a + 1
a += 2;  // a = a + 2
a -= 1;  // a = a - 1
a *= 3;  // a = a * 3
a /= 2;  // a = a / 2 

a++;     // a = a + 1
a--;     // a = a - 1
a**      // 유효하지 않은 코드
a//      // 유효하지 않은 코드

a라는 변수의 값을 1만큼 증가시키고 싶을 때는 위와 같이 더욱 짧게 표현할 수 있다.

1.7 유효하지 않은 숫자 연산

NaN : Not A Number라는 의미를 가진 특수한 값이다. 유효하지 않은 숫자 연산을 실행했을때 생성되곤 한다.

var a = 0;
var b = 0;
var c = a / b;

console.log(c);	// NaN

만약 어떤 값이 NaN인지 판별하고 싶다면 아래와 같이 isNaN이라는 함수를 사용하여 아래와 같이 판별할 수 있다.

var a = isNaN(3);
console.log(a); // false

var b = 10;
var c = isNaN(b);
console.log(c); // false

var d = NaN;
var e = isNaN(d);
console.log(e); // true

1.8 무한대 표현하기

var pInf = 10/0;			// 양의 무한대
console.log(pInf);	  	// Infinity

var nInf = 10 / -0;	 	// 음의 무한대
console.log(nInf);	  	// -Infinity

• Infinity : 양의 무한대
• -Infinity : 음의 무한대

1.9 숫자 판별하기

JavaScript에서 제공하는 기능들 중 typeOf라는 연산자가 있다. 이 연산자는 어떤 종류의 값인지를 판단할 때 사용될 수 있다.

2. String (문자열)

String 타입은 텍스트 데이터를 나타내는데 사용한다.

var a = typeof 3;
console.log(a); // "number"

따옴표로 감싸져 있는 number는 텍스트이다. 이러한 텍스트들을 문자열 혹은 String이라 부른다.

2.1 문자열 붙이기

숫자들을 더할 때와 마찬가지로 + 기호를 사용하여 아래와 같이 문자열을 붙일 수 있다.

var s1 = "something";
var s2 = "else";
var result = s1 + s2;

console.log(result); // "somethingelse"

2.2 문자열 비교

문자열은 아래와 같이 같고 다름을 비교할 수 있다.

var s1 = "abc";
var s2 = "abc";

var result1 = s1 === s2;  // s1과 s2가 같은지 확인하고 그 결과를 result1 변수에 담습니다.
console.log(result1); // true


var s3 = "abc ";  // 유의: 문자열 끝자리에 공백이 붙어있습니다.
var s4 = "abc";

var result2 = s3 !== s4;  // s3과 s4가 다른지 확인하고 그 결과를 result2 변수에 담습니다.
console.log(result2); // true

2.3 문자열 길이

.length를 이용하여 모든 문자열은 그 길이에 대한 정보를 알 수 있다.

var str1 = "abc";  // 3개의 텍스트를 포함하고 있는 문자열
console.log(str1.length); // 3

var str2 = "   ";  // 공백 3개
console.log(str2.length); // 3

console.log("graph-ql".length); // 8

2.4 문자열 인덱스(index)

문자열 종류의 값들은 인덱스 정보를 이용할 수 있다. 인덱스라는 정보는 위치/순서를 의미하는 것과 비슷하다고 생각하면 된다.

"abcdef"라는 문자열을 예로 들 경우,"abcdef"라는 문자열은 a - b - c - d - e - f의 순서로 만들어져 있으며 이런 정보를 담고 있는 것이 인덱스이다. 인덱스는 항상 0부터 시작하게 된다.

var str = "abcdef";
console.log(str[0]); // "a"

console.log("cde"[2]); // "e"

코드 상으로는 위와 같이 인덱스를 이용할 수 있다.

2.5 문자열 메서드

문자열에는 아래와 같이 다양한 기능(메서드)가 있다.

'6'.repeat(3);
'hi surim'.includes(' surim');
'what are you doing?'.startsWith('what ');
'I am doing FiNe'.endsWith('iNe');
'Are you sure?'.indexOf(' yo');
'Yeah I am sure'.slice(2, 5);
'I?doubt?that'.split('?');
'Why would you doubt my word?'.split('');
'You hAve BeEn DiSHonest'.toLowerCase();
'No wAy!'.toUpperCase();

3. Boolean (논리형)

Boolean타입의 값은 논리적 참, 거짓을 나타내는 true 와 false 뿐이다.

주로 조건문에 자주 사용하며 0, -0, null, false, NaN, undefined, 빈 문자열 ("")은 false로 간주된다. 문자열 "false"를 포함한 그 외 모든 다른 값은 초기값을 true로 설정한다.

Boolean 사용 시, 주의할 점

var o = new Boolean(true); // 이렇게 만들어 사용하면 안됨
var t = true; // 항상 이렇게 사용하기

4. null

null은 의도적으로 변수에 값이 없다는 것을 명시할 때 사용한다. JavaScript는 대소문자를 구별하므로 null은 Null,NULL 등과 다르다.

null 사용 시, 주의할 점

타입을 나타내는 문자열을 반환하는 typeOf연산자로 null 값을 연산해보면 null이 아닌 object가 나온다. 이는 자바스크립트 설계상의 오류이다.

var foo = null;
console.log(typeof foo); // object

따라서 null타입을 확인할 때는 typeOf 연산자 대신 일치 연산자(===)를 사용하여야 한다.

var foo = null;
console.log(typeof foo === null); // false
console.log(foo === null);        // true

5. undefined

선언 이후 값을 할당하지 않은 변수는 undefined 값을 가진다. 어떤 변수를 만들고 그 값을 정의해주지 않았을때나 존재하지 않는 객체 프로퍼티에 접근할 경우 undefined가 반환된다.

null vs undefined 용도의 차이

undefined는 단어의 의미 그대로 정의되지 않음이라는 뜻이며 값이 대입되지 않은 상태를 위해 많이 사용되며 아래의 예시처럼 어떤 변수를 만들고 그 값을 정의해주지 않았을 때 사용되곤 한다.

// 변수를 생성하고, 아무 값도 지정(정의)해주지 않음
var k;
console.log(k); // undefined

// 위의 코드처럼 아무 값도 대입해주지 않으면 기본으로 undefined라는 값이 대입되기 때문에,
// 아래 코드처럼 undefined를 명시적으로 대입해주는 코드는 잘 사용하지 않는다.
var o = undefined;
console.log(o); // undefined

null이라는 값은 undefined와 다르게 아래의 예처럼 의도적으로 값이 없음을 표현하고 싶을 때 대입해주곤 한다.

var obj = {
  name: 'ken'
};

// 위 obj를 이용한 작업을 실행함

// obj를 이용한 작업이 모두 종료되고,
// 더 이상 사용하지 않을 계획이라 obj를 의도적으로 없다고 표현함
obj = null;

null 또는 undefined를 검사할 때, 주의할 점

null 또는 undefined를 검사할 때, 동등 연산자(==)와 일치 연산자(===)의 차이를 주의해야한다. 동등 연산자는 자료형 변환을 수행한다.

typeof null          // "object" (하위호환 유지를 위해 "null"이 아님)
typeof undefined     // "undefined"
null === undefined   // false
null  == undefined   // true
null === null        // true
null == null         // true
!null                // true
isNaN(1 + null)      // false
isNaN(1 + undefined) // true

6. Symbol

심볼은 ES6에서 새롭게 추가된 타입으로 변경 불가능한 원시 타입의 값이다. 심볼은 주로 이름의 충돌 위험이 없는 유일한 객체의 Property Key를 만들기 위해 사용한다.

// 심볼 key는 이름의 충돌 위험이 없는 유일한 객체의 프로퍼티 키
var key = Symbol('key');
console.log(typeof key); 	// symbol

var obj = {};
obj[key] = 'value';
console.log(obj[key]);  	// value

객체 타입 (Object type, Reference type)

객체는 데이터와 그 데이터에 관련한 동작(절차, 방법, 기능)을 모두 포함할 수 있는 개념적 존재이다. 달리 말해, Property와 Method를 포함할 수 있는 독립적 주체이다.

JavaScript는 객체 기반의 스크립트 언어로써 JavaScript를 이루고 있는 거의 모든 것이 객체이다. 원시 타입을 제외한 나머지 값들(배열, 함수, 정규표현식 등)은 모두 객체이다. 또한 객체는 참조에 의한 전달 (pass-by-reference)방식으로 전달된다.

참고사이트

• Numbers - W3Schools
• Number Methods - W3Schools
• Number - MDN
• Javascript String - W3School
• Javascript String Methods - W3Schools
• 문자열 제대로 다루기 - MDN
• Javascript Booleans - W3Schools
• Boolean - MDN
• Boolean - PoiemaWeb
• null - MDN
• undefined - MDN
• d2fault - DataType
• Data Types - Javascript Info
• Javascript Data Types - W3Schools
• cidevkr - symbol
• hyunwoojo - symbol
• Vanilla Coding