일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- react next
- vuex map
- 폼 입력 바인딩
- 이벤트 수식어
- 프로그래머스 데브코스 프론트엔드
- Vue
- vue 이벤트 수신
- flex
- Spacer
- KDT 프로그래머스 데브코스 프론트엔드
- SCSS use
- netlify redirect
- 프로그래머스 데브코스
- SCSS import
- 프로그래머스 프론트엔드 데브코스
- postcss
- 프로그래머스 K_Digital Training
- SCSS extend
- git 같은계정 다른 컴퓨터
- 쌓임맥락
- SCSS forward
- 고양이 사진 검색기
- vue 지역 컴포넌트
- 리액트
- vue mixin
- 다른컴퓨터에서 git사용
- KDT 프로그래머스
- 리스트 렌더링
- nextjs사용법
- intersection opserver
- Today
- Total
혼자 적어보는 노트
[Javascript] 데이터 타입 별 데이터 할당 / 불변 값 / 가변 값 본문
자바스크립트의 데이터 타입에는 기본형(원시형)과 참조형이 있다.
기본형: 숫자(number), 문자(string), 불린(boolean), 심볼(symbol), bigint, null, undefind
참조형: 객체(object), 배열(array), 함수(function), 날짜(date), 정규표현식(RegExp)
불변값
기본형의 값은 불변의 값이다.
var a = 10;
위의 코드에서의 변수는 변할 수 있는 수(값)인 10을 의미하며
식별자는 데이터를 식별하는데 사용되는 이름, 즉 변수명인 a를 칭한다.
변수에 값을 할당할 때 단순하게 값을 할당한다고 생각할 수 있겠지만
변수와 데이터는 각각 다른 공간에 저장이 된다.
[변수 영역]에서 빈 공간을 확보하고 그 공간에 식별자 (a)를 지정한 후
[데이터 영역]의 빈 공간에 값(10)을 담고 a가 있던 [변수 영역]의 값에
10이 담긴 공간의 주소를 대입하는 방식이다.
var a = 20 으로 변경한다면 [데이터 영역]에 새롭게 20이라는 값을 담고 만들어놓은
[변수 영역]의 a의 데이터 주소를 20이라는 값이 담긴 공간에 대입한다는 것이다.
즉, 각각 기본형의 데이터들은 변경되지 않으며 새로 추가되는 방식으로만 존재하기 때문에
불변 값이라고 말한다.
a=1, b= 1, c=1 일 경우 [데이터 영역]에 있는 1이 담긴 하나의 공간의 주소를 사용한다는 뜻이다.
이것으로 인해 데이터의 중복에 대한 처리 효율이 높아진다.
가변 값
참조형의 값은 가변값인 경우가 많지만 설정에 따라 변경 불가능한 경우가 있으며
불변값으로 활용하는 방법도 존재한다.
var obj = {
a : 1,
b : "hello"
}
기본형 데이터와의 차이는 객체의 변수(프로퍼티)를 저장하는 영역이 따로 존재한다는 점이다.
참조형 데이터의 할당 과정은 [변수영역]에 식별자 obj 를 지정하고
그 값은 프로퍼티들의 주소가 담긴 [데이터 영역]의 주소를 대입한다.
그리고 [프로퍼티 영역]의 빈 공간에 프로퍼티의 이름 a가 담겨있고 또 다른 빈 공간에 b가 담겨있다.
해당 프로퍼티들의 값은 [데이터 영역] 의 각각 1이 담긴 공간, "hello"가 담긴 공간의 주소를 대입한다.
obj.a = 2로 프로퍼티를 재 할당 한다면 어떻게 될까?
[프로퍼티 영역]의 a의 값은 [데이터 영역]에 2가 있는 주소로 변경된다.
이렇게 변경 시에 대입하는 주소가 변경되기 때문에 불변하지 않다, 즉 가변 값이라고 하는 것이다.
이렇게 재할당을 하는 경우 [데이터 영역]의 1이 담긴 공간은 아무에게도 참조되지 않는 상태(참조카운트 0)가 되며
해당 메모리 주소는 가바지 컬렉터의 수거 대상이 된다.
참고 도서 : 코어 자바스크립트
'Javascript' 카테고리의 다른 글
[Javascript] ES6 객체 리터럴의 확장 기능 / 객체 메소드 (0) | 2021.12.03 |
---|---|
[Javascript] 부모 클릭 이벤트 자식요소 클릭 시 무시 시키는 방법 (0) | 2021.12.03 |
[Javascript] clientWidth, clientHeight / scrollWidth, scrollHeight / scrollTop , scrollLeft (0) | 2021.11.24 |
[Javascript] offsetTop, offsetLeft / offsetParent / offsetWidth, offsetHeight (0) | 2021.11.24 |
[Javascript] async await에 대한 이해 (0) | 2021.11.23 |