자바스크립트 데이터 타입

 

자바스크립트 기본 타입

• 자바스크립트는 느슨한 타입 체크 언어이다.
• 타입을 미리 정하지 않고 변수를 선언한다, 이렇게 선언한 변수에는 어떤 타입의 데이터도 저장 가능하다.
• 즉, 어떤 형태의 데이터를 저장하느냐에 따라 해당 변수의 타입이 결정된다!

 

숫자

• C언어의 경우 int ,long, float, double 등과 같은 다양한 숫자 타입이 존재한다.
• 하지만 자바스크립트는 하나의 숫자형만 존재한다.
• 모든 숫자를 64비트 부동 소수점 형태로 저장한다.
• 자바스크립트는 정수형이 따로 없고, 모든 숫자를 실수로 처리하므로 나눗셈 연산을 할 때는 주의가 필요하다.

var num = 5 / 2;
console.log(num); //2.5
console.log(Math.floor(num)); //2

• Java, C언어 같은 경우는 5/2를 실행하면 소수 부분을 버린 2가 출력되지만 자바스크립트에서는 2.5를 출력한다.
• 만약 소수 부분을 버린 정수 부분만을 구하고 싶다면 Math.floor() 함수를 써서 사용할 수 있다.

 

문자열

• 자바스크립트에서 한 번 정의 된 문자열은 새로운 메모리를 할당하기 전까지는 변하지 않는다

var str = "abc";

console.log(str[0], str[1], str[2]); //a b c

str[0] = 'A';
console.log(str) //abc

• 분명 str[0]의 값을 대문자 A로 바꿧지만 콘솔에는 "abc"가 찍히는것을 볼 수 있을 것이다.
• 즉 자바스크립트에서 한번 생성된 무자열은 읽기만 가능하지 수정은 불가능하다! 

 

불린값

• 자바 스크립트는 true와 false 값을 나타내는 불린 타입을 가진다.

var check = true;
console.log(typeof check); //boolean

 

null과 undefined

• 이 두타입은 모두 자바스크립트에서 '값이 비어있음'을 나타낸다. 
• 값이 할당되지 않은 변수는 undefined 타입이며, undefined 타입의 변수는 변수 자체의 값 또한 undefined이다.
• 즉, undefined는 타입이자, 값을 나타낸다!

var hello;
console.log(hello); //undefined

 

• null타입은 개발자가 명시적으로 값이 비어있음을 나타내는 데 사용한다.
• null타입의 typeof 결과는 null이 아니라 object이다.
• 때문에 null타입 변수인지 확인하기 위해서는 ===을 사용해서 변수의 값을 직접 확인해야 한다.

var nullVar = null;
console.log(nullVar===null); //true

 

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

• 숫자, 문자열, 불린값, null, undefined 같은 기본 타입을 제외한 모든 값은 객체다.
• 따라서 배열, 함수, 정규표현식 등도 모두 결국 자바스크립트 객체로 표현된다.
• 자바스크립트 객체는 key : value 형태의 프로퍼티들을 저장하는 컨테이너다.
• 기본 타입은 하나의 값을 가지는 데 비해, 참조 타입은 여러개의 프로퍼티를 포함시킬 수 있다.

 

객체 생성

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

• 자바스크립트에서는 객체를 생성할 때, 내장 Object() 생성자 함수를 제공한다.

var foo = new Object();

foo.name = "foo";
foo.age = 30;
foo.gender = 'male';

console.log(typeof foo);
console.log(foo);

foo 자체를 출력하면 key:value 쌍으로 나오는것을 확인할 수 있다.

 

 

2. 객체 리터럴 방식 이용

• 리터럴 이라는 의미는 표기법이라고 생각하면 된다. 따라서 객체 리터럴이란 객체를 생성하는 표기법을 의미한다.
• 객체 리터럴은 중괄호 ( {} )를 이용해 객체를 생성한다.
• {}안에 아무것도 적지 않느다면 빈 객체가 생성되며, 중괄호 안에 "key":"value" 형태로 포기하면 해당 프로퍼티가 추가된 객체를 생성할 수 이다.
• 프로퍼티 이름은 문자열이나 숫자가 올 수 있다.

var foo = {
    name: 'foo',
    age: 30,
    gender : 'male'
}

console.log(typeof foo);
console.log(foo);

객체 생성자를 이용했을 때와 같은 결과를 확인할 수 있다.

 

 

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

• 객체의 프로퍼티에 접근하기 위해서는 두가지 방법을 이용한다
• 대괄호 ( [ ] ) 표기법
• 마침표 ( . ) 표기법

//객체 리터럴 방식을 통한 foo 객체 생성
var foo = {
    name: 'foo',
    major: 'computer science'
};

