[코어 자바스크립트 요약] 1장. 데이터 타입

Ina·2023년 2월 27일
2

Javascript

목록 보기
2/3
post-thumbnail

1-1 데이터 타입의 종류

  1. 기본형(Primitive Type)
    : number, boolean, null, undefined, Symbol(ES6부터 추가) 등이 있음

  2. 참조형(Reference Type)
    : object과 그 하위 분류로 array, function, date, regExp, Map(ES6~), WeakMap(ES6~), Set(ES6~), WeakSet(ES6~) 등이 있음

  • 기본형 vs 참조형의 차이
    : 기본형은 값이 담긴 주솟값을 바로 복제 VS 참조형은 값이 담긴 주솟값들로 이루어진 묶음을 가리키는 주솟값을 복제함.

1-2 데이터 타입에 관한 배경지식

1-2-1 메모리와 데이터

  • 비트(bit) : 0 또는 1만 표현할 수 있는 하나의 메모리 조각.
    • 각 비트는 고유한 식별자를 통해 위치를 확인할 수 있음.
    • 비트 여러 개를 묶어 하나의 단위로 여긴다면 표현 가능한 값이 늘어나고 검색시간이 줄어 효율적임. 다만, 크게 묶을수록 낭비되는 비트가 생길 수 있으므로 표현 가능한 개수에 어느 정도 제약을 주고 적정한 공간을 묶게 됨. ➡ 바이트 (byte) 단위가 생김
  • 바이트(byte) : 1바이트 = 8비트
    • 2의 8승인 256개의 값을 표현할 수 있음.

타이핑

  • 정적타입언어 : C/C++, Java 등의 정적 타입언어는 메모리 낭비를 최소화하기 위해 데이터 타입별로 할당할 메모리의 영역을 정해둠
  • Javascript : 메모리 용량이 커진 시대에 출현한 JS는 상대적으로 메모리 관리에 대한 압박에서 자유롭게 메모리 공간을 좀 더 넉넉하게 할당함. 개발자가 형변환을 걱정해야 하는 상황이 덜 발생하게 됨.

1-2-2 식별자와 변수

변수

: 변할 수 있는 수. ('수'로 표현하는 이유는 수학용어를 차용했기 때문. 반드시 숫자인 것은 아니고 데이터를 말함)

식별자

: 어떤 데이터를 식별하는 데 사용하는 이름. 즉 변수명

1-3 변수 선언과 데이터 할당

1-3-1 변수 선언

var a; // 변할 수 있는 데이터를 만든다. 이 데이터의 식별자는 a로 한다.

: 변수는 변경 가능한 데이터가 담길 수 있는 공간 또는 그릇이라고 생각할 수 있음.

1-3-2 데이터 할당

  • 변수 영역에서 빈공간 @1을 확보
  • 확보한 공간의 식별자를 a로 지정
    (@1 주소로 찾아가면 그 안에 식별자 : a 라는 정보가 있게 됨)
  • 데이터 영역의 빈공간 @22에 문자열 'abc'를 저장
  • 변수 영역에서 식별자가 a인 주소를 검색
  • 저장된 문자열 'abc'의 주소를 @1의 공간에 대입.
    (@1 주소로 찾아가면 그 안에 식별자 : a, 값 : @22 라는 정보가 있고, @22에 찾아가면 'abc'라는 데이터가 존재함)

👉 @1에 'abc'값을 직접 대입하지 않고 굳이 한 단계를 더 거치는 이유?
: 데이터 변환을 자유롭게 하고, 메모리를 효율적으로 관리하기 위함. Js에서 number 타입은 8바이트 공간을 할당하지만 문자열은 정해진 규격이 없으므로 글자수에 따라 가변적으로 메모리 가변적. 만약에 미리 확보된 공간 내에서만 데이터 변환할 수 있다면 데이터 재저장을 위해서 확보된 공간을 변환할 데이터의 크기에 맞게 늘리는 작업을 수행해야 함. 이것을 피하기 위해서 변수와 데이터를 별도의 공간에 나누어 저장하는 것이 최적!

1-4 기본형 데이터와 참조형 데이터

1-4-1 불변값

  • 변수 vs 상수를 구분하는 성질은 변경가능성
    : 변수 영역 메모리을 바꿀 수 있으면 변수, 없으면 상수. 데이터 할당이 한번 이뤄진 변수 공간에 다른 데이터를 재할당할 수 있는지 여부가 관건.

불변성

  • 불변값 vs 상수
    : 불변성 여부 구분할 때 변경 가능성의 대상은 데이터 영역 메모리

  • 기본형 데이터는 모두 불변값.

var a= 'abc';
a = a + 'def'; //새로운 문자열 'abcdef'를 만들어 그 주소를 변수 a에 저장.(abc / abcdef는 완전히 별개의 데이터)

