Javascript 심화

야생피카츄·2023년 9월 20일

JavaScript 웹

javascript에 대해 알아보자

목록 보기

5/7

실행되는 환경 : browser, nodejs(로컬)

javascript 코드의 실행

코드 없이 실행되는 경우

javascript engine은 코드가 없으면 세가지 변수를 초기화하게된다.

this : window

코드가 실행되는 시점의 환경이 가리키는 객체(window).
window는 브라우저에서 글로벌 최상위단의 스코프에 존재하는 객체

Variable Object : {}

아무 변수가 없으므로 빈 객체가

Scope chain : []

연결된 스코프가 없어서 빈 객체

코드가 없어도 실행 환경(Execution Context)를 초기화
스코프는 코드가 현재 실행되는 환경, context를 의미한다.
this 포인터, variable object, 스코프 체인 등이 환경에 포함된다.
this 포인터의 경우 글로벌 스코프에서는 window를 가리킨다.

function myFunc(){
  let a = 10;
  let b = 20;
  function add(first, second){
    return first + second
  }
  return add(a, b);
}

myFunc() 전 단계에서 this, variable object, scope chain이 초기화 되게 된다.
variable object에 myFunc()가 포함
myFunc가 실행되면서 기존 글로벌 컨텍스트는 존재하면서 새로운 실행 컨텍스트가 생성된다.
myFunc()함수가 실행이 끝나면 실행 컨텍스트는 제거된다.
모든 코드가 끝나면 글로벌 컨텍스트도 끝난다.

call stack : 실행 컨텍스트 스택

실행 컨텍스트가 쌓이면서 스택이 구성된다.

함수 실행시 함수 스코프에 따라 환경이 만들어짐
this, 함수 스코프 변수들, 스코프 체인이 형성
스코프 체인에 따라 글로벌 환경에 도달

객체의 메서드 호출

let o = {
  name: 'Daniel',
  method: function(number) {
    return this.name.repeat(number);
  }
}

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

객체의 매서드 호출시 this가 그 객체를 가리킨다
this : o
this가 가리키는 것은 컨텍스트에 따라 변할 수 있다.

실행 컨텍스트

실행 컨텍스트는 자바스크립트 코드가 실행되는 환경
코드에서 참조하는 변수, 객체, this등에 대한 레퍼런스
실행 컨텍스트는 global에서 시작해 함수가 호출될 때 스택에 쌓이게됨
전역 실행 컨텍스트 -> 함수 실행 컨텍스트 순서로 만들어진다

렉시컬 환경

식별자와 실벽자에 연결된 값을 저장하는 자료구조
스코프 체인으로 연결되어 값을 가져올 수 있는?

this

dynamic binding

함수가 호출되는 상황

함수 호출

함수 직접 호출.

myFunc();

메서드 호출

객체의 메서드 호출

o.method();

생성자 호출

생성자 함수를 호출. 생성자 함수 내부의 this는 new 키워드를 통해 앞으로 만들어질 인스턴스 객체를 가리킵니다.

function Person(){
	this.name = 'abc';
}

const p = new Person();

간접 호출

call, apply 함수 객체의 메서드를 상속받음. setTimeout으로 함수의 실행 환경을 바꾼다.

setTimeout(p.printName.bind(p)) //bind는 특정 this변수 객체를 메서드에 묶어줌
//this값이 p를 가리키도록 바인드해줌

콜백함수

특정 동작 이후 불려지는 함수. 보통 다른 함수의 인자로 보내지는 함수

dynamic binding : 다양한 환경에서 호출되는 함수는 환경에 따라 this가 동적으로 세팅된다.

bind, apply, call등으로 조작 가능
setTimeout에서 함수 호출 시 조작을 안해주면 전역을 가리키게됨

화살표 함수와 일반함수 this

화살표 함수

화살표 함수의 this는 호출된 함수를 둘러싼 실행 컨텍스트(부모의 컨텍스트)를 가리킨다
this가 정해지면 바꿀 수 없다
call, bind, apply를 사용해도 바뀌지 않는다
setTimeout등 this가 바뀌는 상황에서 유용

일반 함수

일반 함수의 this는 새롭게 생성된 실행 컨텍스트를 가리킨다

Closure

일급 객체

자바스크립트에서 함수는 일급 객체(변수처럼 다룰 수 있는 객체)
다른 함수의 인자로 넘기고 변수로 생성할 수 있다.
이 성질을 이용한게 closure

