자바스크립트 데이터 타입

자바스크립트의 데이터타입은 크게 두 종류로 나눌 수 있다.

 

1. 기본 타입(원시 타입: Primitive Type) 

• let( 또는 var) 이라는 한가지 키워드를 사용해서 변수를 선언한다.
• 그 자체가 하나의 값을 나타낸다.

 

 

  1) 숫자(number)

• 정수나 실수 구분 없이 숫자값을 저장. 
• 자바스크립트는 모든 수를 실수로 취급한다.

var num = 5/2; 
consol.log(num) // 2.5 (소수점과 함께 출력) 
console.log(Math.floor(num)); // 2 
// (소수부분을 버린 정수 부분만 출력하고 싶으면 Math.floor 메서드를 사용하면 됨)

 

 

  2) 문자열(string)

• 작은 따옴표(')나 큰 따옴표(")로 생성.
• 한번 생성된 문자열은 수정이 불가능하다.

var str = 'test'; 
// 문자열을 인덱스로 접근 
console.log(str[0], str[1]. str[2], str[3]); // 출력값 : test 

str[0] = 'T' //str[0] = t 를 대문자 T로 바꾸고 싶어! 
console.log(str) // 출력값 : test (하지만 바뀌지 않는다...)

 

  3) 불린값(boolean)

• true , false 값을 나타내는 타입

 

  4) undefined

• 값이 할당되지 않는 변수
• undefined 타입의 변수는 변수 자체의 값 또한 undefiend.

• var undef_01;	// 값을 할당하지 않고 변수 선언
  console.log(undef_01);	// undefined 
  console.log(typeof undef_01);	// undefined
  
  
  // * typeof : 데이터타입을 확인하기 위한 연산자
  
  

 

  5) null

• 명시적으로 값이 비어있음을 나타냄
• 주의할 점 : null의 typeof  의 결과값은 'object' 
• (왜 참조타입에 있어야하는게 찍히는지 의문이 들지만 초기 자바스크립트 버그 때문에 그런거랜다..)

• var nullVar = null ;
  
  console.log(typeof nullVar === null); // false( 얘의 typeof 는 object임)
  console.log(nullVar === null); // true
  
  // null타입 변수를 확인할 때는 typeof 연산자 말고 일치연산자(===를 사용해야함)

 

 

  6) 심벌(symbol)

• ES6부터 새로 생긴 데이터 타입.
• 변경불가능한 유일한 값을 생성할 때 사용하며, 값 자체의 확인이 불가하여 외부로 노출되지 않는다.
  
  

 

 

 

 

 

2. 참조 타입(객체 타입: Object/Reference Type)

• 기본타입을 제외한 모든 값
• '이름(key):값(value)' 형태로 프로퍼티들을 저장
• 객체가 보유한 값을 '프로퍼티'라고 하며, 객체가 보유한 함수를 '메서드'라고 한다.
• 객체는 여러가지 값을 가질 수 있으며, 함수도 가질 수 있다.

 

 

<객체 생성>

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

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

//Object()를 이용해서 foo 빈 객체 생성
var foo = new Object();

// foo 객체 프로퍼티 생성 
foo.name = 'foo';
foo.age = 30;
foo.gender = 'male';

console.log(typepf foo); // (출력값) object
console.log(foo); // (출력값) { name: 'foo', age: 30, gender: 'male' }

 

2. 객체 리터럴 방식 이용

• 중괄호 안에다 { 프로퍼티 이름 : 프로퍼티 값 } 형태로 표현

var foo = {
	name : 'foo',
	age : 30,
	gender: 'male',
	func1: function () {
		console.log('Hello World')
	}
}

 

 

3. 생성자 함수 이용 (4장 읽고 다시 수정하기)

 

