자바스크립트의 데이터타입은 크게 두 종류로 나눌 수 있다.
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 |