자료형 - 원시타입과 참조타입

지나·2022년 12월 5일
JavaScript자료형
0
post-thumbnail

원시 타입 (primitive type) : 숫자, 문자열, 불리언 ...

let a = 1;
a = 2;

원시타입은 실제 값을 저장한다. 변수 a에 할당된 값 1은 메모리에 저장되고, a는 메모리에 저장된 값 1의 메모리 주소를 가리킨다.
원시타입은 불변성을 가진다. 변수 a에 2라는 값을 재할당 한다면, 값 2는 메모리에 저장되고, a는 저장된 값 2의 메모리 주소를 가리킨다.

1 대신 2가 들어가는 것이 아닌, 별개로 2라는 값을 가진 메모리가 새로 생기는 것이다.
변수 a는 원래 가리키던 1이라는 값의 메모리 주소가 아닌, 2라는 값의 메모리 주소를 가리키는 것 뿐이다. 값이 변하는 것처럼 보일 수 있지만 메모리에는 1과 2라는 값이 모두 존재하며 기존에 존재하던 값 자체가 변경될 수는 없다.

let a = 1;
let b = a;

원시타입은 값 자체가 복사된다. 변수 b에 a를 할당하게 된다면 변수 a가 가진 값 1이 그대로 복사되어 b에 할당된다. 1이라는 값이 저장된 메모리 주소를 변수 a와 b가 함께 가리키는 것이 아니라, 변수 a가 가진 값 1이 별개로 복사되어 메모리에 저장된다. 변수 b는 별개로 복사되어 저장된 값 1의 메모리주소를 가리키고, a의 값이 다른 값을 가진 메모리 주소를 가리킨다고 해도 변수 b에는 전혀 영향을 주지 않는다.


원시 타입의 종류

  • 숫자
  • 문자열
  • 불리언
  • undefined
  • null
  • symbol

🍏 숫자 (Number)

숫자 형태로 이루어진 데이터

  • 정수
  • 소수
  • Infinity
  • NaN
let num = 123;
num = -123;
num = 12.345;

num = 1/0;
// Infinity (무한대) 반환
num = -1/0;
// -Infinity (-무한대) 반환

num = "숫자"/2
// NaN (부정확하거나 정의되지 않은 수학연산 사용시, Not a Number) 반환

자바스크립트에는 정수와 실수의 구분이 없다. 정수도 실수로 처리하며, 2^53 -1 보다 더 큰 정수는 Bigint 로 처리 (Bigint : 2^53 -1 보다 큰 정수를 표현할 수 있는 자료형)

정수 뒤에 n 을 붙이거나 함수 BigInt() 를 호출하여 표현할 수 있다.


🍏 문자열 (String)

문자 형태로 이루어진 데이터

let first_name = "Brendan"
let last_name = "Eich"
let description = `미국의 프로그래머로 자바스크립트 언어를 만들었다.`

큰따옴포, 작은따옴표 또는 벡틱기호로 표기할 수 있다.
따옴표 중복사용 시, 서로 다른 따옴표를 사용해야한다. ex) 큰 따옴표 안에 작은 따옴표

  • 이스케이프 표현
이스케이프 표현대체
\'작은따옴표
\"큰따옴포
\n줄바꿈
\t탭
\백슬래시

  • 템플릿 리터럴

${} 상수나 변수, 표현식 등을 삽입하면 직접 표기 가능 (다른 자료형도 사용할 수 있음)

const NAME = '정지나';
let age = '25';

console.log(
  	'제 이름은 ${NAME}, 나이는 ${age}세 입니다.'
  	);

🍏 불리언 (Boolean)

참을 의미하는 true, 거짓을 의미하는 false 두가지 값을 가지는 논리적 데이터

  • 참 또는 거짓 둘 중 하나의 값을 담을 수 있다.
  • 직접 할당되기 보다는 반환값으로 코드 제어에 주로 사용된다.
const a = 1 > 2;
const b = 1 < 2;

console.log(a)
// false 반환

console.log(b)
// true 반환

🍏 undefined

아직 값이 할당되지 않은 상태를 의미하는 데이터

let x;

console.log(typeof x);
// undefined 출력

typeof 연산자 : 뒤에 오는 값의 자료형을 반환하는 연산자


🍏 null

의도적인 빈 값을 의미하는 데이터

typeof null;

  • 자바스크립트의 초기 오류
  • 자바스크립트는 object 와 null 을 구분하지 못함
  • null 여부는 x === null 연산자 이용해서 구분
let x = null;

object (객체) 등이 들어있거나 들어가야하거나 또는 반환되어야 하지만 없을 때 !
대신 그 자리에 넣어두는 용도로 주로 쓰임 (객체 생성이 실패한 경우)



