[Javascript] 데이터 타입

Jane Yeonju Kim·2022년 1월 20일
4

JavaScript

목록 보기
3/14
post-thumbnail

파이썬과 자바스크립트의 데이터 타입이 다르다는 걸 알고나서
MDN Web Docs에 나오는 '원시값'이 뭔지 '값복사'가 뭔지 이해하려고 쓰는 글..

JavaScript는 느슨한 타입(loosely typed)의 동적(dynamic) 언어다.

'느슨한 타입'이 무슨 말일까?
변수를 선언할때 처음에 정했던 데이터 타입이 바뀔 수도 있다는 말이다.
반면 정적언어인 C언어에서는 변수 선언할때 데이터 타입도 같이 선언하고 데이터 타입을 바꾸려면 형변환을 해줘야 한다.

let a = 'a'
a = true
a = 1    // 다른 데이터타입으로 값을 계속 바꿔도 오류가 나지 않는다.

자바스크립트 데이터 타입의 종류

기본 타입(원시타입):
      Number, String, Boolean, Undefined, Null, BigInt, Symbol
객체(참조타입):
     (데이터 속성), (접근자 속성)


기본 타입(원시 타입) - Primitive type

기본 타입 자체를 제대로 이해하려면 메모리의 구조, 객체에 대한 이해가 필요하다. 처음 배우는 사람이라면 객체를 배우고 다시 공부해도 충분할 것 같다.

기본 타입이란 컴파일할때 메모리의 스택 영역에 저장되는 타입이다.
값이 변하지 않는다!
변수의 값을 재할당하면 해당 메모리에 있는 값을 바꾸는 게 아니라,
추가로 메모리를 할당하고 그 새로운 주소값을 변수가 갖는다.

아래 그림에서 var로 선언된 a는 처음에 undefined 값이 할당되었었는데,
10의 값을 재할당받아서 새로운 주소를 갖게 되었다.
let으로 선언된 b는 20으로, const로 선언된 c는 30의 값을 저장하고 있다.

만약에 새로운 변수 d를 선언하여 20의 값을 할당한다면 b의 주소와 같은 주소를 갖게 된다!
참고한 블로그: 실제로 저장되고 참조되는 원리, 콜스택/ 메모리힙 구조

그리고 기본 타입 값 복사는 깊은 복사(값을 그대로 가져와서 원본에 영향이 없음)가 되서 서로 영향이 미치지 않는다.

let a = 'a'
let b = a   // b의 값은 'a'
a = 'b'    // a의 값은 'b'인데, b의 값은 여전히 'a'이다.

Number

자바스크립트에서는 숫자를 전부 실수로 받아들인다.
범위는 -(2^53 − 1)부터 2^53 − 1까지의 수.
정수만 쓰려면 메서드를 이용해야 한다.

String

문자열도 기본 타입이다!
배열처럼 문자열의 인덱스도 0부터 시작한다.

Boolean

true/ false 두 가지로 나타내는 데이터 타입.

Undefined

선언만 하고 아직 값을 할당하지 않은 변수는 undefined 값을 가진다.

Null

의도적으로 비어 있음을 표현한다.
typeof 연산자로 확인하면 객체라고 나오는데 모든 객체는 null값으로 부터 파생된다.

BigInt

Number타입의 최대인 9007199254740991를 넘는 숫자를 처리하기 위해 존재한다. 정수 끝에 n을 추가하거나 생성자를 호출해 생성할 수 있다.

Symbol

모든 Symbol값은 고유하고, 객체 properties에 대한 식별자로 사용될 수 있다.


객체(참조 타입) - Reference type

객체란 식별자로 참조할 수 있는 메모리 상의 값이다.
객체 속성은 '키'값으로 식별할 수 있고, 키값으로는 문자열과 심볼을 사용할 수 있다.

위 그림을 다시 보면 func_1, func_2, func_3은 모두 객체이자 참조타입이다.
그래서 힙 영역의 메모리주소를 값으로 갖고 있다. 그 주소를 따라가면 할당했던 각각의 값이 있다.

힙 영역에 있는 값은 동일하더라도 새로운 객체에 할당을 했다면 새로운 주소에 새롭게 할당된다. 예를 들어 func_1과 func_2 객체에 같은 내용이 들어있더라도 비교 연산자로 비교하면 다르다고 나온다.

그리고 참조 타입 값을 복사하면 얕은 복사(참조할 주소만 복사해온 것이기 때문에 원본에 영향을 받기도 하고 주기도 함)가 되기 때문에 서로 영향을 미친다.
객체의 깊은 복사를 하려면 메서드를 사용해야 한다.

let a = ['a', 'b', 'c']
let b = a
a[0] = 'd'
console.log(a)    // ['d', 'b', 'c']
console.log(b)    // ['d', 'b', 'c']

객체의 종류 중에 함수, 배열이 있다.
함수는 호출이 가능하다는 점을 제외하면 일반적인 객체고,
배열은 키값으로 정수만을 갖는다는 점(*인덱스: 순서가 있음) + 배열의 내장 메서드를 사용할때 length속성의 값을 참고한다는 점을 제외하면 일반적인 객체다!

객체는 따로 포스팅할 예정입니다😊

profile
안녕하세요! 김개발자입니다 👩‍💻 🐈

9개의 댓글

comment-user-thumbnail
2022년 1월 21일

연주님 완전 블로그왕...🧚‍♀️ 같이 첨부해주신 자료 덕분에 이해하기 더 좋네용! 화이팅팅팅✨

1개의 답글
comment-user-thumbnail
2022년 1월 23일

콜스택, 메모리힙구조에 대한 예시 자세히 써주셔서 이해하는데 도움이 되었습니다.👍

1개의 답글
comment-user-thumbnail
2022년 1월 23일

콜스택, 메모리힙구조에 대한 예시 자세히 써주셔서 이해하는데 도움이 되었습니다.👍

답글 달기
comment-user-thumbnail
2022년 1월 24일

와아 연주님 설명 짱짱 👍🏻👍🏻 앞으로 모르는거 생기면 연주님 벨로그부터 찾아봐두 되겠어용 😆ㅋㅋㅋㅋ

1개의 답글
comment-user-thumbnail
2022년 1월 24일

여러가지 데이터 타입에 대해서 알게 되었네요. 잘 읽고 갑니다!

1개의 답글