🍙 JS 간단 명료한 기본 정리2

8. 문

프로그램을 구성하는 기본 단위 / 최소 실행 단위
1. 표현식인 문 => 변수 할당 가능
2. 표현식이 아닌 문 => 변수 할당 불가능 (ex 함수 선언문 , 변수 선언문)

9. 함수

1. 함수선언식 : 선언이므로 호이스팅 발생
   (함수 호이스팅) , 암묵적으로 생성한 식별자 사용
2. 함수표현식 : 변수에 값을 넣으므로 변수에 대해 호이스팅 발생
   (변수 호이스팅) , 암묵적이지 않은 식별자 사용
3. Function 생성자함수
4. 화살표 함수

자바스크립트 함수의 특징

일급객체: 함수를 값처럼 자유롭게 사용한다.

함수 매개변수의 주의할 점

참조에 의한 전달로 인한 외부 상태가 변경되는 것을 피해라
=> 객체를 불변객체로 만들어라
=> 깊은 복사를 통해 새로운 객체를 생성

고차함수란?

함수의 외부에서 콜백함수를 전달받은 함수
map filter forEach

순수함수 / 비순수함수

순수함수 : 어떤 외부 상태에 의존하지도 않고 변경하지도 않는 부수효과 X
비순수함수 : 외부 상타에 의존하거나 외부 상태를 변경하는 부수효과 O

순수함수는 원시형에 대해 매개변수로 받아 순수함수를 유지한다.
반면 비순수함수는 원시형에 대해 직접 값을 받아 변경하여 외부 상태(값)를 변경한다.

순수함수는 참조형에 대해 깊은 복사를 통해 외부값에 영향을 주지않는다.
반면 비순수함수는 깊은복사없이 매개변수로 받은 값을 변경하여 외부 상태(값)를 변경한다.

10. 스코프

var : 함수레벨 스코프 (함수몸체안에서만 스코프 작동)
let / const : 블록 레벨 스코프 (모든 코드 블록 내에서 스코프 작동)

정적 스코프 동작

변수 값을 찾을때는 함수를 어디서 호출했는지(동적스코프)에 영향을 받지않고 함수를 어디서 정의했는지(정적스코프)에 영향을 받는다.

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

• foo함수안에 있는 bar함수는 함수를 어디서 정의했는지보면 전역 컨텍스트에서 정의한 var x = 1에서 정의 했으므로 해당 부분에서의 콘솔 출력인 1이 출력된다.

11. 스코프의 차이점

var : 변수선언
1) 선언단계 : 런타임 이전
2) 초기화단계 : 런타임 이전

let / const : 변수선언
1) 선언단계 : 런타임 이전
2) 초기화단계 : 변수선언문에 도달했을때 실행

• 선언단계와 초기화 단계 이전에 접근할경우 TDZ에 의해 오류 발생

12. 실행 컨텍스트

소스코드(실행 가능한 코드)의 종류

1. 전역 코드
2. 함수 코드
3. eval 코드
4. 모듈 코드

소스코드의 과정

1. 소스코드 평가과정 (런타임 이전)
2. 소스코드 실행과정 (런타임)

• 소스코드의 종류에서 각각 해당 과정이 발생한다.

전역코드 평가 / 실행

전역코드 평가 : 선언문만 먼저 실행

예시로 알아보기 ( let의 호이스팅과도 관련)

해당 내용은 글쓴이가 이해하기 쉽게 만든 것이라 오류가 있을 수 있다.

console.log(x)
let x;

전역코드 평가과정

1. 호이스팅 발생
2. let이 호이스팅 된 선언문만 실행된다.
3. 변수선언의 선언 단계가 실행된다. (초기화 X)

let x; // 호이스팅 된 부분 선언문 (선언 단계)
console.log(x) 			//x의 TDZ
let x; // 실제 초기화 진행되는 부분 (초기화 단계) 

전역코드 실행과정

1. 선언 이후의 모든 코드를 순차적으로 동작시킨다.
2. console.log(x)를 하려는데 x를 초기화 하지않아 referenceError 발생

console.log(x) //ReferenceError x가 선언단계만 진행되고 초기화가 진행x
let x		//x가 초기화 단계진행

착각하지말아야할 내용

전역코드 평가과정(소스코드 평가과정)에서 선언문만 먼저 실행된다라고 하는데 이때 선언문은 호이스팅 된 선언문이고 선언단계가 실행되는데
실제 기존에 존재하는 선언문 부분이 실행되는 전역코드 실행과정 부분에서 이때가 초기화단계가 발생한다!!!
그러니 그전에 해당 변수값을 참고하려 할 경우 초기화가 안되어 오류가 난다.

13. this

자신이 속한 객체
자신이 생성할 인스턴스를 가리키는 자기 참조 변수

this 결정과 변수 값 결정

• 변수

  함수의 상위스코프 위치 결정하기 : 정의되는 방식에 따라
  (정적 스코프)

• this

  this의 대상 결정하기 : 호출되는 방식에 따라
  (동적으로 결정)

this의 호출방식 종류 4가지

1. 일반 함수 호출
2. 메서드 호출
3. 생성자 함수 호출
4. Function.prototype.apply/call/bind 메서드에 의한 간접 호출

• 일반함수 : 함수 내부의 this에는 쩐역 객체가 바인딩
  (콜백함수 및 중첩함수도 마찬가지)

• 메서드 : 메서드를 호출한 객체

• 생성자 함수 호출 : 생성자 함수가 (미래에) 생성할 인스턴스

14. ES6 기능

메서드의 의미

ES6 사양에서는 메서드는 메서드 축약 표현으로 정의된 함수만을 의미한다.
인스턴스를 생성할 수 없는 non-constructor이어야 메서드이다.

const obj = {
  a : 1,
  f(){return this.a;},			//(축약표현) 메서드
  bar : function(){return this.a;}	//메서드가 아닌 일반 함수
}

화살표 함수

• 특징

  인스턴스를 생성할 수 없는 non-constructor이다.
  화살표함수는 자체로 this,arguments,super,new.target 바인딩을 갖지않는다.
  => 스코프체인을 통해 상위스코프를 참조한다.
  => 화살표함수가 중첩된다면 가장가까운 상위함수중에서 화살표함수가 아닌 대상을 참조

메서드와 화살표함수

메서드를 화살표함수로 정의하는 것은 피해야한다.
=> 상위 스코프인 전역의 this가 가리키는 전역 객체를 나타내므로
메서드 정의는 메서드 축약 표현을 추천