자바스크립트의 생성자 함수는 말 그대로 자바스크립트의 객체를 생성하는 역할을 한다. 하지만 C++이나 자바와 같은 객체지향 언어에서의 생서자 함수의 형식과는 다르게 그 형식이 정해져 있는게 아니라, 기존 함수에 new 연산자를 붙여서 호출하면 해당 함수는 생성자 함수로 동작한다. 때문에 대부분의 자바스크립트 스타일 가이드에서는 특정 함수가 생성자 함수로 정의되어 있음을 알리려고 함수 이름의 첫 문자를 대문자로 쓰기를 권하고 있다.

 

 // Person() 생성자 함수
var Person = functino(name) {
		this.name = name;
}

// foo 객체 생성
 var foo = new Person('foo');
console.log(foo.name) // foo

 

 

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

객체 프로퍼티에 접근하는 방법

• 대괄호( [ ] ) 표기법
• 마침표( . ) 표기법

// 객체 리터럴 방식을 통한 foo 객체 생성
var foo = {
	name = 'gigajini'
    like = 'banana'
};


// 1.객체 프로퍼티 읽기
console.log(foo.name)	// gigajini (마침표 표기법 : 객체 다음에 마침표 찍고 원하는 속성값 적기)
console.log(foo['name']) // gigajini (대괄호 표기법 (반드시 문자열 형태로 작성!!))
console.log(foo.nickname) // undefinde (객체에 nickname이란 프로퍼티 없으므로..)


// 2.객체 프로퍼티 갱신
foo.like = 'strawberry'
console.log(foo.like)  // strawberry
console.log(foo['like'])  // strawberry


// 3.객체 프로퍼티 동적 생성
foo.age = 30;
console.log(foo.age); // 30 (새로운 프로퍼티 동적 생성)


// 4.접근하려는 프로퍼티가 표현식 or 예약어일때는 무조건 대괄호만!!
foo ['full-name'] = 'foo gigajini'; // 프로퍼티 동적 생성

console.log(foo['full-name']); // foo gigajini
console.log(foo.full-name); // NaN ( - 를 빼기로 인식함)

 

1. 대괄호 표기법 사용할 때는 접근하려는 프로퍼티를 문자열 형태 [ ' ' ] 로 만들어야함!!

 

console.log(name); 이라고 하면 undefined 가 뜸.

그 이유는 대괄호 표기법에서 접근하려는 프로퍼티의 이름을 문자열 형태로 만들지 않으면 

string() 이라는 메서드를 자동으로 호출해서 프로퍼티의 이름을 문자열로 바꾸려고 한다.

 

2. 프로퍼티 갱신 : 프로퍼티에 접근 후 변경 값을 입력한다.

 

3. 자바스크립트 객체의 프로퍼티에 값을 할당할 때

• 이미 있는 경우: 값 갱신
• 해당 프로퍼티가 없을 때 :  새로운 프로퍼티 동적으로 생성

4.프로퍼티가 표현식 or 예약어 = 무조건 대괄호 표기법!

 

console.log(foo.full-name) 값이 NaN로 나온 이유는 - 를  ' - ' 연산자로 인식했기 때문!!

※ NaN 값 : 수치 연산을 해서 정상적인 값을 얻지 못할 때 출력되는 값

 

 

 

 

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

for in 문을 사용하면, 객체에 포함된 모든 프로퍼티에 대해 루프를 수행할 수 있다.

// 객체 리터럴을 통한 foo 객체 생성

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

var prop;
for (prop in foo) {  // for in 문 수행 : props 에 foo의 프로퍼티들이 할당됨
	console.log(prop, foo[prop]) ; 
};    
    //결과값: name foo age 30

 

 

객체 프로퍼티 삭제

• delete 연산자 사용.
• delete 연산자는 객체의 프로퍼티만 삭제할 뿐, 객체는 삭제하지 못한다.

var foo = {
	name = 'foo'
    age = 30
}

//프로퍼티 삭제
delete.foo.name;
console.log(foo.name);  // undefined


//객체는 삭제하지 못한다.
delete.foo
console.log(foo.age); // 30