//객체 프로퍼티 읽기
console.log(foo.name); // foo
console.log(foo.major); // foo
console.log(foo['name']); //computer science
console.log(foo['major']); //computer science
console.log(foo.id); // undefined
console.log(foo['id']) // undefined

//객체 프로퍼티 갱신
foo.major = 'electronics engineering';
console.log(foo.major); // electronics engineering
console.log(foo['major']); //electronics engineering

//프로퍼티 동적생성
foo.age = 54;
console.log(foo.age); ///54
console.log(foo['age']); //54

//대괄호 표기법만을 사용해야 할 경우
foo['full-name'] = "foo bar";
console.log(foo.full - name); //NaN
console.log(foo['foo-name']); //foo bar

객체 프로퍼티에 접글할 때 대괄효 표기법만을 사용해야 하는 경우가 있다.

• 접근하려는 프로퍼티가 표현식
• 접근하려는 프로퍼티가 예약어

console.log(foo.full-name) 과 같은 경우는 '-' 연산자가 있는 표현식이다.

즉 full -(빼기) name 처럼 말이 안되는 식이라는 소리다. 

 

 

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

//객체 리터럴을통한 foo객체 생성
var foo = {
    name: 'foo',
    age: 30,
    gender : 'male'
}

//for in 문을 이용해 출력
var prop;
for (prop in foo) {
    console.log(prop, foo[prop]);
}

prop이라는 변수에 foo객체의 key값이 하나씩 담긴다.

즉 foo[prop] 은  foo['name'], foo['age'], foo['gender']와 같이 사용된다!

 

 

객체 프로퍼티 삭제

자바스크립트에서는 객체의 프로퍼티를 delete 연산자를 이용해 즉시 삭제가능하다.

여기서 주의할 점은 delete 연산자는 객체의 프로퍼티를 삭제할 뿐, 객체 자체를 삭제하지는 못한다.

//객체 리터럴을통한 foo객체 생성
var foo = {
    name: 'foo',
    age: 30,
    gender : 'male'
}

console.log(foo.name); // 'foo'
delete foo.name;
console.log(foo.name); //undefined

delete foo; //객체 자체를 삭제 시도
console.log(foo.age) //30  -> delete로 객체 자체 삭제x

 

객체 비교

( == ) 를 사용하여 두 객체를 비교할 때, 객체의 프로퍼티 값이 아닌 참조값을 비교한다.

var a = 100;
var b = 100;

var ObjA = { value: 100 };
var ObjB = { value: 100 };

console.log(a == b); //true
console.log(objA == objB); // false

• a, b는 기본타입이기 때문에 프로퍼티 값을 비교한다. -> 100 = 100 true
• 반면에 ObjA 와 ObjB는 객체이기 때문에 프로퍼티 값이 아닌 참조값을 비교한다 -> false

 

참조에 의한 함수 호출 방식

• 기본 타입과 참조 타입의 경우 함수 호출 방식도 다르다.
• 기본 타입의 경우는 값에 의한 호출(Call By Value)방식으로 동작
• 참조 타입의 경우 참조에 의한 호출(Call By Reference)방식으로 동작

 

프로토타입

• 자바스크립트의 모든 객체는 자신의 부모 역할을 하는 객체와 연결되어 있다.
• 마치 객체지향의 상속 개념과 같이 부모객체의 프로퍼티를 자신의것처럼 사용할 수 있다.
• 자바스크립트에서는 이러한 부모 객체를 프로토타입 객체(프로토타입)이라고 부른다.

var foo = {
    name: 'foo',
    age: 30
};

console.log(foo.toString());
console.dir(foo);

• 객체 리터럴 방식으로 foo객체를 생성하고, 이객체의 toString()메서드를 호출하였다.
• 그런데 왜 에러가 바생하지 않고 정상적으로 결과가 호출된걸까?
• 바로 foo객체의 프로토타입에 toString()메서드가 정의되어 있기 때문이다.

 

ECMAScript 명세서를 보면 자바스크립트의 모든 객체는 자신의 프로토타입을 가리키는 [[Prototype]]라는 숨겨진 프로퍼티를 가진다고 설명한다.

크롬 브라우저에서 _proto_가 바로 이 숨겨진 [[Prototype]]이라는 프로퍼티인 것이다.

 

 

배열

• 배열은 자바스크립트 객체의 특별한 형태다.
• C나 JAVA의 배열과 같은 기능을 하지만, 크기 지정을 하지 않아도 되며, 어느 타입의 데이터를 저장하더라도 에러가 발생하지 않는다.

 

배열 리터럴

• 배열 리터럴은 자바 스크립트에서 새로운 배열을 만드는데 사용하는 표기법이다.
• 객체 리터럴이 ( { } )를 이용한 표기법이었다면 배열 리터럴은 ( [ ] )를 사용한다.

