Javascript의 데이터 타입

Javascript의 데이터 타입

javascript에는 총 다섯가지의 기본적인 데이터 타입이 존재하며 이를 원시 데이터 타입 이라고 한다. 사실 Javascript 내에서의 Array의 경우, 타언어에서처럼 실제 Array가 아니라 그냥 단순히 Object의 연속된 나열이라고 생각하기에 Array의 경우 이 데이터 타입에서는 제외시켰다.

Number

  • 가장 기본이 되는 데이터 타입
1
2
3
4
5
6
7
//number1은 number 형으로 변수를 선언
var number1 = 1;
//number1은 string 형으로 변수를 선언
var number2 = '1';

console.log(number1 == number2); // result : true;
console.log(number1 === number2); // result : false;
  • 형변환
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/*
* 암시적 형변환
- 자바스크립트 엔진이 필요에 의해 암시적으로 형을 자동으로 변환시키는 것
- 문자열이 숫자 문맥에 사용되면 자동으로 변환
*/
var num1 = "1"; //string
var num2 = "2"; //string
var result = num1 * num2;
console.log(typeof result); //result : number
/*
* 명시적 형변환
- 개발자가 자바스크립트를 이용하여 직접 변환할 타입을 지정해주는 것
- 숫자에 빈 문자열을 더하면 된다.
*/
var num1 = "1";
console.log(typeof num1); //result : string
num1 = Number(num1); //문자형 데이터를 숫자형 데이터로 변환
num1 = parseInt(num1); //문자형 데이터를 숫자형 데이터로 변환 + 숫자가 아닌 경우 자체 삭제
  • NaN(Not a Number)은 숫자형 값 중 하나로, 해당 값을 반환하는 경우는 의도한 조작이 실패했을 경우이다.
  1. Error 가 아님을 유의
  2. 예를 들어 타 프로그래밍 언어에서는 string타입의 변수를 숫자로 나누려 하면 Error를 반환하며 코드 실행을 멈추지만, 자바스크립트에서는 Nan을 반환하며 나머지 코드는 실행한다.
  3. NaN 이 포함된 조작은 항상 Nan을 반환 eg: Nan/10 ==> return NaN
  4. Nan은 어떠한 값과도 일치하지 않으며, NaN끼리도 일치 하지 않는다.
  5. isNaN(NaN) 함수를 이용할 수 있음

String

  • 기본적으로 문자열은 ‘’(작은 따옴표) 혹은 “”(큰 따옴표)로 감싸서 표현
1
2
3
4
var str = "This is String";
str.charAt(10) //result : 'r', str의 변수 안에서 index가 10인 글자를 반환
str.substring(1,10) //result : 'his is St', str의 변수 안에서 index 기준 1에서부터 10에 해당하는 글자를 반환
str.indexOf("String") //result : 8, str의 변수 안에서 "String" 에 해당하는 index번호를 반환
  • 형변환
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/*
* 암시적 형변환
- 자바스크립트 엔진이 필요에 의해 암시적으로 형을 자동으로 변환시키는 것
- 숫자에 빈 문자열을 더하면 된다.
*/
var num = 1;
console.log(typeof num); //result : number
num = num + "";
console.log(typeof num); //result : string
/*
* 명시적 형변환
- 개발자가 자바스크립트를 이용하여 직접 변환할 타입을 지정해주는 것
- 숫자에 빈 문자열을 더하면 된다.
*/
var num = 1;
console.log(typeof num); //result : number
num = toString(num);
console.log(typeof num); //result : string

Object

  • 자바스크립트의 핵심( 자바스크립트는 객체기반의 스크립트언어)
  • Property와 Method로 이루어져 있음.
1
2
3
4
5
6
var thatPerson = {
name : "김철수",
age : "15",
haveGirlFriend : false
}
//김철수라는 이름을 가졌으며, 나이는 15살, 애인은 없음
  • 객체 리터럴 표기법은 프로퍼티를 여러 개 쓸 경우, 가독성을 확보하는 용도로만 쓸 것을 권장( 아래와 같이 매개변수를 여러개 넘길 경우 많이 사용 )
1
2
3
4
5
6
7
8
9
10
11
12
13
var thatPerson = {
name : "김철수",
age : "15",
haveGirlFriend : "없음"
}
function rendering(props){
var str ="";
str += props.name + "라는 이름을 가진 사람의 나이는"; // === str += props["name"] + "라는 이름을 가진 사람의 나이는";
str += props.age + "살이며, 애인은 "; // === str += props["age"] + "살이며, 애인은 ";
str += props.haveGirlFriend + "니다."; // === str += props["haveGirlFriend"] + "니다.";
return str;
}
console.log(rendering(thatPerson)); //result : 김철수라는 이름을 가진 사람의 나이는15살이며, 애인은 없음니다

null

  • 빈 객체를 참조하는 특별한 값. null 이라는 값이 들어 있다.
  • 변수를 정의할 때, 객체를 가르키게 할 경우 null 값을 할당해주는 것을 권장
  • 자바스크립트가 생긴 이래로 계속 존재해오던 버그

undefined

  • 변수를 정의하였으나 초기화하지 않았을 경우의 데이터 타입
  • null 값에서 파생된 데이터 타입
  • 초기화 하지 않은 경우 undefined라면 변수의 default값은 undefined 라는 의미
  • 명시적으로 undefined를 할당하지 않더라도, 기본값으로 저장되기에 undefined를 지정하면 안됨

    일부에서는 명시적으로 지정하면 안된다고 나오지만, 상황에 따라서 delete 연산자를 쓰기보단 오히려 명시적으로 undefined를 할당하는 것을 권장

Boolean

  • ECMAScript 에서 가장 많이 쓰이는 데이터 타입
  • 값으로는 ‘true’ 혹은 ‘false’ 만 존재
현재 이커머스회사에서 frontend 개발자로 업무를 진행하고 있는 Martin 입니다. 글을 읽으시고 궁금한 점은 댓글 혹은 메일(hoons0131@gmail.com)로 연락해주시면 빠른 회신 드리도록 하겠습니다. 이 외에도 네트워킹에 대해서는 언제나 환영입니다.:Martin(https://github.com/martinYounghoonKim
Var, Let, Const 변수 선언의 차이점