오늘은 프론트엔드라면 필수로 알아야할 자바스크립트의 개념에 대해서 알아보고자 한다. 자바스크립트를 파기 시작하면 정말 끝이 없는 걸 알고 있어서 어디서부터 공부를 해야할까 찾아보다가 주변에서 코어 자바스크립트를 추천해줘서 책을 보며 정리해보는 시간을 가져볼려고 한다.
1. 데이터 타입의 종류
자바스크립트의 데이터 타입에는 기본형과 참조형 두 가지가 존재한다.
기본형 (primitive type): 숫자, 문자열, 불리언, null, undefined, symbol(ES6)
참조형 (reference type): 객체, 배열, 함수 , 날짜, 정규표현식, Map(ES6), WeakMap(ES6), Set(ES6), WeakSet(ES6)
두 가지를 구분하는 방법은 기본형은 할당이나 연산시 복제되고 참조형은 참조된다고 알려져있다. 여기서 기본형 같은 경우는 불변성을 띄우는데 예를 들자면 기본형인 숫자 10을 담은 변수 a에 15를 넣으면 아무 문제 없이 15로 변한다는 것이다.
데이터 타입에 관한 배경지식
메모리와 데이터
컴퓨터 같은 경우는 0과 1로 바꿔 데이터를 기억한다, 그리고 0 또는 1만 표현할 수 있는 하나의 메모리 조각을 비트(bit)라고 하는데 표현할 수 있는 값들이 늘어나면서 비트를 여러개를 묶어 하나의 단위로 표현하게 되는데 이걸 바이트(byte)라고 표현한다. 그리고 1바이트는 총 256(2^8)개의 값을 표현할 수 있다. C/C++ 같은 정적 타입 언어는 메모리의 낭비를 최소화하기 위해 데이터 타입별로 할당할 메모리 영역을 2바이트, 4바이트 등으로 나누었지만 메모리 용량이 과거보다 월등히 커진 상황에서 등장한 자바스크립트는 상대적으로 메모리 관리에 대한 압박이 자유로워 졌다. 그리고 모든 데이터는 바이트 단위의 식별자, 메모리 주솟값(memory address)을 통해 서로 구분하고 연결할 수 있다.
식별자와 변수
보통 변수(variable) 와 식별(identifier)를 혼용하는 경우가 많다. 변수는 "변할 수 있는 무언가" 이고 여기서 "무언가"란 데이터를 말한다. 식별자는 어떤 데이터를 식별하는데 이름, 즉 "변수명"을 지칭한다.
변수 선언과 데이터 할당
변수 선언
// 변할수 있는 데이터를 만든다. 이 데이터의 식별자는 a로 한다
var a;
변할 수 있는 데이터이니 선언할 때는 undefined이더라도 나중에 다른 값으로 바꾸면 된다. 이렇게 보면 변수란 결국 변경 가능한 데이터가 담길 수 있는 공간 또는 그릇이라 생각할 수 있다 왜냐하면 이공강에는 숫자를 담았다가 문자를 담듯이 여러가지의 명령을 내릴 수 있기 때문이다.
데이터 할당
var a; // 변수 a 선언
a = 'abc' ; //변수 a에 데이터 할당
var a= 'abc' ; // 변수 선언과 할당을 한 문장으로 표현
위에서 1,2번째 줄과 3번째 줄은 결국 같은 의미를 같고 있는 표현 방법이다 그렇기에 1,2번처럼 두 문장으로 나누던 3번째 줄 같이 한 문장으로 명령하든 자바스크립트 엔진에서는 결국 똑같이 처리하게 된다. 다음은 앞에서 선언한 데이터들이 어떻게 할당 되는지 알아보겠다.
- 먼저 변수 영역에 1003이라는 빈 공강은 확보한다.
- 확보한 공간에 식별자를 a로 지정한다.
- 데이터 영역을 따로 만들고 빈 공간에 5004라는 문자열 'abc'를 저장한다.]
- 변수 영역에서 a라는 식별자 1003를 검색한다.
- 앞서 저장한 문자열 주소 5004를 1003의 공간에 대입한다.
즉 변수 영역과 데이터 영역으로 따로 할당하고 변수 영역에는 변수명을 할당해주고 데이터 영역에는 해당 변수에 들어갈 데아터 값을 준다. 변수 영역에 데이터값을 함께 할당해주지 않는 이유는 자유로운 데이터변환과 동시에 메모리를 더욱 효율적으로 관리하기 위해서다.
예를 들어 데이터 값을 'abc'가 아닌 'abcdef'로 변경하고 싶을 때 변수 영역에서 모든 것을 관리하게되면 새로운 공간을 변수 영역에 만들어서 새로운 식별자를 지정하고 데이터값을 넣어줘야함으로 굉장히 비효율적이다. 그리하여 데이터 영역을 따로 만들어 관리하게 되면 데이터 영역에서 데이터값만 다른 빈 공간을 지정하여 넣어주고 1003이라는 변수 영역에서 변경된 데이터 영역만 호출해주면 된다.
기본형 데이터와 참조형 데이터
불변값
변수(variable)와 상수(constant)를 구분하는 성질은 "변경 가능성"이다. 불변값을 상수라고 오해하기 쉬운데,둘은 명확하게 구분할 필요성이 있다.
- 변수와 상수를 구분 짓는 변경 가능성의 대상은 변수 영역 메모리 이다.
- 불변성 여부를 구분할 때의 변경 가능성의 대상은 데이터 영역의 메모리 이다.
기본형 데이터인 number, string, boolean, null, undefined, symbol 은 모두 불변값이다.
불변성을 아래의 예제로 개념을 좀 더 명확하게 정리해보자.
var a = 'abc';
a = a+ 'def';
var b = 5;
var c = 5;
b = 7;
먼저 1,2번째 줄을 보면 a에다가 def를 추가했다고 기존 abc가 abcdef가 되는것이 아니고 데이터 영역에 새로운 abcdef를 만들어주는 것이다.
3,4번째 줄은 변수명 b 와 c 가 5라는 같은 데이터 값을 공유하고 있다. 그렇기에 데이터 영역에 값이 5인 주소를 찾아서 함께 쓰게된다.
여기서 5번째 줄에서 b를 7로 지정해주는 순간 기존 값 5가 있던 주소에 있는 값을 바꾸는 것이 아닌 새로운 데이터 영역의 빈공간을 만들어 7를 지정해서 호출해주는 것이다. 그 이유는 기존 5라는 데이터를 변수명 c 가 재활용을 해야하기 때문이다.
이처럼, 문자열 값도 한 번 만든 값을 바꿀수 없고, 숫자 또한 다른 값으로 변경할 수 없다. 변경은 새로 만드는 동작을 통해서만 이뤄진다. 이것이 바로 불변값을 성질이다. 한 번 만들어진 값은 가비지 컬렉팅을 당하지 않는 한 영원히 변하지 않는다.
가변값
기본형 데이터는 모두 불변값이라고 했다,그렇다면 참조형 데이터는 모두 가변값일까?
기본적으로 성질은 가변값인 경우가 많지만 설정에 따라 변경이 불가능한 경우가 있다. 지금은 우선 참조형 데이터를 변수에 할당하는 과정부터 확인해보자.
var obj1 = {
a: 1,
b: 'bbb',
};
obj1.a = 2;
기본형 데이터와의 차이는 '객체의 변수 영역'이 별도로 존재한다는 점이다.
1. 컴퓨터는 우선 변수 영역에 1002라는 빈공간을 확보하고 그 주소의 이름을 obj1로 지정한다.
2. 임의의 데이터 저장 공간 5001에 데이터를 저장하려고 보니 여러개의 프로퍼티로 이뤄진 데이터 그룹이다. 이 그룹 내부의 프로퍼티들을 저장하기 위해 별도의 변수 영역을 마련하고 영역의 주소를 (7100~?)를 5001이라는 데이터에 저장한다. 여기서 말하는 새로운 영역은 객체의 변수 영역이다.
3. 7100 및 7101에 각각 a와 b라는 변수명을 지정한다.
4. 데이터 영역에서 숫자 1를 검색하고 검색 결과가 없으면 5003에 저장하고, 이 주소를 7100에 저장한다. 문자열 'bbb' 역시 임의로 5004에 저장하고 이 주소를 7101에 저장한다.
마지막으로 5번째 줄을 보면 obj1의 a라는 변수명에 숫자 2를 할당하려고한다. 그러기 위해서 데이터 영역에서 숫자 2를 검색하고, 검색 결과가 없으므로 빈공간 5005에 저장하고 이 주소를 7100에 저장한다.
변수 obj1이 바라보고 있는 주소는 5001로 변하지 않으므로, '새로운 객체'가 만들어 진것이 아니라 기존의 객체 내부의 값만 바뀌게 되는것 이다.
정리하자면, 결국 우리가 새로운 값을 할당할때 건들이게 되는 영역은 데이터 영역뿐이다. 빈 데이터 영역에 새로운 값을 저장하고 그것을 객체 변수 영역에서 새롭게 호출해서 쓰게된다.
여얼 파이리! 잘 보고 갑니다~~!