closure

함수 생성시 함수 내부에서 사용되는 변수들이 외부에 존재하면 그 변수들은 함수의 스코프에 저장
함수와 함수가 사용하는 변수들을 저장한 공간

Closure를 왜 사용하나요?

클로저를 사용하는 이유는 상태를 안전하게 은닉하고 보존시키기 위함입니다.
그리고 이를 수정하는 방법은 특정 함수한테만 그 권한을 줍니다.

즉, 다수의 개발자와 함께 일을 할 때 실수를 방지하고 더 탄탄한 코드를 만들기위한 코드 패턴입니다.
따라서 다음과 같이 클로저를 만들어 사용합니다.

function createCard() {
    let title= "";
    let content= "";
    
    function changeTitle(text) {
      title= text
    }
    
    function changeContent(text) {
      content= text
    }
    
    function print() {
      console.log("TITLE -", title);
      console.log("CONTENT -", content);
    } 

    return { changeTitle, changeContent, print};
}

createCard 함수 본문에 있는 title, content 변수는 외부에서 접근할 수 없습니다.
따라서 changeTitle, changeContent 함수를 통해 수정할 수 있도록 해주었습니다.
값을 읽을 수 있도록 제공하는 함수는 print로 해주었습니다.

그리고 이 모든 함수를 객체로 묶어서 createCard 함수에서 return 합니다.
const myCard = createCard()와 같은 형태로 인스턴스를 만들어서 사용할 수 있습니다.

Rest Operator

함수의 인자, 배열, 객체 중 나머지 값을 묶어 사용하도록 한다

함수 인자 Rest Operator

함수의 인자들을 하나의 배열로 묶는다

function findMin(...rest){
	return res.reduce((a, b)=> a<b ? a : b);
}

findMin(7,3,2,1,5);

객체 RestOperator

지정된 필드 외의 나머지 필드를 객체로 묶는다.

const o = {
	name: 'name',
	age: 21,
	address: 'building',
	job: 'cheif'
}

const {age, name, ...rest} = 0;//rest {address: ~  , job : ~}
findSamePerson(age, name);

배열 Rest Operator

나머지 인자를 다시 배열로 묶는다. 아래 코드에서 tail변수는 첫 번째 원소 head를 제외한 나머지 값들을 다시 배열로 묶는다. tail은 하나씩 줄어들게 되며 길이가 0이되면 합을 반환

function sumArray(sum, arr){
	if(arr.length === 0)return sum;
	const[head, ...tail] = arr;
	return sumArray(sum + head, tail);
}

Spread Operator

묶인 배열 혹은 객체를 각각의 필드로 변환
객체는 또 다른 객체로 spread가능
배열은 또 다른 배열의 인자, 함수의 인자로 spread 가능

객체 Spread Operator

spread operator의 등장 순서에 따라, 객체의 필드가 덮어 씌워 질 수 있다.
...o가 뒤에 등장하면 기존의 name필드가 나중에 등장하여 앞의 name: "Tom" 을 덮어 씌운다

const o = {
	name: 'name',
	age: 21,
	address: 'building',
	job: 'cheif'
}

const new_obj = {...o, name: "Tomas", age:13 }
const new_obj2 = {name: "tomas", age:13, ...o}

배열 Spread Operator

...Object.values는 객체 값들의 배열을 반환한다.

//o = { a : 1, b:2, c:3}
function findMinInObject(o){
	return Math.min(...Object.values(o))
}

야생피카츄

각성개발자

이전 포스트

[javascript] DOM을 알아보자

다음 포스트

Javascript 심화

javascript에 대해 알아보자

javascript 코드의 실행

코드 없이 실행되는 경우

this : window

Variable Object : {}

Scope chain : []

call stack : 실행 컨텍스트 스택

객체의 메서드 호출

실행 컨텍스트

렉시컬 환경

this

dynamic binding

함수가 호출되는 상황

함수 호출

메서드 호출

생성자 호출

간접 호출

콜백함수

화살표 함수와 일반함수 this

화살표 함수

일반 함수

Closure

일급 객체

closure

Closure를 왜 사용하나요?

Rest Operator

함수 인자 Rest Operator

객체 RestOperator

배열 Rest Operator

Spread Operator

객체 Spread Operator

배열 Spread Operator

[javascript] DOM을 알아보자

[Javascript] let과 var 그리고 const

0개의 댓글