var b = 5; // 데이터 영역에 5가 없으므로 새로 데이터 공간 만들어서 5 저장. 그 주소를 변수 b에 저장.
var c = 5; // 데이터 영역의 기저장된 5의 주소를 재활용해 c에 저장.
b = 7; // 데이터 영역에 7을 만들고 b에 다시 저장. → 5, 7 은 다른 값을 변경할 수 없고 변수에서 새로운 값이 필요하면 새로 만들어야 함.
  • 불변값 : 다른 값으로 변경할 수 없고, 새로 만드는 동작을 통해서만 변경이 가능. 한번 만들어진 값은 가비지 컬렉팅이 되지 않는 한 영원히 변하지 않음

1-4-2 가변값

참조형 데이터는 기본적인 성질은 가변값인 경우가 많지만, 설정에 따라 변경 불가능한 경우도 있고, 불변값으로 활용하는 방안도 있음.

  • 참조형 데이터를 변수에 할당하는 과정
var obj1 ={
	a: 1,
    b: 'bbb'
}

... 생략

  • 참조형 데이터는 객체의 변수(property)영역이 별도로 존재
  • 중첩객체 (Nested Object)
var obj ={
	x: 3,
    arr: [3,4,5]
  }
  • 참조 카운트 : 어떤 데이터에 대해 자신의 주소를 참조하는 변수의 개수.
    참조 카운트가 0이 되면 가비지 컬렉터의 수거대상이 됨.

1-4-3 변수 복사 비교

  • 기본형주솟값을 복사하는 과정이 한번만 이뤄지고, 참조형한 단게를 더 거치게 된다는 차이가 존재함.

1-5 불변 객체(immutable object)

1-5-1 불변 객체를 만드는 간단한 방법

  1. 하드코딩으로 객체 입력
var user = {
	name : 'james',
    gender : 'male'
}

var changeName = function (user, newname) {
	return {
    	name : newName,
        gender : user.gender
        }
}
  1. 얕은 복사(기존 정보를 복사해서 새로운 객체를 반환하는 함수)
    : 중첩된 객체에서 참조형 데이터가 저장된 프로퍼티를 복사할 때 그 주솟값만 복사하므로 해당 프로퍼티에 대해 원본과 사본이 모두 동일한 참조형 데이터의 주소를 가리키게 됨. (1depth에 대해서만 가능한 방법!)
var copyObj = function (target) {
	var result = {};
    for (var prop in target) {
    	result[prop] = target[prop]
    }
    return result;
}

1-5-2 얕은 복사와 깊은 복사

  • 얕은 복사 : 바로 아래 단계의 값만 복사
  • 깊은 복사 : 내부의 모든 값들을 하나하나 찾아서 전부 복사

기본형 데이터일 경우 그대로 복사해도 되지만, 참조형 데이터는 다시 그 내부의 프로퍼티까지 재귀적으로 복사해야 기존 객체에 영향 X

1-6 undefined 와 null

undefined

: 사용자가 명시적으로 지정하거나, js 엔진이 부여하기도 함.

  • JS 엔진이 undefined 반환하는 경우 : 응당 어떤 값을 지정할 것이라고 예상되는 상황임에도 실제로 그렇게 하지 않았을 때.
    • 값을 대입하지 않은 변수(데이터 영역의 메모리 주소를 지정하지 않은 식별자에 접근)
    • 객체 내부에 존재하지 않는 프로퍼티에 접근
    • return문이 없거나 호출되지 않는 함수의 실행결과
  • 비어있는 요소는 순회와 관련된 많은 배열 메서드들의 순회 대상에서 제외됨(건너뜀).

주의할 점 : typeof null 은 'object'인 js버그가 있음...

1-7 정리

  • JS의 데이터 타입에는 크게 기본형과 참조형 존재
  • 기본적으로 기본형은 불변값, 참조형은 가변값
  • 변수는 변경가능한 데이터가 담길 수 있는 공간.
  • 식별자는 그 변수의 이름
  • 변수를 선언하면 컴퓨터는 메모리의 빈 공간에 식별자를 저장, 그 공간의 값은 undefined로 할당. 이후 그 변수에 기본형 데이터를 할당하려고 하면 별도의 공간에 데이터 저장. 참조형은 참조형 데이터 내부 프로퍼티를 위한 변수 영역 별도 확보하고 변수 연결...
  • 참조형 데이터가 기본형과 메모리 할당과정에서 차이가 있는 이유는 참조형 데이터가 여러개의 프로퍼티(변수)를 모은 그룹이기 때문.
  • 참조형 데이터를 불변값으로 사용하기 위해서는 깊은 복사를 하거나 라이브러리를 사용
  • 없음을 나타내는 값은 null, undefined 두 가지.
  • undefined : 어떤 변수에 값이 존재하지 않을 경우
  • null : 사용자가 명시적으로 '없음'을 표현하기 위해 대입한 값. 순회 건너뜀
profile
프론트엔드 개발자. 기록하기, 요가, 등산

0개의 댓글