[JavaScript] 04. 변수와 스코프, 메모리

< 프론트엔드 개발자를 위한 자바스크립트>>(2013 인사이트, 한선용 옮김) 의 책을 요약한 내용으로 자바스크립트 제대로 배우기 스터디 그룹(페이스북) 의 글입니다.

이 장에서 다루는 내용

- 변수의 원시 값과 참조 값

- 실행 컨텍스트의 이해

- 가비지 컬렉션의 이해

4.1 원시 값과 참조 값

- ECMAScript 변수는 원시 값, 참조 값 두 가지 타입의 데이터 저장 가능, 여기서 원시 값은 단순한 데이터, 참조 ㄱ밧은 여러 값으로 구성되는 객체

- 자바스크립트는 메모리 위치에 직접 접근하는 것을 허용하지 않으므로 객체의 메모리 공간을 직접 조작하는 일은 불가

4.1.1 동적 프로퍼티

- 변수를 생성하고 값을 할당하는건 '원시 값'과 '참조 값'이 비슷하지만 값이 변수에 저장이 되면 그 값으로 할 수 있는 일은 다르다. 

- 동적으로 프로퍼티를 추가할 수 있는 값은 '참조 값' 뿐이다.

4.1.2 값 복사

- 원시 값'과 참조 값'은 저장되는 방식 외에도 변수에서 값을 복사할 때에도 다르게 동작

- 원시 값을 다른 변수로 복사할 때는 현재 저장된 값을 새로 생성후 새로운 변수에 복사

4.1.3 매개변수 전달

- ECMAScript의 함수 매개변수는 모두 값으로 전달

- 매개변수를 참조 형태로 넘기면 메모리 상의 값의 위치가 지역 변수에 저장되면서 지역 변수를 변경하면 함수 바깥에도 해당 변경 내용이 반영 (ECMAScript에서는 불가능)

4.1.4 타입 판별

- typeof 연산자

- 변수가 문자열, 숫자, 불리언, undefined 등의 정확한 타입을 알 수 있다.

- 값이 객체이거나 null이면 typeof에서는 object를 반환합니다.

- 참조 값이나 Object 생성자에 instanceof 연산자를 사용하면 true값을 반환

- 원시 값은 Object의 인스턴스가 아니므로 원시 값에 instancedof 연산자를 사용하면 항상 false값을 반환

4.2 실행 컨텍스트와 스코프

- 실행 컨텍스트는 컨텍스트라고 부르며 자바스크립트에서 매우 중요한 개념,

- 변수나 함수의 실행 컨텍스트는 다른 데이터에 접근할 수 있는지, 어떻게 행동해야하는지 규정

- 가장 바깥쪽에 있으면서 실행되는 컨텍스트를 전역 컨텍스트라 한다.

- 전역 컨텍스트는 웹페이지에서 나가거나 브라우저를 닫으면 내부에서 정의된 변수와 함수도 함께 파괴된다.

- 컨텍스트에서 코드를 실행하면 변수 객체에 스코프 체인이 만들어진다.

- 스코프 체인의 목적은 실행 컨텍스트가 접근할 수 있는 모든 변수와 함수에 순서를 정의

4.2.1 스코프 체인 확장

- 실행 컨텍스트에는 전역, 함수 컨텍스트 두가지 타입이 있지만 eval()을 호출 할때 생성되는 세번째 타입이 존재.

- 특정 문장에 임시 변수 객체가 생성되는 경우는 두가지가 있다.

try-catch 문의 catch 블록

with 문

4.2.2 자바스크립트에는 블록 레벨 스코프가 없습니다.

- 블록 레벨 스코프를 지원하는 언어에서는 for 문의 초기화 부분에서 선언한 변수가 오직 for 문의 컨텍스트 안에서만 존재

- for문에서 생성한 i 변수가 루프 실행이 끝난 후에도 존재.

* 변수선언

- var를 사용해 선언한 변수는 자동으로 가장 가까운 컨텍스트에 추가되는데 함수 내부에서는 함수의 로컬 컨텍스트가 가장 가까운 컨텍스트이며 with 문 내부에서는 함수 컨텍스트가 가장 가까운 컥텍스트입니다.

- 변수를 선언하지 않은 채 초기화하는 행동은 자바스크립트 프로그래밍에서 가장 흔한 실수이며 에러를 유발할 수 있으므로 항상 변수를 선언한 다음 초기화하길 권한다. (스트릭트모드에서는 에러를 발생시킨다)

* 식별자 검색

- 컨텍스트 안에서 식별자를 참조하려하면 검색을 해야함.

- 로컬 컨텍스트에서 식별자 이름을 찾으면 검색을 멈추고 변수를 설정, 찿지못할 경우 스코프 체인을 따라 검색을 계속한다.

- 전역 컨텍스트의 변수 객체에서도 식별자를 찾지 못하면 정의되지 않은것으로 판단.

