JavaScript] 데이터타입

 

자바스크립트 데이터 타입
기본 타입	참조 타입
숫자(Number)	객체(Object)
문자열(String)	ㄴ 배열(Array)
불린값(Boolean)	ㄴ 함수(Function)
undefined	ㄴ 정규표현식
null

 

자바스크립트 기본 타입

자바스크립트는 느슨한 타입 체크 언어이다. ( 반대로 C나 Java는 엄격한 타입 체크 언어)

var intNum = 10; typeof intNum number

var singleQuoteStr = 'hello world'; typeof singleQuoteStr > string

var boolVar = true; typeof boolVar > boolean

var emptyVar; typeof emptyVar > undefined

var nullVar = null; typeof nullVar > object

var intNum = 10; typeof intNum number

var singleQuoteStr = 'hello world'; typeof singleQuoteStr > string

var boolVar = true; typeof boolVar > boolean

var emptyVar; typeof emptyVar > undefined

var nullVar = null; typeof nullVar > object

 

1. 숫자

자바스크립트는 모든 숫자를 64비크 부동 소수점 형태로 저장한다. (C언어의 double타입과 유사하다.)

! 나눗셈 주의

var num = 5/2 의 결과값은 2.5이다.

소수점 없애려면 Math.floor(num) 자바스크립트 메서드 사용. 

 

2. 문자열

작은따옴표(')나 큰 따옴표(")를 사용해서 생성

한번 생성한 문자열은 변경되지 않음

문자열은 배열처럼 인덱스로 접근 가능

var str = 'test';

console.log(str[0]) > t

 

3. 불린값

true와 false값을 가짐

 

4. null과 undefined

둘 다 값이 비어있음을 나타낸다.

undefined는 기본적으로 값이 할당되지 않은 변수를 undefined라고 하며, 값 또한 undefined이다.

null은 명시적으로 값이 비어있음을 나타낸다.

 

 

자바스크립트 참조 타입(객체 타입)

자바스크립트에서 객체는 '이름(key) : 값(value)' 형태의 프로퍼티들을 저장하는 컨테이너

 

1. 객체 생성

Object() 생성자 함수를 이용하는 방법, 객체 리터럴을 이용하는 방법, 생성자 함수를 이용하는 방법 총 3가지가 있다.

1.1. Object() 생성자 함수 이용

var foo = new Object();

foo.name = 'foo';

foo.age = 24;

console.log(typeof foo); > object

console.log(foo); // { name: 'foo', age: 24 }

 

1.2. 객체 리터럴 방식 이용

중괄호를 이용해서 객체를 생성한다. 아무것도 적지 않으면 빈객체가 생성된다.

var foo = {

name : 'foo',

age : 24

};

console.log(typeof foo); > object

console.log(foo); // { name: 'foo', age: 24 }

1.3. 생성자 함수 이용

 

2. 객체 프로퍼티 읽기/쓰기/갱신

객체 프로퍼티에 접근하기 위해서는 2가지 방식을 사용한다.

- 대괄호 표기법 ([])

- 마침표 표기법 .

foo.name = 'foo'

foo.age = 24

foo['name'] = 'dior'

* 자바스크립트 객체의 프로퍼티에 값을 할당할 때, 프로퍼티가 이미 있을 경우는 갱신되지만, 없는 경우에는 새로운 프로퍼티가 동적으로 생성된 후 값이 할당된다. *

//대괄호 표기법만 사용해야 할 경우

foo['full-name'] 과 같이 프로퍼티가 표현식이거나 -같은 연산자나 예약어가 들어갈 경우

foo.full-name하면 NaN이 나온다.

 

NaN이란?

Not a Number로 1 - hello같이 수치 연산을 해서 정상적인 값을 얻지 못할 때 출력되는 값이다.

 

3. for in 문과 객체 프로퍼티 출력

var prop;

for (prop in foo){

console.log(prop, foo[prop]);

}

/*

name 'foo'

age 24

*/

 

4. 객체 프로퍼티 삭제

delete 연산자를 이용해서 즉시 삭제할 수 있다.

delete foo.name // name 프로퍼티 삭제 시도

! delete foo // 객체는 삭제할 수 없음

 

참조 타입의 특성

var objA = { val : 40 };

var objB = objA;

일 때, A에 담긴 val 프로퍼티가 변경될 경우, objB의 val도 변경됨.

반대로 objB의 val 프로퍼티를 변경하면, objA의 val도 변경됨

 

1. 객체 비교

동등 연산자(==)를 사용하여 두 객체를 비교할 때는 참조값을 비교한다. (프로퍼티값이 아님)

var a = 10

var b = 10

var objA = { val : 100 };

var objB = { val : 100 };

var objC = objB;

console.log(a == b); // true

console.log(objA == objB); //false

console.log(objB == objC); // true

 

2. 참조에 의한 함수 호출 방식

기본 타입은 값에 의한 호출 방식

객체 타입은 참조에 의한 호출 방식

var a = 100;

var objA = { val : 100 };

function changeArg(num, obj){

num = 200;

obj.value = 200;

}

console.log(a); // 100

console.log(objA); // { value : 200 }

 

프로토타입

자바스크립트의 모든 객체는 자신의 부모 역할을 하는 객체와 연결되어 있다.

객체지향의 상속 개념과 같이 부모 객체의 프로퍼티를 마치 자신의 것처럼 쓸 수 있는 것과 같은 특징이 있다.

ex)

var foo = { val : 100 };

foo.toString();

foo의 프로토타입에 toString()메서드가 정의되어 있기 때문에, 에러가 발생하지 않는다.

 

