[모던 자바스크립트 Deep Dive] 11장~14장

11장 원시 값과 객체의 비교

원시 타입과 객체 타입 구분 3가지

원시 타입객체 타입

변경 불가능한 값(변수에 재할당시 교체됨)	변경 가능한 값
(확보한 메모리 공간에)실제값 저장	참조값 저장
원시 값 복사(값에 의한 전달)	참조값 복사 (참조에 의한 전달)

원시값 = 불변한 값-> 데이터 신뢰성 보장.

변수값 변경시 재할당하는 방식을 채택함으로써 값의 변경, 즉 상태 변경을 추척하기 쉽게 만든다.

반면 객체 = 변경 가능한 값 -> 데이터 신뢰성 보장 x, but 메모리 사용의 효율성과 성능 향상

해시테이블과 비슷한 구조 = 객체
-> 생성하고 관리하는 데 매우 복잡하며 비용이 많이 듦.

클래스 기반 객체 지향 프로그래밍(c++,java)과 달리
<-> 자바스크립트의 객체는 편리성을 위해 클래스 없이 객체를 생성할 수도, 객체 생성이후 동적으로 프로퍼티와 메서드를 추가할 수도 있다.

따라서 js 객체는 크기가 매우 클 수도, 원시값처럼 크기가 일정하지도 않고, 프로퍼티 값이 객체 일 수 있음
-> 상태 변경을 추척하기위해 불변성을 지켜가며 복사해 생성하는 비용이 많이 듦

따라서 메모리를 효율적으로 사용으로 성능을 향상시키기 위해 객체는 변경 가능한 값으로 설계되었다.

12장 함수 ⭐

함수? 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것
자바스크립트의 함수는 객체 타입의 값.

함수 정의

• 함수 선언문

: 기명함수만 0, 변수에 할당 x , 호출시 함수 이름과 동일한 이름의 식별자를 암묵적으로 생성해 호출함. 표현식이 아닌 문

함수 선언문은 런타임이전에 암묵적으로 생성된 식별자는 함수 객체로 초기화해서 함수 호이스팅에 의해 함수 정의전 함수 호출이 가능

• 함수 표현식

: 익명함수과 기명함수 존재. 단 함수 이름은 함수 몸체 내부에서만 유효한 식별자임. 표현식인 문

변수 호이스팅이 발생하여 함수 정의전에 호출 불가능

• Function 생성자 함수

: 생성자함수로 함수를 생성하는 방식은 일반적이지 않고 클로저를 생성하지 않는 등에 함수 선언문과 함수 표현식으로 생성한 함수와 다르게 동작함.

• 화살표 함수

: 내부동작또한 간략화. this 바인딩방식이 다름.prototype프로퍼티가 없음.argument 객체를 생성 x

• 초과된 인수는 무시되나, 모든 인수는 암묵적으로 arguments 객체의 프로퍼티로 보관됨.
• 함수 호출은 표현식이다.

var result = add(1, 2);

• 반환문 return 은 함수 몸체 내부에서만 사용할 수 있으며, 전역에서 return사용시 문법 에러가 발생한다.
• 하지만 Node.js 는 모듈 시스템에 의해 파일별로 독립적인 파일 스코프를 갖다. 따라서 Node.js 환경에서는 파일의 가장 바깥 영역에 반환문을 사용해도 에러가 발생하지 않는다.
• 객체 타입의 인수는 참조 값이 복사되어 매개변수에 전달되기 때문에 함수 몸체 내부에서 객체를 변경할 경우 원본이 훼손된다.⭐

함수의 형태

• 즉시 실행 함수

: 기명 함수와 무명 함수를 그룹 연산자로 감싸 함수 리터럴로 평가하여 함수 객체를 생성함.

일반함수처럼 값을 반환할 수도, 인수를 전달할 수 도 있다.

(function () {
  //----
})();

• 콜백 함수

