코드스테이츠 11일차
자바스크립트 엔진에 대해서 자세하게 배우게 되었다.
하루의 대부분이 질문답변이었던것같다.
그만큼 이해하는데 어려움이 있었다.
내일은 다시 CSS에 대해서 공부하게된다.
오늘 배운 것들을 한번 더 정리하고 자야겠다.
새로 배운 것들
- 원시 데이터(Primitive data), 참조 데이터(Reference)
과거에 작성되어있는 자바스크립트 문서중
var을 사용하나 것들을 본적이 있을것이다.
이 당시에는 변수의 사용 범위가 함수단위로 사용되어
변수를 좀 더 광범위하게 사용했었고
이를 블록단위로 사용하게 하는 함수를
따로 만들어서 사용했던 것으로 알고 있다.
이런 불편함이 개선된 변수 선언 방식이
let과 const이다.
let은 var과 다르게 재선언이 불가능하여
하나의 변수에 하나의 데이터를 담도록 만들어졌다.
재선언이 불가능할 뿐 재할당은 가능하여
원시형 데이터의 변수 변경이 가능한 것이 특징이다.
let hello = 'world'
hello = 'good morning'
console.log(hello) // output: 'good morning'
let hello = 'hi' // output: SyntaxError
// 크롬 개발자 도구에선 개발 편의를 위해 재선언이 가능하다고 한다.
// JSbin등 다른 툴에서는 에러가 뜨는걸로 확인됐다.const는 마찬가지로 재선언이 불가능하지만
참조형 데이터(배열, 객체, 함수)의 추가 삭제가 가능한 변수이다.
let과는 다르게 재할당은 불가능하다.
const array = [1, 2, 3, 4, 5]
array.pop()
console.log(array) // output: [1, 2, 3, 4]
array = [a, b, c ,d, e] // output: ReferenceError여기서 처음 이해가 잘 안됐었던건 const에서
변수의 재할당이 불가능 한것으로 알고 있었는데
배열이나 객체의 변경이 가능했던점이 이해가 안됐었다.
변수의 데이터 저장 방법은 이렇다
변수에 담은 원시 데이터는 바로 콜스텍(Call Stack)에 저장하고
참조 데이터는 Heap이라는 저장소에 넣어둔 주소를 콜스텍에 저장한다.
때문에 const에서 참조 데이터 변경이 가능한 것은
원본 데이터를 변경하는 것이 아닌
원본을 복사해온 주소를 통해 변경하기 때문에 가능하다.
만약 const에 다른 참조 데이터의 주소를 할당하려 하면 당연히 안된다.
- 얕은 복사(Shallow Copy), 깊은 복사(Deep Copy)
얕은 복사란, A 객체를 복사한 B 객체가 있을 때
B 객체에서 요소의 변경이 있었을 때
A 객체에서 변경되지 않는 것
깊은 복사란, A객체를 복사한 B 객체가 있을 때
A 객체에서 요소의 변경이 있었을 때
B객체에서도 변경되는 것
얕은 복사의 값은 결과적으론 같은 값이지만
그 주소는 다른 것이라 할수 있다.
이런 이유료 const에 참조 데이터의 변경이 가능한 것이다.
- 스코프(Scope), 클로저(Clouser)
스코프는 일종의 변수의 활동 범위라고 보면된다.
어디에서 선언되었는가? 어디에서 참조할 수 있는가?에 따라서
변수의 범위가 결정되고 변수의 범위는 크게 두가지로 나눌수 있다.
함수 밖에서 선언된 전역 변수와
함수 안에서 선언된 지역 변수이다.
위에서 처음 언급했던 var은 함수 스코프(Function Scope)라고 하여
함수 내에서 사용이 가능했는데 기본적으로 전역 변수이다.
자바스크립트 자체가 크게 봤을때 이미 함수 안이기 때문에?
생각이 잘 안나는데 이렇게 얘기 했던것 같다.
그럼 우리가 사용하는 let, const는 무엇일까?
이 두가지는 모두 블록 스코프(Block Scope)로
한 블록의 사용 범위를 가지고 있다. {여기서부터 여기까지}
때문에 이 두가지는 기본적으로 지역 변수라고 볼수 있다.
함수 밖에서 선언할때만 빼고...
클로저의 개념이 이때 생기는데 개념을 정의하면 이렇다.
함수와 함수가 선언된 어휘적 환경의 조합
엥? 함수 아님...? 이라고 할수 있지만 다르게 얘기하면
내부 함수가 외부 함수의 변수에 접근할 수 있는 것을 가르킨다.
더 쉽게 말하면 이렇게 말할 수 있다.
안에서는 밖이 보이고
밖에선 안이 보이지 않는다.
이렇게 말고는 클로저의 설명 방법을 모르겠다.
오늘은 정말 어려운 개념들을 많이 배웠다.
잊어먹지말고 잘 알고 있으면 자바스크립트 문서 작성에 큰 도움이 될 것 같다.