배열

굳이 크기를 지정하지 않아도 된다. 어떤 위치에 어느 타입의 데이터를 저장하더라도 에러가 발생하지 않는다.

 

1. 배열 리터럴

자바스크립트에서 객체 리터럴은 {} 중괄호를 이용한 표기법이고, 배열 리터럴은 [] 대괄호를 사용한다. 

0인덱스이다.

 

2. 배열의 요소 생성

동적으로 배열 원소를 추가할 수 있다.

값을 순차적으로 넣을 필요 없이 아무 인덱스 위치에나 값을 동적으로 추가할 수 있다.

var emptyArr = [];

emptyArr[0] = 100;

emptyArr[3] = 'eight'

emptyArr[7] = true;

console.log(emptyArr.length) // 8

 

3. 배열의 length 프로퍼티

length 프로퍼티는 코드를 통해 명시적으로 값을 변경할 수도 있다.

var arr = [0, 1, 2];

arr.length = 5;

console.log(arr); // [0, 1, 2, undefined, undefined]

arr.push('four'); 하면 배열의 length 끝에 원소를 추가하게 된다.

 

4. 배열과 객체

배열과 객체 모두 typeof 연산 결과 object이다.

length 프로퍼티는 배열에만 존재한다.

push() 메서드도 배열에만 존재한다.

 

5. 배열의 프로퍼티 동적 생성

var arr = ['zero', 'one', 'two'];

console.log(arr.length); // 3

// 프로퍼티 동적 추가

arr.color = 'blue';

arr.name = 'number_array';

console.log(arr.length); //3

// 배열 원소 추가

arr[3] = 'red'

=> 배열도 객체처럼 'key : value'형태로 배열 원소 및 프로퍼티 등이 있음을 알 수 있다.

 

6. 배열의 프로퍼티 열거

5에서 쓰던 배열을 for in 문으로 출력하면 프로퍼티까지 출력된다.

for (var prop in arr) {

 console.log(prop, arr[prop]);

}

// 출력결과

0 zero

1 one

2 two

3 three

color blue

name number_array

 

for (var i = 0; i < arr.length; i++) {

 console.log(i, arr[i]);

}

0 "zero"

1 "one"

2 "two"

3 "three"

 

7. 배열 요소 삭제

delete arr[2]; 하면 2번 인덱스 값이 undefined로 설정된다.

요소를 완전히 삭제하려면 splice() 배열 메서드를 사용하자.

splice(start, deleteCount, item ...)

start - 배열에서 시작 위치

deleteCount - start에서 지정한 시작위치부터 샂게할 요소의 수

item 삭제할 위치에 추가할 요소

 

8. Array() 생성자 함수

두 가지 방식으로 인자에 따라 Array() 생성자 함수를 통해 배열을 생성할 수 있다.

var foo = new Array(3); // 길이가 3인 배열 생성

var bar = new Array(1, 2, 3); // 인자가 1, 2, 3인 배열 생성

 

9. 유사 배열 객체

일반 객체에 length 프로퍼티가 있으면? 이런 객체를 유사 배열 객체라고 부른다.

var arr = ['bar'];
bar obj = {
	name : 'foo',
    length : 1
};

arr.push('baz'); // ['bar', 'baz']
obj.push('bax'); // error

Array.prototype.push.apply(obj, ['baz']); // { '1' : 'baz', name : 'foo', length : 2 }

obj은 유사 배열 객체이지 배열이 아니므로 push()메서드를 호출할 경우 에러가 발생한다.

대신 apply()메서드를 사용하면 객체지만 표준 배열 메서드를 활용하는 것이 가능하다.

 

기본 타입과 표준 메서드

자바스크립트는 숫자, 문자열, 불린값에 대해 각 타입별로 호출 가능한 표준 메서드를 정의하고 있다.

하지만 기본타입의 경우는 객체가 아닌데 어떻게 메소드를 호출할 수 있나?

기본값은 메서드 처리 순간에 객체로 변환된 다음 각 타입별 표준 메서드를 호출하게 된다. 그리고 메서드 호출이 끝나면 다시 기본값으로 복귀하게 된다.

// 숫자 메서드 호출
var num = 0.5;
console.log(num.toExponential(1)); // 출력값 '5.0e-1'

// 문자열 메서드 호출
console.log("test".charAt(2)); // 출력값 's'

 

연산자

1. + 연산자

더하기 연산(모두 숫자일 경우)과 문자열 연결 연산을 수행

 

2. typeof 연산자

피연산자의 타입을 문자열 형태로 리턴

기본타입	숫자	'number'
기본타입	문자열	'string'
기본타입	불린값	'boolean'
기본타입	null	'object
기본타입	undefined	'undefined'
참조타입	객체	'object'
참조타입	배열	'object'
참조타입	함수	'function'

 

3. == (동등) 연산자와 === (일치) 연산자

== 연산자는 비교하려는 피연산자의 타입이 다를 경우 타입 변환을 거친 다음 비교

=== 연산자는 타입이 다를 경우 타입을 변경하지 않고 비교 (권장)

 

4. !! 연산자

피연산자를 불린값으로 변환

console.log(!!0); // false
consoel.log(!!1); // true
consoel.log(!!'String'); // true
console.log(!!''); // false
console.log(!!true); // true
consoel.log(!!false); // false
consoel.log(!!null); //false
consoel.log(!!undefined); // false
consoel.log(!!{}); // true
consoel.log(!![1,2,3]); //true

 

 

 

출처 ]

인사이드 자바스크립트 | 한빛미디어