JavaScript - 기본형과 참조형 타입의 종류?

김민재·2021년 7월 24일
WeCode키워드 심화 공부
0

TIL, Deep Javascript

목록 보기
4/22
post-thumbnail

*🔐Study Keyword :

✅자바스크립트의 다양한 🔑데이터 타입의 종류와 🔑활용법에 대해 익혀보장.

- 데이터 타입(Data Type)

  • WHAT IS❓ 데이터 타입은 값의 종류를 말한다. 자바스크립트의 모든 값은 데이터 타입을 갖는다.
    자바스크립트는 7개의 데이터 타입을 제공하는데 크게는 원시타입과 참조타입으로 분류할 수 있다.
  • WHY & WHNE USE❔❕
    EX> 숫자 타입의 값 1과 문자열 타입의 '1'은 생성한 목적과 용도가 다르다.
    -숫자 타입의 값은 주로 산술과 연산을 위해 생성하고 문자열 타입의 값은 텍스트를 화면에 출력하기 위해서 생성한다.
    -또 확보해야할 메모리 공간의 크기도 다르고 메모리에 저장되는 2진수도 다르며 읽어 들여 해석하는 방식에도 차이가 있다.

🗝️기본형 데이터 타입(primitive Data type)의 종류

  • 기본형 타입에는 숫자, 문자열, boolean, null, undefined이 있고 ES6에서 Symbol이 추가되었다.

1) 숫자(number)

  • WHAT & WHY❓ 숫자형 자료형은 배정밀도 64비트 부동 수점 형식의 2진수로 저장되어 숫자형타입 단 하나만 존재한다.
    -따라서 모든 수를 실수로 처리하며, 정수 표현하기 위한 데이터타입이 별도로 존재하지 않는다. 따라서 정수로 표시된다해도 사실은 실수라는 것을 의미한다.
  • HOW TO USE❕❓ 
<script>
console.log(1===1.0)
//true, 숫자 타입은 모두 실수처리.
</script>
  • 숫자타입은 추가적으로 세 가지의 특별한 값도 표현할 수 있다.
    -infinity(양의 무한대)
    -negative infinity(음의 무한대)
    -NaN(산술 연산 불가, not-a-number)
<script>
console.log(infinity);//infinity
console.log(negativeInfinity);//-Infinity
console.log('not a number' / 2;); //NaN
</script>

2) 문자열(string)

  • WHAT & WHY❓ 문자열 타입은 텍스트 데이터를 나타나는 데 사용한다.
  • HOW TO USE❕❓ 문자열은 (''),(""),(``)으로 텍스트를 감싸서 사용한다.문자열을 따옴표로 감싸는 이유는 식별자와 같은 토큰과 구분하기 위해서이다.
<script>
cosnt string //문자열 타입
string = '문자열'
string = "문자열"
string = `문자열`
</script>
  • WHAT & WHY❓ 템플릿 리터럴(ES6 이후 도입)은 새로운 문자열 표기법이다.
    템플릿 리터럴은 멀티라인 문자열, 표현식 삽입, 태그드 템플릿 등 편리한 문자열 처리 기능을 제공해준다.
  • HOW TO USE❕❓ 일반적인 따옴표 대신 백틱(``)을 사용해 표현한다.
    1>멀티라인 문자열
  • 일반 문자열에서 이스케이스 시퀀스(일반 문자열 내에서 사용하여 공백등을 표현할 수는)쓰는 것과 달리 템플릿 리터럴 내에서는 줄바꿈이 허용이된다.

    2>표현식 삽입
  • 일반 문자열에서 +연산자를 사용해 연결하는 것과 달리 표현식 삽입, ${}을 통해 간단히 문자열 삽입 가능하다. 이때 문자열 타입으로 강제로 변환되어 삽입된다.

3) 불린언(boolean)

  • WHAT & WHY❓ 불리언 타입의 값은 논리적 찹, 거짓을 나타내는 true와 false뿐이다.
    -false 꺼져있다는 뜻으로 값으로 0, null, undefined, NaN, '' 모두 간주된다.
    -true 켜져있는 뜻으로 값으로 any other value, 1이나 string 모두 true로 간주한다.
  • HOW TO USE❕❓