참조 타입 (reference type) : 객체, 배열 ...

객체의 주소를 저장하여 참조하는 방식

let obj = {
	a: 1,
    b: 2,
    c: 3
    };

참조타입은 주소를 저장한다. 객체형태의 변수 obj 안의 변수 a,b,c 는 주소를 가지고 있다.
실제값인 인스턴스 값들은 동적인 데이터를 보관하는 힙(heap) 에 저장되고, 변수 a,b,c 에는 힙에 있는 인스턴스 값들의 힙 주소만 할당된다. 

let newObj = obj;

newObj.a = 100;

참조타입은 값이 공유되는 특성을 가진다. 새로운 변수 newObj에 변수 obj를 할당한다면, newObj는 obj가 가리키고 있던 힙 주소를 똑같이 가리킨다. 기존의 값들을 복제하여 새로운 주소를 가리키는 것이 아니라, 기존의 값들을 가리키던 주소를 함께 가리킨다.
새로운 변수 newObj에 값을 재할당한다면, 가리키고 있던 힙 주소를 따라가 인스턴스 값을 재할당한다. 함께 주소를 공유하고 있던 변수 obj의 값도 변경된다.

두 객체는 동일한 주소를 참조하기 때문에 실제 값인 인스턴스 값도 동알하게 공유한다.


참조 타입의 종류

  • 자바스크립트에서는 원시 타입이 아닌 모든 데이터는 객체

🥑 객체

  • 객체 (object) : 복합적인 정보를 프로퍼티 (property) 로 저장하는 자료형
  • 프로퍼티 (property) : 키와 값의 조합 (key 와 value 를 가진다.)
const objname = {
  key1 : value,
  key2 : value,
	...
};

객체의 프로퍼티에 접근하기 !!

  • .key 형태로 접근
const person1 {
  name: '김철수',
  age: 25,
  married: false
};

console.log(
  person1.name,
  person1.age,
  person1.married
  );
  • ["key"] 형태로 접근
const person1 {
  name: '김철수',
  age: 25,
  married: false
};
// 상수로 객체를 선언
// 객체 안의 들어있는 프로퍼티 값은 수정과 추가가 가능하다는 점!

console.log(
  person1["name"],
  person1["age"],
  person1["married"]
  );
	// 큰따옴표, key 값을 문자열로 표현
  • 존재하지 않는 key 값으로 접근 시, undefined 반환
console.log(person1.birthdate);
console.log(person1["jop"]);
// 두 구문 다 undefined 반환
  • 특정 key 포함 여부 확인 : key in object 
console.log(
  'age' in person1, // true 반환
  'jop' in person1, // false 반환
  );

객체의 프로퍼티값을 수정 및 추가하기 !!

person1.age = 26;
person1.["married"] = ture;
// 해당 프로퍼티 접근 후, 값 재할당

person1.jop = 'developer';
person1["bloodtype"] = 'A';
// 추가하고자 하는 key 값과 value 값 한번에 할당

🥑 배열

  • 배열 (array) : 정렬된 값의 집합
  • 배열을 구성하는 값을 요소 (element)
  • 배열에서의 위치를 가리키는 숫자인 인덱스 (index) : 0번째부터 시작
const array1 = [34, '문자', false, null, undefined];
// 자료형에 관계 없이 배엘에 넣을 수 있음

배열의 요소 접근하기 !!

  • [index] 형태로 접근
const array1 = [34, '문자', false, null, undefined];

console.log(
  array1[0], // 34 출력
  array[4] // undefined 출력
  );
  • 배열의 길이 (요소의 개수)에 접근하기 : .length 형태로 접근
console.log(
  array1.length // 5 출력
  );
  • 배열의 마지막 요소 얻기 : [.length -1]
console.log(
  array1[array1.length -1] // undefined 출력
  );
  • 배열의 범주 너머로 접근 시, undifined 반환
console.log(num[num.length]);
// undefined 출력

배열의 요소를 수정 및 추가하기 !!

const num = [1, 2, 3]

num[2] = 5;
// 요소의 값을 수정
// 해당 요소의 인덱스에 먼저 접근 후, 값 재할당

console.log(num); // num = [1, 2, 5]

num[num.length] = 10;
// 배열의 요소 추가
// 맨 끝에 추가 됨
// 배열의 길이 (요소의 개수) 에 먼저 접근 후, 추가 할 값 할당

console.log(num); // num = [1, 2, 5, 10]

profile
지나
이전 포스트

자바스크립트를 시작하기

다음 포스트

자료형 - 원시타입과 참조타입

0개의 댓글