반응형
데이터 분류
1. 원시 타입(Primitive Type)
- 원형데이터로 더이상 단순화 할 수 없는 값으로 데이터 및 정보의 가장 단순한 형태
- Boolean, String, Number, Undefined, Null, Symbol
2. 객체 타입(Object Type)
- 참조데이터로 기본 타입을 제외한 모든 타입이 포함
- 원형 데이터가 아닌 다른 데이터를 참조하는 데이터
- Array, Object, Date ...
데이터 타입 종류
타입 | 설명 |
Number | 숫자 |
string | 문자열 |
boolean | - true: any other value - false : 0, null, undefined, NaN |
null | 명확하게 빈 값인 경우 ※ type은 object 에 속함 |
undefined | 데이터가 정해지지 않은 상태 - 변수에 데이터를 대입하지 않은 경우 - 객체 속성에 값을 대입하지 않은 경우 - 파라미터에 값을 전달하지 않음경우 |
symbol | 고유한 식별자가 필요할 떄 동일한 데이터 값에 대해 구분 가능 |
wrapper | 자바스크립트가 기본적으로 제공하는, 원시 데이터형을 객체처럼 다룰 수 있도록 하기위한 객체 (숫자: number, 문자 : String, 불리언 : Boolean, null: x, undefind : x) |
object | single, item 등을 여러 개 묶어 한 단위로 선언된 것 |
// [Number]
let a = 12;
let b = 1.2;
const infinity = 1/0; // Infinity
const negativeInfinity = -1/0; // -Infinity
const nAn = 'not a number' / 0; // NaN
// bigInt (추가된 요소)
// 현재 크롬과 파이어폭스에서만 지원
const bigInt = 12323453434223352523424234n;
console.log(bigInt);
// [Undefined]
let a;
console.log(a);
const obj = {}
console.log(obj);
const func = (x)=>console.log(x);
console.log(func())
// [Symbol]
const symbol1= Symbol('id');
const symbol2= Symbol('id');
console.log(symbol1 === symbol2); // false
- 동일한 데이터를 동일한 심볼로 만들고자 할경우 Symbol.for();
const gSymbol1 = Symbol.for('id');
const gSymbol2 = Symbol.for('id');
console.log(gSymbol2 === gSymbol2); // true
- 바로 출력 시 오류 발생 하므로 .description하여 출력
console.log(`value: ${symbol2.description}`); // id
Symbol
- ES6에서 새롭게 추가된 원시 자료형
- 항상 고유하며 객체 속성의 식별자로 사용 가능
- 문자열이나 데이터의 값이 같아도 서로 다른 식별자로 인식
const name1 = Symbol('John')
const name2 = Symbol('John')
console.log(name1 == name2); // ⇒ false
객체 속성에 대한 식별자 활용
- 동일한 이름을 가진 속성에 대한 Symbol을 활용하여 서로 다른 식별자로 인식 가닝
- 심볼을 열거할 수 없어 심볼에 대한 반복을 통해 객체 속성의 값을 얻고자 할때는 Object.getOwnPropertySymsols(객체명)를 사용하고, 해당 속성에 접근 하고자 할 때 map 활용
const person = {
[Symbol('mike')]: 'man',
[Symbol('mike')]: 'boy',
};
/*
1. symbole을 반복 가능한 객체로 만든 뒤
2. map()을 활용하여 각 속성에 접근
*/
const symbols = Object.getOwnPropertySymbols(person);
console.log(symbols); // ⇒ [ Symbol(mike), Symbol(mike) ]
const val = symbols.map(symbol => person[symbol])
console.log(val); // ⇒ [ 'man', 'boy' ]
데이터 타입 확인
- null의 경우 object로 데이터 타입 반환
메서드 | 설명 | 반환 |
typeof 데이터 | 데이터 타입 확인 | 데이터 타입 Boolean, String, Number, Undefined, Null, Symbol, 함수를 제외한 Object, 함수 |
객체 인스턴스 확인
메서드 | 설명 | 반환 |
데이터 instanceof 객체 | 데이터가 객체의 인스턴스인지 확인 | boolean |
const date = new Date()
console.log(date instanceof Date); // ⇒ true
console.log(date instanceof Array); // ⇒ false
// 정의한 클래스의 인스턴스 여부
class TClass{}
const tClass = new TClass()
console.log(tClass instanceof TClass); // ⇒ true
값 변경 처리
1. 값에 의한 전달
- 원시 타입의 값 처리방식
- 기존 변수의 값이 변경되어도 다른 변수의 영향이 없음
let a = 100
let b = a
a= 20
console.log(a, b);// ⇒ 20 100
2. 참조에 의한 전달
- 참조 타입의 값 처리방식
- 기존 변수의 값이 변경되는 경우 다른 변수의 값도 같이 변경
let a = [1];
let b = a;
a.unshift(0);
console.log(a, b); // ⇒ [ 0, 1 ] [ 0, 1 ]
함수의 경우 함수 내 객체 타입에 따라 구분하여 처리
const func = (x) => (x = x + 1);
let a = 10;
// 함수 내 처리결과는 원시 타입 변수값에 영향을 주지 않음
func(a);
console.log(a); // ⇒ 10
const func2 = (x) => (x[0] = 1);
let b = [0, 2, 3];
// 함수 내 참조타입의 경우 값 변경됨
func2(b);
console.log(b); // ⇒ [ 100, 2, 3 ]
데이터 타입 변환
- 동적 타입 변환: 변수 선언 후 새로운 값 대입 시 자동으로 타입을 변환시켜줌
메서드 | 반환 | 예 |
Number(데이터) | 숫자 | 문자 ⇒ NaN '1', ; 1 ⇒ true 0, '' ⇒ false |
String(데이터) | 문자 | |
Boolean(데이터) | boolean | 1, 문자 ⇒ true 0, '' ⇒ false |
ParseInt(데이터) | 정수 - 소수점 이하의 숫자 버림 |
|
parseFloat(데이터) | 실수 |
데이터 타입 변환 종류
1. 암시형변환
- 자동으로 데이터 타입 변환
- 숫자와 문자 변환 시 위치에 따라 변환타입 변경될 수 있으므로 주의
console.log(1+'2'); // ⇒ '12'
console.log('2'-1); // ⇒ 1
console.log(1==='1'); // ⇒ false
console.log('1'==1); // ⇒ true
2. 명시형변환
- 타입 변환 메서드를 활용하여 데이터 타입 변환
반응형
'JS > Javascript' 카테고리의 다른 글
[Javascript] addEventListener() (0) | 2024.05.29 |
---|---|
[Javascript] 배열과 객체 복사 (얕은 복사, 깊은 복사) (0) | 2024.01.31 |
[Javascript] 배열 (0) | 2024.01.20 |
[Javascript] 문자 관련 메서드 (0) | 2024.01.20 |
[Javascript] 숫자 관련 메서드 (0) | 2024.01.16 |