본문 바로가기
자바스크립트

자바스크립트 데이터 타입

by 리양 2021. 7. 1.

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

 

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

 

 

 

 

'자바스크립트' 카테고리의 다른 글

배열(표기법,메서드,객체와의 차이점)  (0) 2021.07.02
참조타입(객체)의 특성  (0) 2021.07.01
배열 추가,삭제  (0) 2021.06.23
이벤트 심화(미완성)  (0) 2021.06.23
ajax  (0) 2021.06.07