[엘리스 SW트랙 4기] 3주차 - Day 13 - 실행컨텍스트, 렉시컬환경, This, 화살표함수, closure, spread operator

랸나·2023년 3월 15일
부트캠프엘리스SW엔지니어트랙엘리스트랙
0

엘리스 SW엔지니어트랙 4기

목록 보기
13/41
객체지향 함수.. this... 진짜 혼미함 ㅋㅋㅎㅎㅠㅜㅠ
감이 오면서도 안오는 이것들.. 그냥 this가 사용되는 여러가지 환경을 다 외워버리고, 
그때마다 개념을 떠올리는 형식으로 해야겠다. 
이해가 도저히 안되는것들은 일단 넘기자, 라고 생각한게 이주째... 이러다가 그냥 다 넘겨버리는거 아닌지 걱정된다.

도움 됐던 글 두개 첨부!! 두고두고 봐야지..

https://velog.io/@padoling/JavaScript-%ED%99%94%EC%82%B4%ED%91%9C-%ED%95%A8%EC%88%98%EC%99%80-this-%EB%B0%94%EC%9D%B8%EB%94%A9)
<< 진짜 명료하게 잘 써놓으셔서, 절대 안지우셨으면 좋겠다..>>
https://cocoder16.tistory.com/45

실행 컨텍스트 (execution context)

  • 실행 컨텍스트(execution context)를 이해하면 자바스크립트의 동작을 스펙 레벨에서 이해하고 활용 가능
  • 실행 컨텍스트는 자바스크립트 코드가 실행되는 환경
  • 코드에서 참조하는 변수, 객체(함수 포함), this 등에 대한 레퍼런스가 있다.
  • 실행 컨텍스트는 전역에서 시작해, 함수가 호출될 때 스택에 쌓이게 된다.

자바스크립트 함수가 실행되는 과정

1. 어떤 코드도 없는 경우 (자바스크립트 코드 없이 실행되는 경우)

코드가 없어도 실행환경(실행 컨텍스트가) 초기화됨
레퍼런스변수 (this)는 글로벌 스코프에서 Window를 가리킴. 

- this : window (글로벌 객체)
- 변수들 (variable obeject) : {} (빈 객체)
- scope chain : [] (최상위 스코프)

2. 함수 콜스택

  • 함수가 실행되면 함수 스코프에 따라 환경이 만들어짐
  • this, 함수 스코프의 변수들, 그리고 스코프 체인이 생겨남
  • 스코프 체인을 따라 글로벌 환경에 도달 
<script>
function myFunc(){
	let a = 10
    let b = 20
    function add (first, second){
    	return first + second
    }
    
  return add(a,b)
}
</script>

myFunc()
---------------------------------------
- this :undefined
- 변수들 (variable obeject) : {
	first :10
    second : 20
    }
- scope chain : [myFunc, global]

---------------------------------------
- this : undefined (strict mode)
- 변수들 (variable obeject) : {
	a: 10
    b: 20
    add function{...}
    }
- scope chain : global

---------------------------------------
- this : window (글로벌 객체)
- 변수들 (variable obeject) : {myFunc}
- scope chain : [] (최상위 스코프)

3. 객체가 있고, 객체의 메소드 호출하는 경우

  • 객체 메서드의 경우 메서드 환경의 This는 해당 객체
  • 하지만 this가 가리키는 것은 환경에 따라 변할 수 있따.
<script>
let o = {
	name : 'Daniel'
    method : function(number){
    	return this.name.repeat(number)
	}
}

function myFunc(){
	let n = 10
    return o.method(n)
}

myFunc()


</script>
---------------------------------------
// o.method 실행 컨텍스트
- this :o
- 변수들 (variable obeject) : {
	 number :10
    }
- scope chain : [myFunc, global]

---------------------------------------
// myFunc의 실행 컨텍스트
- this : undefined 
- 변수들 (variable obeject) : {
	n: 10
    }
- scope chain : global

---------------------------------------
- this : window (글로벌 객체)
- 변수들 (variable obeject) : {
	o: {...},
    myFunc: function(){...}
    }
- scope chain : [] (최상위 스코프)

전역 실행 컨텍스트, 함수 실행 컨텍스트

  • 자바스크립트가 실행될 때 전역 실행 컨텍스트(Global Execition Context) 가 만들어짐.
  • 함수가 실행될 때 함수 실행 컨텍스트(Function Execution Context)가 만들어짐
  • console같은 전역 객체 함수는 전역 실행 컨텍스트로..

렉시컬 환경

  • 렉시컬 환경은 식별자와 식별자에 연결된 값을 저장하는 자료구조임
  • 자바스크립트는 정적 스코프 (static scope)
<script>
const myName = "Elice";

function Coder() {
  const title = "Coder Land";
  return title;
}
</script>

전역 렉시컬 환경 : Myname(식별자) + "Elice" (식별자에 연결된 값) , Coder