var colorArr = ["red", "blue", "yellow"];
console.log(colorArr[0]); //red
console.log(colorArr[1]); //blue
console.log(colorArr[2]); //yellow

 

배열의 요소 생성

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

colorArr[4] = "black"
console.log(colorArr[4]); //black

 

배열의 length 프로퍼티

• 자바 스크립트의 모든 배열은 length 프로퍼티가 있다.
• length 프로퍼티는 배열 내 가장 큰 인덱스에 1을 더한 값이다.

var colorArr = ["red", "blue", "yellow"];
console.log(colorArr[0]); //red
console.log(colorArr[1]); //blue
console.log(colorArr[2]); //yellow

colorArr[4] = "black"
console.log(colorArr[4]); //black

console.log(colorArr.length)// 5

 

배열 표준 메서드와 length 프로퍼티

• 자바스크립트는 배열에서 사용 가능한 표준 메서드를 지원한다.
• 이러한 배열 메서드는 length 프로퍼티를 기반으로 동작한다.

예를 들어 push() 메서드를 보자

인수로 넘어온 항목을 배열의 맨 끝에 추가하는 자바스크립트 표준 배열 메서드다.

이 메서드는 배열의 현재 length 값의 위치에 새로운 원소값을 추가한다!

 

 

배열과 객체

• 자바스크립트에서는 배열 역시 객체다.
• 하지만 배열은 일반 객체와 약간 차이가 있다.

//colorsArray 배열
var colorsArray = ["red", "blue", "yellow"];
console.log(colorsArray[0]); //red
console.log(colorsArray[1]); //blue
console.log(colorsArray[2]); //yellow

//colorsObj 객체
var colorsObj = {
    '0': "red",
    '1': "blue",
    '2': "yellow",
};
 
//typeof 비교
console.log(typeof colorsArray);// object (not array)
console.log(typeof colorsObj); //object

//length 프로퍼티
console.log(colorsArray.length);// 3
console.log(colorsObj.length); //undefined

 

• 앞서 객체의 프로퍼티에 접근을 할 때 대괄호 안에서 접근하려는 포로퍼티 속성을 문자열 속성으로 해야 한다고 했다.
• 때문에 colorsArray['0']으로 하는게 맞다. 왜일까 ??
• 바로 자바스크립트 엔진이 []연산자 내에 숫자가 사용될 경우, 해당 숫자를 자동으로 문자열 형태로 바꿔주기 때문이다!

typeof 연산자 비교

• 배열과 객체 모두 object이다!!!!!!!!!!!!!
• 즉 자바스크립트도 배열을 객체라고 생각한다는 뜻이다.

 

length 프로퍼티 존재 여부

• 배열에는 length 프로퍼티가 존재하지만 객체에는 존재하지 않는다.

 

배열의 프로퍼티 동적 생성

• 배열도 자바스크립트 객체이므로, 인덱스가 숫자인 배열 원소 이외에도 객체처럼 동적으로 프로퍼티를 추가 할 수 있다.

//리터럴 형식으로 배열 생성
var arr= ['zero', 'one', 'two'];
console.log(arr.length); //3

//프로퍼티 동적 추가
arr.color = "blue";
console.log(arr.length); //3
console.dir(arr);

• 여기서 중요한 점은 배열에 동적 프로퍼티가 추가될 경우에는 배열의 length값이 증가하지 않는다는 것이다.

 

splice(start, deleteCOunt, item....)

• start : 배열의 시작 위치
• deleteCount : start에서 지정한 시작 위치부터 삭제할 요소의 수
• item : 삭제할 위치에 추가할 요소

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

arr.splice(2, 1)// 2번인덱스부터 1개 삭제
console.log(arr)// ["zero", "one", "three"]
console.log(arr.length) // 3

 

연산자

typeof 연산자

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

 

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

• 자바스크립트에서는 두 값이 동일한지를 확인하는 데, 두 연산자 모두 사용가능하다
• 차이점은 ==연산자는 비교하려는 피연산자의 타입이 다를경우 타입 변환을 거친 다음 비교한다.
• 반면 ===연산자는 타입이 다를 경우 타입을 변경하지 않고 그냥 비교한다.

console.log(1 == '1' ) //true
cnosole.log(1 === '1') //false

 

!!연산자

• 자바스크립트를 보다 보면 !!와 같이 !연산자를 두개 붙여서 사용하는 경우가 있다.
• !!의 역활은 피연산자를 불린값으로 변환하는 것이다.

 

 

참고

kimtaehyun98.tistory.com/58

book.naver.com/bookdb/book_detail.nhn?bid=7400243