FrontEnd
[JS] DeepDive(24) 클로저
클로저는 난해하기로 유명한 JS의 개념 중하나이다. 클로저는 JS의 고유 개념은 아니며 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어에서 사용되는 중요한 특성이다. 클로저는 JS 고유의 개념이 아니므로 클로저의 정의가 ECMAScript 사양에 등장하지 않는다. MDN 문서에서는 클로저를 아래와 같이 정의하고 있다. 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다 const x = 1; // ① function outer() { const x = 10; const inner = function () { console.log(x); }; // ② return inner; } // outer 함수를 호출하면 중첩 함수 inner를 반환한다. // 그리고 outer 함수의 실행 컨텍스트는 실행..
![[JS] DeepDive(23) 실행 컨텍스트](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdkJkmL%2FbtsrIbAkz0x%2FZmpndWPa1kxXfA0gHqxg81%2Fimg.png)
[JS] DeepDive(23) 실행 컨텍스트
실행 컨텍스트는 JS의 동작 원리를 담고 있는 핵심 개념이다. 소스코드 타입 ECMAScript 사양은 소스코드를 4가지 타입으로 구분한다. 전역 코드 global code 전역에 존재하는 소스코드. 전역에 정의된 함수, 클래스 등의 내부 코드는 포함되지 않는다 함수 코드 function code 함수 내부에 존재하는 소스코드. 함수 내부에 중첩된 함수, 클래스 등의 내부 코드는 포함되지 않는다 eval 코드 eval code 빌트인 전역 함수인 eval 함수에 인수로 전달되어 실행되는 소스코드 모듈 코드 module code 모듈 내부에 존재하는 소스코드. 모듈 내부의 함수, 클래스 등의 내부 코드는 포함되지 않는다 모든 소스 코드는 실행에 앞서 평가 과정을 거친다. 소스코드 평가 과정에서 실행 컨텍스..
[JS] DeepDive(22) this
메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. 객체리터럴 방식으로 생성한 객체의 경우에는 재귀적 방식으로 자신이 속한 객체를 가리키는 식별자를 참조할 수 있다. // 객체 리터럴 const circle = { radius: 5, getDiameter() { // this는 메서드를 호출한 객체를 가리킨다. return 2 * this.radius; } }; console.log(circle.getDiameter()); // 10 위 예제의 객체 리터럴은 circle 변수에 할당되기 직전에 평가되어 getDiameter메서드가 호출될때 circle 식별자에 생성된 객체가 할당된 이후로 참조할 수 있다. 허나 이 방식은 일반적이지 않고 ..
[JS] DeepDive(20) 빌트인 객체
JS객체는 다음과 같이 크게 3개의 객체로 분류할 수 있다. 1. 표준 빌트인 객체 ECMPAScript에 정의된 객체로 애플리케이션 전역의 공통 기능을 제공한다. JS 실행환경에 상관없이 언제나 사용할 수 있다. 2. 호스트 객체 ECMAScript 사양에 정의되어 있지만 JS실행환경에서 추가로 제공하는 객체. DOM,BOM,Canvas 등과 같은 클라이언트 사이드 Web API를 호스트객체로 제공하며 Node.js에서는 Node.js고유 API를 호스트 객체로 제공한다. 3. 사용자 정의 객체 사용자 정의 객체는 표준 빌트인 객체와 호스트 객체처럼 기본 제공되는 객체가 아닌 사용자가 직접 정의한 객체를 말한다. 표준 빌트인 객체 Object, String, Number, Boolean, Symbol,..
[JS] 게임 맵 최단거리
BFS의 교과서(?) 적인 문제였던 것 같다. dx,dy 배열로 상하좌우 로 갈 방향을 정해주고 visited로 방문했던 곳인지 아닌지를 체크해준다. 큐 구조를 활용해서 BFS를 구현하였다. (케이스가 크지않아 실제 큐 구조로 문제를 해결하지는 않았다) ny,nx가 갈 수 있는 범위이면서 방문한 적이 없고 map에서 갈 수 있는 곳이라면 큐에 다음 목적지를 넣어주었다. function solution(maps) { const dx = [1,0,-1,0] const dy = [0,1,0,-1] const m = maps.length const n = maps[0].length const visited = [...Array(m)].map(v => Array(n).fill(false)) const que = ..
[JS] 124 나라
사실 3진법 문제이다. 단 0이 없어서 조금 많이 애를 먹었다. 우리가 진수를 변환할때처럼 3으로 나눠가며 나머지를 역순으로 더해주면 된다. 단, 123이 아닌 124가 나오도록 바꿔주면 된다. function solution(n) { let ret = ""; while(n > 0){ if(n % 3 === 0){ ret = "4" + ret n = ~~(n / 3) - 1; }else{ ret = (n % 3) + ret; n = ~~(n / 3); } } return ret }