- 지역 변수는 스코프 체인을 따라 올라가며 검색할 필요가 없으므로 전역 변수보다 빨리검색, 자바스크립트 엔진에서 식별자 검색을 최적화 하므로 미래에는 이러한 차이를 무시할 정도가 될수도 있다.

4.2 가비지 콜렉션

- 자바스크립트는 실행 환경에서 코드 실행 중에 메모리를 관리한다, 이러한 의미에서 가비지 콜렉션 언어라고 부를수도 있다.

- 자바스크립트는 필요한 메모리를 자동으로 할당하고 더 이상 사용하지 않는 메모리는 자동으로 회수하므로 개발자가 직접 메모리를 관리하지 않아도 된다.

- 더 이상 사용하지 않는 변수를 식별하는 기준은 브라우저마다 다르지만 아래의 두가지 방법을 흔히 채용

4.3.1 표시하고 지우기

- 가장 널리 쓰인다.

- 변수가 특정 컨텍스트 안에서 사용할 것으로 정의되면 그 변수는 그 컨텍스트 안에 있는 것으로 표시된다.

4.3.2 참조 카운팅

- 널리 쓰이지는 않는다.

- 이 방식의 주안점은 각 값이 얼마나 많이 참조되었는지 추적하는것이다.

4.3.3 성능

- 가비지 컬렉터는 주기적으로 실행되며 메모리 내에 할당된 변수가 많다면 상당한 자원을 소모하므로 가비지 컬렉션을 실행하는 타이밍이 중요하다.

- IE는 가비지 컬렉터는 너무 자주 실행하여 성능 문제를 일으키는 것으로 악명높다.

4.3.4 메모리 관리

- 일반적으로 가비지 컬렉션을 지원하는 프로그래밍 환경에서는 개발자가 메모리 관리에 신경쓰지 않아도 되지만 웹브라우저에서 사용할수 있는 메모리는 일반적인 데스크톱 애플리케이션의 가용 메모리에 비해 매우 적으므로 최소한의 메모리만 사용해야 페이지 성능을 올릴 수 있다.

- 메모리 사용을 최적화하는 가장 좋은 방법은 코드 실행에 필요한 데이터만 유지하는것이다. 필요 없어진 데이터는 null을 할당하여 참조를 제거하는것이 좋다.

4.4 요약

- 자바스크립트 변수에는 원시값, 참조값 두가지 형태로 값 저장 가능

- 원시값에는 불리언, 숫자, 문자열, Undefined, Null 다섯가지 데이터 타입

- 원시 값과 참조 값에는 다음과 같은 특징이 있다.

- 원시값은 고정된 크기를 가지며 스택 메모리에 저장

- 원시값을 한 변수에서 다른 변수로 복사하면 값 자체가 복사

- 참조값은 객체이며 힙 메모리에 저장

- 변수에 참조 값을 저장하면 해당 변수는 객체에 대한 참조만 저장할 뿐 객체 자체를 저장하는것은 아니다.

- 참조값을 한 변수에서 다른 변수로 복사하면 해당 객체에 대한 참조만을 복사하므로 두 변수는 같은 객체를 참조

- typeof연산자는 값의 원시 타입을 판별하며 instanceof 연산자는 값의 참조 타입을 판별

- 원시값과 참조값을 가리지 않고 모든 변수는 스코프라고 부르는 실행 컨텍스트에 존재하는데 실행 컨텍스트는 변수가 존재하는 기간을 경정하며 어느 코드가 해당 변수에 접근할 수 있는지도 결정.

- 실행 컨텍스트에는 전역, 함수 컨텍스트가 있다.

- 실행 컨텍스트에 진입할 때마다 스코프 체인이 만들어지며, 스코프 체인은 변수와 함수를 검색하는데 사용.

- 함수 컨텍스트는 해당 스코프에 있는 변수, 해당 스코프를 포함하는 컨텍스트에 있는 변수, 전역 컨텍스트에 있는 변수에 모두 접근가능

- 전역 컨텍스트는 전역 컨텍스트에 있는 변수와 함수에만 접근이 가능하며 로컬 컨텍스트에 있는 데이터에 직접적으로 접근 불가능

- 실행 컨텍스트는 변수에 할당된 메모리를 언제 해제할 수 있는지 판단하는데도 도움

- 자바스크립트는 값이 스코프를 벗어나면 자동으로 표시되고 다음에 가비지 컬렉션을 실행할 때 삭제

- 주로 사용하는 컬렉션 알고리즘은 표시하고 지우기라 불리는데 이는 현재 사용하지 않는 값에 표시를 남겨서 메모리를 회수하는 방법.

* 요약후기

- C언어와 자바스크립트, 그리고 HTML5을 동시에 하느라 굉장히 빡빡하네요.. 원래 4장은 저번주 주말에 마무리 지으려 했건만.. 결국 오늘 새벽에 마무리 지었습니다 ^^/ C언어는 한번 보고 다시 복습할 기회가 생겨서 다시 공부하니 쉬운것같은데 자바스크립트가 더욱 어렵게 느껴지는건 저만 그런건지는 잘 모르겠네요. 열심히 해야하겠습니다!