콜백 함수 = 함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수

고차 함수 = 매개 변수를 통해 함수의 외부에서 콜백 함수를 전달받은 함수

콜백 함수로서 전달된 함수 리터럴은 고차 함수가 호풀될 때마다 평가되어 함수 객체를 생성함. 185Pg

• 순수 함수, 비순수 함수

순수 함수 = 어떤 외부 상태에 의존하지 않고 , 변경하지 않는 부수효과가 없는 함수

인수의 불변성 유지외부 상태에는 의존하지 않고 함수 내부 상태에만 의존한다 해도 그 내부 상태가 호출될때마다 변화하는 값이라면 순수 함수가 아니다. (현재시간 등)함수형 프로그래밍순수 함수와 보조 함수의 조합을 통해 외부 상태를 변경하는 부수 효과를 최소화하여 불변성을 지향하는 프로그래밍 패러다임.

13장 스코프

스코프는 식별자의 유효범위이며, 네임스페이스이다.
렉시컬 환경: 코드가 어디서 실행되며 주변에 어떤 코드가 있는지
스코프 체인: 스코프가 계층적으로 연결된 것.

• var 키워드로 선언된 변수는 같은 스코프 내에 중복 선언이 허용되지만 변수값이 재할당되어 부작용이 생김
• let const 키워드로 선언된 변수는 같은 스코프 내에 중복 선언을 허용하지 않는다.

var 키워드는 블록 레벨 스코프가 아닌 함수 레벨 스코프이다.

let , const 키워드는 블록 레벨 스코프이다.

자바스크립트는 함수를 어디서 호출했는지가 아니라 함수를 어디서 정의했는지에 따라 상위 스코프가 결정한다.

var x = 1;

function foo() {
  var x = 10;
  bar();
}
function bar() {
  console.log(x);
}
foo(); //1
bar(); //1

• 변수를 참조할때 자바스크립트 엔진은 스코프 체인을 통해 변수를 참조하는 코드의 스코프에서 시작하여 상위 스코프 방향으로 이동하여 선언된 변수를 검색한다.

14장 전역 변수의 문제점

함수 내부의 지역변수는 함수가 호출되기 이전까지는 생성되지 않는다. 함수를 호출하면 함수 몸체의 문들이 순차적으로 실행되기 이전에 변수의 선언문이 자바스크립트 엔진에 의해 가장 먼저 실행되어 변수가 선언되고 초기화된다. 그이후 몸체를 구성한 문들이 실행된다.

var x = 'g';

function foo() {
  console.log(x); //undefined
  var x = 10;
}
foo();
console.log(x); //g

전역 객체: 코드가 실행되기 이전 단계에 자바스크립트 엔진에 의해 어떤 객체보다도 먼저 생성되는 특수한 객체

전역 변수는 스코프 체인상에 종점에 존재하여 검색 속도가 가장 느리다.

전역 변수의 사용을 억제하는 방법

1. 즉시 실행함수로 감싸 해당 영역만 사용하고 이후 필요없다면 바로 소멸시킨다.
2. 전역 변수를 네임 스페이스 객체의 프로퍼티로 만들어 식별자 충돌을 방지하는 효과가 있으나 생명주기의 변함은 없다.
3. 모듈 패턴 : 클래스와 같이 관련이는 변수화 함수들을 모아 즉시 실행 함수로 감싸 하나의 모듈로 만든다.

var Counter = (function () {
  var num = 0;

  return {
    increase() {
      return ++num;
    },
    decrease() {
      return --num;
    },
  };
})();

console.log(Counter.num); // undefined 노출되지 않는 프라이빗 멤버
console.log(Counter.increase()); //1 퍼블릭 멤버
console.log(Counter.increase()); //2

1. ES6 모듈 : 전역 변수를 사용못하게 하며 파일 자체의 독자적인 모듈 스코프를 제공한다.

<script type="module" src="lib.mjs"></script>