4) undefined

  • WHAT & WHY❓ undefiend는 변수가 선언하여 존재지만 정의되지 않은 상태이다. 즉 컴퓨터 메모리 안에는 존재하여 공간은 있지만 값이 들어가 있지 않은 것이다.
    -undefined는 자바스크립트 엔진이 변수를 초기화 할 때 사용하는 값으로 변수 참조시 undefined가 반환됨은 초기화 되지 않은 변수라는 것을 의미한다.
  • HOW TO USE❕❓ 자바스크립트 엔진은 사용자가 응당 어떤 값을 지정할 것이라고 예상되는 상황임에도 실제로 그러지 않았을 때 3가의 경우 undefined를 반환합니다.
    1> 값을 대입하지 않은 변수, 즉 데이터 영역의 메모리 주소를 지정하지 않은 식별자에게 접근할 때
    2> 객체 내부의 존재하지 않은 프로퍼티에 접근하려고 할 때
    3> return 문이 없거나 호출되지 않은 함수의 실행결과일 때
<script>
const a;
console.log(a)// 1> undefined,초기화 즉 값을 대입하지 하지 않은 변수
const obj = {a : 1}
console.log(obj.b)//undefined, 존재하지 않는 프로퍼티에 접근 
console.log(b) // 2> ReferenceError: b is not defined
const func = function(){}
const c = func();
console.log(c)// 반환 값이 없으면 undefined를 반환한 것을 ㅗ간주
</script>

5) null

  • WHAT & WHY❓ null은 변수에 값이 아무것도 없는 상태를 의도적으로 명시한다. 즉 비어있는 값을 표현한 것이다.
  • HOW TO USE❕❓

💡CAUTION)

-typeof null은 object인데 이는 자바스크립트 자체의 버그이다. 따라서 변수 값이 null인지 여부를 판단하기 위해선 typeof 대신 일치 연산자를(===) 써야한다.

<script>
const n = null;
console.log(typeof n)// ojcect
console.log(n == undefined)// true
console.log(n == null)// true
console.log(n === undefined)// false
console.log(n === null)// false
</script>

🔅undefiend vs null?!🔅)

모두 '없음'을 나타내는 값이지만 undefiend는 어떤 변수에 값이 존재하지 않을 경우를 의미하고 null은 사용자가 명시적으로 '없음'을 표현하기 위해 대입한 값이다

6) 심볼(symbol)

  • WHAT & WHY❓ 심벌 값은 다른 값과 중복되지 않은 유일무이한 값이다.
    -symbol은 이름이 충돌할 위험이 없는 객체의 유일한 프로퍼티 키(고유한 식별자)를 만들거나 우선 순위를 주고 싶을 때 사용한다.
  • HOW TO USE❕❓
    -심벌 이외의 원시 값은 리터럴을 통해 생성하지만 심벌은 Symbol함수를 호출해 생성한다. 생성된 심벌 값은 외부에 노출되지 않고 다른 값과 중복되지 않는 유일무이한 값이다.
<script>
const key1 = Symbol('key');//심벌 값 생성
const key2 = Symbol('key');
console.log(key1 === key2); //false;
const Symbol1 = Symbol.for('key');//Symbol.for(), 해당 키에 해당하는 심볼이 있다면 반환하고 없으면 새로운 심볼을 만들고 반환한다.
const Symbol2 = Symbol.for('key');
console.log(Symbol1 === Symbol2); // true
console.log(`value: ${key1.description}, type: ${typeof symbol1}`);
//출력시 항상 .description으로 string으로 변환해줘야한다.
</script>

🗝️참조형 데이터 타입(Reference Data Type/ Object Data Type)의 종류

  • 참조형 데이터에는 **객체(object)**가 있고 객체의 하위 부류로 배열(Array), 함수(Function), 날짜(Date), 정규표현식(RegExp), ES6에서 추가된 Set, WeekSet, Map, WeekMat 등이 있습니다. 즉 **모두가 객체(object)로 귀결된다.**

- 객체(object)


