전체 글67 [21.01.13] YDKJSY - The Module Pattern Encapsulation and Least Exposure 캡슐화는 종종 OOP의 원리로 인용된다. 하지만 이 개념은 더 포괄적인 영역을 맡고 있고, 최근 컴포넌트 기반 아키텍처의 어플리케이션을 설계하는 프론트 엔드 개발 영역에 이끄는 트렌드로 작용하고 있다. 캡슐화를 이용하는 가장 큰 목적은 데이터와 기능의 가시성을 통제하는 데에 있다. 이는 이전 챕터에서 다루었던 '노출의 최소화'의 관점과 같은 맥락을 유지하고 있고 JS에서는 렉시컬 스코프의 기술을 통해 이 관점을 지키고 있다. 이러한 노력의 자연스러운 결과는 결국 더 나은 코드의 체계화를 지향한다는 것이다. 어떤 경계를 기준으로 무엇이 어디 있는지 쉽게 알 수 있다는 것은 소프트웨어의 유지보수를 더 용이하게 하고 데이터와 기능의 외부 스코프로 무방.. 2024. 1. 7. [21.01.11] YDKJSY - Using Closures See the Closure 클로저는 함수의 동작 혹은 함수 그 자체다. 객체나 클래스는 클로저를 가질 수 없다. 클로저는 하나의 함수로써 그것의 초기 선언 지점으로부터 형성된 스코프 체인의 다른 분기에서 사용된다. 만약 선언된 곳과 같은 스코프에서 실행하는 함수라면, 그것은 클로저가 아니다. function count() { var counter = 0; return function() { return counter++; } } var counter1 = count(); counter1(); //0 counter1(); //1 counter1(); //2 counter1(); //3 함수 안에서 내부 함수를 반환하는 어떤 로직을 작성하고 그것을 특정한 변수에 할당하는 식으로 호출을 마치고 나면, 흔히 .. 2024. 1. 7. [21.01.08] YDKJSY - The (Not so) Secret Lifecycle of Variables When Can I Use a Variable? 변수를 사용할 수 있는 시기에 대한 명확(해 보이는 듯)한 답변은: 변수가 선언된 이후라고 생각할 수 있다. 하지만 이것은 정답이 아니다. greeting(); // Hello! function greeting(){ console.log("Hello!"); } 위의 코드는 정상적으로 실행되는 것을 볼 수 있다. 이전 챕터에서 확인했다시피, 모든 식별자들은 각각의 스코프들에 대해서 컴파일 과정에서 등록되고, 스코프에 진입하는 순간 그 시작 지점에서 식별자들은 생성된다. 이와 같이 변수 / 함수 선언이 스코프의 아래 부분에서 이루어졌다 하더라도, 인접한 스코프의 시작 지점에서 확인이 가능한 현상을 호이스팅이라고 한다. 이 현상에 대해서는 두 가지 케이스로 나누.. 2024. 1. 7. [21.01.08] JavaScript this 의 동작 원리 스터디 시간 동안 this 에 대한 열띤 토론이 이루어졌지만, 무언가 명쾌하게 끝나지 못한 느낌이 들어 지금까지 듬성듬성 알아왔던 개념을 다시금 확립하고자 이 글을 작성하게 되었습니다. 혹시 글을 읽고나서도 이해가 잘 되질 않거나, 교정할 만한 내용이 있으시다면 피드백 부탁드리겠습니다 :) References (Poiema Web) 실행 컨텍스트와 자바스크립트의 동작 원리 함수 호출 방식에 의해 결정되는 this 화살표 함수 위 링크에서 다루고 있는 주제를 순서대로 찬찬히 읽어 보신다면 아마 더 깊게 JS 의 동작원리를 이해할 수 있겠지만, 글의 성격에 맞게 몇몇 코드를 위주로 this 와 이를 이해하기 위해 필요한 약간의 배경 지식을 간단히 알아보겠습니다. Execution Context (실행 컨텍스.. 2024. 1. 7. [21.01.06] YDKJSY - Around the Global Scope Why Global Scope? 여러 개의 JS 파일들을 하나의 실행 컨텍스트 안에서 협력하게 하는 방법은 크게 세 가지가 있다. ES 모듈을 사용할 때, 각각의 모듈은 접근이 필요한 모듈이 필요할 때 import 를 할 수 있다. 그래서 서로 다른 파일들은 이 방법을 통해 따로 공유하는 외부 스코프 없이도 JS 환경 안에서 협력이 가능하다. 빌드하는 과정에서 번들러를 사용하면, 모든 파일들은 JS 엔진이나 브라우저로 전송되기 전에 하나의 파일로 병합된다. 번들 유무나 파일들이 개별적으로 브라우저에 연결되는 것과 상관없이, 이러한 파일들을 둘러싼 특정 스코프(e.g. Wrapper function, UMD) 가 존재하지 않는다면 전역 스코프 가 파일들을 서로 협력하게 할 유일한 방법이다. 전역 범위에서 .. 2024. 1. 7. [21.01.06] YDKJSY - The Scope Chain "Lookup" Is (Mostly) Conceptual lookup (검색) : 변수의 런타임 접근으로써, JS 엔진은 변수가 위치한 스코프에서 출발해 참고하고자 하는 변수가 존재할 때까지 상단 / 외부 스코프로 올라간다. 검색을 중지하는 조건은 매칭되는 변수를 찾았거나, 전역 스코프에 도달하거나 둘 중 하나이다. 하지만 위의 예시는 개념적인 이해를 돕기 위한 설명일 뿐이지, 실제로 작동하는 방식은 아니다. 각 스코프는 초기 컴파일 동안 대개 결정된다. 왜냐하면 렉시컬 스코프는 이미 이 시점에서 완료되고, 변수는 실행 시점에서 발생하는 어떤 것에도 영향을 받지 않기 때문이다. 이러한 정보들은 컴파일 동안 결정되기에 AST 단계의 내부 변수에 저장된다. 그리고 프로그램을 실행하는 명령들에 의해 사용된다... 2024. 1. 7. 이전 1 ··· 5 6 7 8 9 10 11 12 다음
