Javascript 개념 정리

알고리즘 공부를 하며 부족했던 개념을 다시 정리

함수 표현식의 장점

참고 : 캠틴 판교님 블로그 - 함수 표현식 vs 함수 선언식
- 함수 선언식과 달리 호이스팅에 영향안받음.
- 클로져로 사용.
- 콜백으로 사용(다른 함수의 인자로 넘길수 있음)

: AirBnb의 스타일가이드에서는 함수 표현식을 쓰길 권함.

스코프

참고 :
- 제로초님 블로그 함수의 범위(scope)
- poiemaweb - 스코프

변수의 유효범위.

스코프는 함수 호출이 아닌 함수 선언시 생성. -> 렉시컬 스코핑(Lexical Scoping), 정적 스코핑

C-family language는 블록레벨 스코프. Js는 함수 레벨 스코프

var name = 'zero';
function log() {
  console.log(name);
}

function wrapper() {
  name = 'nero'; // 1번
  var name = 'nero'; // 2번
  log();
}
wrapper();

1번과 2번일때 결과가 다름.

실행 컨텍스트

참고 :
- 제로초님 블로그 실행 컨텍스트 - 더 자세한 예시 참고
- Poiemaweb 실행 컨텍스트 - 실행 컨텍스트 그림설명 필독.

실행 컨텍스트는 실행 가능한 코드가 실행되기 위해 필요한 환경. 생성된 실행 컨텍스트는 실행 컨텍스트 스택에 쌓임. 실행 컨텍스트 스택은 LIFO(후입선출) 의 방식으로 관리됨

실행 컨텍스트는 3가지 객체를 가짐.
- Variable Object
  - 변수
  - 매개변수(parameter)와 인수 정보(arguments)
  - 함수 선언(함수 표현식은 제외)
- Scope Chain
- this

전역 컨텍스트 생성 -> 콜스택(실행 컨텍스트 스택)에 쌓임
함수 호출 시마다 컨텍스트 생성 -> 콜스택(실행 컨텍스트 스택)에 쌓임
컨텍스트 생성 시 컨텍스트 안에 변수객체(arguments, variable), scope chain, this가 생성
컨텍스트 생성 후 함수실행. 사용되는 변수들은 변수 객체 안에서 값을 찾고, 없다면 스코프 체인을 따라 올라가며 찾음
함수 실행이 마무리되면 해당 컨텍스트는 소멸.(클로저 제외) -> 콜스택(실행 컨텍스트 스택)에서 추출
페이지가 종료되면 전역 컨텍스트가 소멸 -> 콜스택(실행 컨텍스트 스택)에서 추출

활성객체

실행 컨텍스트가 생성되면 자바스크립트 엔진은 해당 컨텍스트에서 실행에 필요한 여러가지 정보를 담을 객체를 생성한다. 이를 활성객체라 한다.

객체가 사용할 매개변수, 사용자가 정의한 변수 및 객체를 저장 한다.

클로저

참고 : poiemaweb - 클로저

클로저는 자신이 생성될 때의 환경(Lexical environment)을 기억하는 함수다.
실행 컨텍스트의 관점에 설명하면, 내부함수가 유효한 상태에서 외부함수가 종료하여 외부함수의 실행 컨텍스트가 반환되어도, 외부함수 실행 컨텍스트 내의 활성 객체(Activation object)(변수, 함수 선언 등의 정보를 가지고 있다)는 내부함수에 의해 참조되는 한 유효하여 내부함수가 스코프 체인을 통해 참조할 수 있는 것을 의미한다.

용도 :

상태유지

전역변수 사용억제

정보은닉(private 키워드 흉내)

//// 1번 
var arr = [];

for (var i = 0; i < 5; i++) {
  arr[i] = function () {
    return i;
  };
}

for (var j = 0; j < arr.length; j++) {
  console.log(arr[j]());
}

//// 2번
var arr = [];

for (var i = 0; i < 5; i++){
  arr[i] = (function (id) { 
    return function () {
      return id; 
    };
  }(i)); 
}

for (var j = 0; j < arr.length; j++) {
  console.log(arr[j]());
}

//// 3번
const arr = [];

for (let i = 0; i < 5; i++) {
  arr[i] = function () {
    return i;
  };
}

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]());
}

1번 : 5 가 5번 출력 2번,3번 : 1,2,3,4,5 가 출력

2023 1
2022 2
2019 45
2018 1

2023

Flutter 맛보기 1

3 분 소요

직방 기술지원팀 기술공유 세미나 중 플러터를 소개한 내용입니다

2022

D3.js 차트 개발 Hands on lab

5 분 소요

직방 기술지원팀 기술공유 세미나 중 D3.js를 소개한 내용입니다

직방이 사용자 행동 로그를 관리하는 방법. ZAMS

최대 1 분 소요

직방에서 작성했던 블로그 글을 공유합니다.

2019

[Tutorial] Storybook과 Bit을 활용한 UI 컴포넌트 관리(Workflow)

1 분 소요

회사에서 프론트엔드 개발원칙을 SFC(Single File Component)에서 UI 컴포넌트를 기준으로 CDD(Component Driven Development)를 진행하려고 한다. 그래서 체계적으로 관리하기위해 Storybook과 Bit을 도입해보고자 한다. 각각의 역할은 ...

[Scaffold] Scaffold Module 개발

최대 1 분 소요

도입 이유

[Workflow] 프론트엔드 개발조직을 위한 워크플로 설계

2 분 소요

작성 배경 회사의 작업구조를 페이지 중심 개발에서 UI 컴포넌트 중심 개발로 변경하면서 Workflow를 개선할만한 환경을 구성해야했다. 폐쇄망 기반에서 개발자간 UI 명세서 역할을 할 수 있는 Storybook과 그것을 공유할 Verdaccio라는 구축형 NPM Pri...

[Git] Git Command 정리

3 분 소요

Git 시스템 이해하기

[Design Pattern] Monorepo 공부

2 분 소요

결론

[Methodology] CDD(Component Driven Development) - 테스트(2/2)

1 분 소요

Intro

[Methodology] CDD(Component Driven Development) - 계획(1/2)

1 분 소요

CDD(Component Driven Development)란?

GraphQL, Prisma, Apollo 공부

2 분 소요

GraphQL? RESTful?

[CodingTest] Combination(조합) 문제풀이 2

최대 1 분 소요

문제

[CodingTest] Combination(조합) 문제풀이 1

최대 1 분 소요

문제

[ESlint & Prettier] 개발 관습 설정 in Visual Studio

1 분 소요

회사 프로젝트를 작업하기 전 프론트엔드 개발자들 간의 코드 규칙을 Eslint와 Prettier 설정을 맞춰 관리해가는 방향을 정했다. 아직 협업을 할 경우는 없지만 미래에 인수인계 받거나 협업을 진행할 경우 코드관습이 달라 고생할 경우를 대비하기로 했다. 설정은 작업을 진행하며 ...