-WHAT IS❓

  • 객체(object)란 실생활에서 우리가 인식할 수 있는 사물로 키 또는 이름(key or name)과 값(value)으로 구성된 프로퍼티(property)의 정렬되지 않은 집합을 의미합니다.
    EX> 테이블과 비교하면 실생활에서의 테이블 역시 객체로 다리 갯수, 재질, 색깔 등의 속성(프로퍼티)을 가지고 있듯이 자바스크립트의 객체는 이러한 특징을 결정짓는 여러가지 프로퍼티를 지니고 있다.

-WHY & WHNE USE❔❕

  • 객체의 핵심은 관련된 데이터 및 기능을 저장하는 컨테이너 역할을 하는 것입니다.
    -객체는 데이터들을 담는 컨테이너로서 ellie라는 객체를 만들면 name, age와 같은 property(= 객체에 붙은 변수로 객체의 특징을 규정한다.) 데이터를 저장하여 보다 구체적인 설명을 넣어줄 수 있게된다.
<script>
const ellie = { name: 'ellie', age: 20 };
//elle는 const키워드로 정의되어 메모리의 포인터는 잠겨있어 다른 object로 할당이 불가하다.
ellie.age = 21; 
//그러나 object안에는 name과 age 변수들이 존재하여 '.'연산자를 통해 다른 값으로 할당이 가능하다.
</script>

-HOW TO USE❕❓
1.객체 이니셜라이저(initializer, 리터럴 표기에 의한 객체 생성)를 이용하여 객체를 생성할 수 있다.
2.다른 방법으로는 먼저 생성자 함수를 정의한 후 이 함수와 new 연산자를 이용하여 인스턴스를 만들수 있다.

1.리터럴 표기(literal notation)를 이용한 방법

  • 자바스크립트는 다른 유형과 마찬가지로 변수에 할당할 수 있고 중괄호('{}')를 사용여 객체 리터럴을 지정한다.
  • 객체 안엔 프로퍼티는 "키"(key)과 "값"(value)이 쌍으로 연결된 프로퍼티
    데이터들을 저정한다.
    1>키는 메모리에서 값을 담고 있는 위치를 가리키는 변수 이름과 같다.
    2>값은 함수(프로퍼티 값이 함수, 메소드) 또는 다른 객체를 포함한 언어의 모든 데이터 유형일 수 있다..
<script>
const player = {
  name : "jamie", // 키(=식별자)와 값은 콜론(:)으로 키-값 쌍을 만든다. 
  point: 10, // 객체 리터럴의 경우 키-값 쌍을 쉼표(,)로 구분한다.
  student: true,
};
// object의 property에 접근하는 두 가지 방법 
console.log(player.name); //도트 표기법 - 객체이름.프로퍼티 키
console.log(player["name"]); // 대괄호 표기법 - 객체이름["프로퍼티키"]
// object의 property 업데이트
player.student = false; // property의 값 변경 - 속성이 객체에 있는 경우 값이 새로 할당된 값으로 바뀐다.
player.lastName = "Kim" //property 할당 -  속성이 객체 없는 경우 새 속성이 객체에 추가된다. 
delete player.lastName; // property 삭제 - delete 연산자를 사용하여 속성을 삭제할 수도 있다.
</script>
  • 객체의 메소드 참조 시
<script>
const player = {
  point: 10,
  newPoint : 20,
  sum : function(){ // 키는 메소드 명의 역할을 값은 익명 함수 표현식이 된다. ES6에선 콜론(:)표시 생략할 수 도 있다. 
  	return this.points + this.newPoint;
  }
};
//object의 property 값이 함수인 메소드 참조 시
player.sum() // 메소드 참조 - 객체이름.메소드이름()
</script>
  • 중첩된 객체들
<script>
const player = {
	mainPlayer: {
    	 name : "jamie",
		 allPoint: [10, 20, 30]
    },
    subPlayer: {
    	name : "minjae",
	 	allPoint: [
       {firstTry: 30},
        {secondTry: 30},
         {thirdTry: 20}
       ]
    }
};
//nested object의 property에 접근 시
const result = player.subPlayer.allPoint[0]; // player 객체의 속성(sub player객체)의 속성인 allPoint, 객체 배열에 첫 번째 값 - 
console.log(result) // { firstTry: 30 }
//nested object의 property에 새로운 값 할당 시
const result2 = player.subPlayer.allPoint[4] = {forthTry: 20}
console.log(result2) //{ forthTry: 20 }
</script>
  • 객체를 참조로 전달
    -객체에 할당 된 변수를 함수에 인자로 전달하면 컴퓨터는 그 매개변수 이름을 해당 객체가 있는 메모리의 공간을 가리키는 것으로 해석한다. 