Coder 함수의 렉시컬 환경 : title(식별자 + "Coder land"(식별자에 연결된 값)
또한 전역 렉시컬 환경에 스코프체인으로 연결되어있음. 전역에는 Coder라는 정보를 갖고 있기 때문.

this가 가리키는것

  • dynamic binding (함수가 호출되는 상황은 4가지)
    • 함수 호출 : (함수를 직접 호출한다)
    • 메서드 호출 : ( 객체의 메서드를 호출한다)
    • 생성자 호출 : (생성자 함수를 호출한다)
    • 간접 호출 : call, apply(function 객체의 메소드)등으로 함수를 간접 호출한다.
    • 그 외 콜백함수의 호출이 있음 ( 특정 동작 이후 불려지는 함수, 보통 다른 함수의 인자로 보내지는 함수를 의미함)
  • 함수는 다양한 상황(환경) 에서 호출될 수 있음.
  • 함수의 호출 환경에 따라 this는 동적으로 세팅됨.
  • 이렇게 this가 환경에 따라 바뀌는 것을 동적 바인딩(dynamic binding)이라고 한다. bind, apply, call등으로 this가 가리키는 것을 조작할 수 있음.

화살표 함수와 일반 함수의 this

  • 화살표함수의 This : 호출된 함수를 둘러싼 실행 컨텍스트를 가리킨다.
  • 일반 함수의 This : 새롭게 생성된 실행 컨텍스트를 가리킨다. 
<script>

const o = {
	method(){
    	console.log("context: ", this) // o 
        let f1 = function(){
        		console.log("[f1] this : " , this)
            }
        let f2 = () =>
        	console.log("[f2] this : " , this) 
            
            f1() // global
            f2() // o 
        }
 };

o.method() 
</script>
  • f1()은 실행될 때 새로운 컨텍스트를 생성함. 이때 f1에 바인딩된 컨텍스트가 없으므로 This 는 글로벌을 가리킴
  • f2()는 함수 컨텍스트를 생성하며 This 변수는 부모의 컨텍스트를 가리킴. 따라서 This는 O
  • 화살표 함수의 This는 정해지면 바꿀 수 없다.
  • call, bind, apply를 해도 바뀌지 않는다.
  • setTimeout등 this가 바뀌는 상황에서 유용하다.

자바스크립트 실행

  • 자바스크립트는 흔히 인터프리터 언어라고 말하지만, 컴파일 언어의 면모가 있음. 자바스크립트 컴파일은 여러 단계로 구성되며, 각 단계별로 코드를 처리하는 목적이 다름.

함수는 일급 객체 (first-class object)

  • 일급 객체란, 다른 변수처럼 대상을 다룰 수 있는 것을 말한다.
  • 자바스크립트에서 함수는 일급 객체이다.
  • 즉, 자바스크립트에서 함수는 변수처럼 다룰 수 있다.

클로저

  • 변수가 쓰일 수 있는 범위는 그 변수가 속한 함수가 어디서 실행됐냐가 아니라, 어디서 정의됐냐에 따라 달라짐.
  • 자바스크립트 클로저는 함수의 일급 객체 성질을 이용한다.
  • 함수가 생성될 떄 함수 내부에서 사용되는 변수들이 외부에 존재하는경우, 그 변수들은 함수의 스코프에 저장된다.
  • 함수가 함수가 사용하는 변수들을 저장한 공간은 클로저라고 한다.

ES6 Rest, Spread Operator

Rest Operator

  • 함수의 인자, 배열, 객체 중 나머지 값을 묶어 사용하도록 하는 것.
  • 함수의 인자 중 나머지를 가리킨다.
  • 배열의 나머지 인자를 가리킨다.
  • 객체의 나머지 필드를 가리킨다.
<script>
function findMin(...rest){ // 인자들을 배열로 묶어줌 [7,3,4,2,4,1]
	return rest.reduce((a,b) => a < b ? a :b )
}

findMin(7,3,5,2,4,1) //1
</script>
<script>
const o = {
	name : "Daniel",
    age : 23,
    address : "Street",
    job : "Software Engineer",

};

const { age, name, ...rest } = 0; // 이때 rest는 어드레스와 잡 을 포함한 객체임. 
findSamePerson(age,name);

</script>

spread operator

  • spread operator의 등장 순서에 따라 객체의 필드가 덮어씌어질 수 있다. 
<script>
const o = {
	name : "Daniel",
    age : 23,
    address : "Street",
    job : "Software Engineer",

};

let o2 = {...o, name : "Tom", age : 24}
let o3 = {name : "Tom", age : 24 ...o}

o2.job  //Software Engineer
o3.name // Daniel
</script>
  • mergeObjects는 주어진 객체들의 필드를 합친다.다.
  • findMinInObject에서는 객체의 필드들중 최솟값을 반환한다.
  • Object.values는 객체값들의 배열을 반환한다.
  • 배열 spread operator로, Math.min의 인자를 넘긴다
<script>
function findMinInObject(o){
	return Math.min(...Object.values(o)) 
}

let o1= { a: 1}
let o2= { b: 3}
leto3= { c: 7}

findMinInObject(
	mergeObjects(o1, o2, o3)) // 1
</script>

자바스크립트 비동기

미니 프로젝트

profile
랸나
백엔드개발자
이전 포스트

[엘리스 SW트랙 4기] 3주차 - Day12 - 생성자(new) / class / class 상속 / class super / class private, public // 이터레이터 (작성중)

다음 포스트

[엘리스 SW트랙 4기] 3주차 - Day 14 - 에러처리(try, catch) / 콜백함수, promise, async, await

0개의 댓글