<script>
const player = {
	name : "jamie",
	allPoint: [10, 20, 30]
};
const getAvg = obj => {
  obj.avg = obj.allPoint.reduce(function add(sum, crr){
  //배열의 총합을 구하는 메소드를 활용하여 포인트의 평균을 리턴값으로 받았다.
    return sum + crr/obj.allPoint.length;
  });
}
getAvg(player);
console.log(player);//{ name: 'jamie',allPoint: [ 10, 20, 30 ], avg: 26.666666666666668}
</script>
  • 객체를 통해 반복하기
    -for...in은 객체의 각 속성에 대해 지정된 코드 블록을 실행하도록 하는 syntax입니다.
<script>
const player = {
	name : "jamie",
	allPoint: [10, 20, 30]
};
for (const point in player.allPoint){
	 console.log(`${player.name}'s point: ${player.allPoint[point]}`) 
}
</script>

1) 배열(array)

  • 배열은 하나의 변수 안에 나열된 데이트 리스트를 가지는 것을 의미한다.
    -[] 대괄호를 사용하여 그 안에 값을 넣어준다. 값으로 변수, boolean, 문자, 숫자 등의 다양한 데이터가 쓰일 수 있다.
<script>
const daysOfWeek = ["mon", "tue", "wed", "thu", "fri", "sat", "sun"];
daysOfWeek.push(“holiday”)
//변수 업데이트
</script>

2) 함수

-자바스크립트는 함수도 데이터 타입 중 하나이다.
-first-class function는 함수도 데이터 타입으로 할당가능하고 함수의 파라미터 인자로도 전달되고 함수의 return 타입으로도 함수를 전달할 수는 있다는 것을 말합니다.

3) 날짜(Date)

4) 정규 표현식(RegExp)

5) Map, WeakMap

6) Set, WetSet

🚫)주의할점

원시형 자료형 또한 내부 데이터를 구현할때는 객체로 감싸 객체의 한 종류로 사용된다.
언어에서 별도의 자료형으로 구분해서 사용하는 것일뿐 내부적으로는 모두 객체의 한 종류로 취급됨을 이해하자.

+Dynamic typing : dynamically typed language

  • 자바스크립트에는 변수를 선언할 떄 타입을 선언하지 않고 var, let, const 키워드를 사용해서 변수를 선언한다.
  • WHAT IS❓ dynamically typed language 동적 언어로 런 타임에 타입이 결정되는 언어로서 - 자바스크립트에선 변수는 선언이 아닌 값을 할당하는 시점에 변수의 타입을 동적으로 결정하고 재할당에 의해 변수의 타입을 언제든지 자유롭게 변경할 수 있다.
  • 변수 선언 시 어떤 타입인지 선언하지 않고 run time(프로그램 동작할 때)시 할당된 값에 따라서 타입이 변경된다.
<script>
let text = 'hello';
console.log(text.charAt(0)); //h
console.log(`value: ${text}, type: ${typeof text}`);//hello, string
text = 1;
console.log(`value: ${text}, type: ${typeof text}`);//1, number
text = '7' + 5;
console.log(`value: ${text}, type: ${typeof text}`);//num 5을 string으로 변환해서 string으로 합해줘 75, number가 출력
text = '8' / '2';
console.log(`value: ${text}, type: ${typeof text}`);// 연산가능한 string을 num으로 변환해줌 4, number
console.log(text.charAt(0));
//현재 변수에 할당되어있는 값에 의해 변수의 타입이 동적으로 결정되어 변수 타입이 string에서 num으로 변환되어서 타입에러가 발생한다
</script>

#📑Study Source

  1. 책 - 자바스크립트 deep dive
profile
김민재
자기 신뢰의 힘을 믿고 실천하는 개발자가 되고자합니다.
이전 포스트

JavaScript - 변수(var, let, const)의 차이는?

다음 포스트

JavaScript - Number와 String 메서드에 대해서!

0개의 댓글