전체 글
[자바스크립트] ES6 의 함수
ES6의 함수 ES6 이전까지의 자바스크립트 함수는 다양한 목적으로 사용되었습니다. 일반 함수 호출, new 연산자와 생성자 함수로서 호출, 객체에 바인딩되어 메서드로의 호출이 가능했습니다. 이는 유연하다는 장점이 되는것처럼 보이지만 실수를 유발시킬 수 있고 성능 면에서도 손해인 경우가 많습니다. ES6 이전의 함수는 일반 함수로 호출되는 것들이 생성자 함수로도 호출이 가능합니다. 이는 callable 하면서도 constructor 인 함수의 특징 때문인데, 생성자 함수만이 가져야 할 prototype 프로퍼티를 일반 함수들도 가지고 있다는 점에서 문제가 생깁니다. 이는 불필요한 프로토타입 객체를 생성하기 때문입니다. 이처럼 ES6 이전의 모든 함수는 사용 목적에 따른 명확한 구분이 존재하지 않습니다. ..
[자바스크립트] 클로저
클로저 자바스크립트에 대해 조금이라도 관심을 가진 사람들은 클로저라는 난해한 개념에 대해 들어보셨을 겁니다. 사실 대부분의 사람들은 사전지식없이 클로저를 먼저 공부하고는 합니다. 클로저는 렉시컬 환경과 렉시컬 스코프에 대한 사전 지식이 필요합니다. 먼저 MDN 에서 정의된 클로저의 정의에 대해서 이야기 해보도록 하겠습니다. MDN 에서 클로저는 함수와 그 함수가 선언된 렉시컬 환경의 조합 이라고 이야기하고 있습니다. 함수는 잘 알고 있지만, 함수가 선언된 렉시컬 환경은 딱 와닿지가 않습니다. 먼저 렉시컬 스코프에 대해서 알아보겠습니다. 렉시컬 스코프 자바스크립트 엔진은 함수의 상위스코프를 결정할 때 호출한 위치가 아닌 함수의 정의 위치에 따라 결정합니다. 이러한 특징을 렉시컬 스코프라고 부릅니다. 아래 ..
[자바스크립트] 실행 컨텍스트 (2)
실행 컨텍스트 실행 컨텍스트는 자바스크립트의 동작 원리를 담고 있습니다. 실행 컨텍스트를 바르게 이해하면 스코프 기반으로 식별자와 식별자에 바인딩된 값을 관리하는 방식, 호이스팅의 이유, 클로저(!!)의 동작 방식등의 동작 방식의 이해가 가능합니다. 이번에는 예제를 통해 어떻게 실행 컨텍스트가 생성되고 식별자를 검색하는지 살펴보겠습니다. 예제를 통해 알아보는 실행 컨텍스트의 생성과 식별자 검색 과정 var x = 1; const y = 2; function foo(a) { var x = 3; const y = 4; function bar(b) { const z = 5; console.log(a + b + x + y + z); } bar(10); } foo(20); // 42 0. 전역 객체 생성 사실 자..
[자바스크립트] 실행 컨텍스트 (1)
실행 컨텍스트 실행 컨텍스트는 자바스크립트의 동작 원리를 담고 있습니다. 실행 컨텍스트를 바르게 이해하면 스코프 기반으로 식별자와 식별자에 바인딩된 값을 관리하는 방식, 호이스팅의 이유, 클로저(!!)의 동작 방식등의 동작 방식의 이해가 가능합니다. 내용이 방대하기 때문에 여러번에 나눠서 시리즈처럼 정리해보도록 하겠습니다. 소스코드 자바스크립트에서 소스코드는 총 4가지 타입으로 구분합니다. 이를 굳이 구별해놓은 이유는 당연히 서로 다르기 때문입니다. 소스코드의 타입에 따라서 실행 컨텍스트를 생성하는 과정이 다르고 관리하는 내용도 달라집니다. 소스코드는 아래와 같이 구분합니다. 타입 내용 전역 코드 전역에 존재하는 코드. 함수, 클래스등의 내부 코드는 포함 x 함수 코드 함수 내부에 존재하는 코드. 중첩된..
[자바스크립트] 자바스크립트에서의 this
자바스크립트에서의 this Java 나 C++ 같은 언어에서의 this는 항상 클래스가 생성할 인스턴스를 가리키게 됩니다. 하지만 자바스크립트에서의 this는 함수 호출 방식에 따라서 this 바인딩이 동적으로 일어나게 됩니다. 이는 this 바인딩에 대해서 제대로 알지 못하면 예기치 않은 결과를 만들어 낼 수 있다는 것을 이야기합니다. 이번 글에서는 자바스크립트의 this 바인딩이 동적으로 일어나는 경우에 대해서 정리해보도록 하겠습니다. this 란? this 는 객체 지향 프로그래밍과 관련이 있습니다. 객체란, 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합 자료구조입니다. 메서드는 객체의 상태인 프로퍼티를 참조, 변경이 가능해야 합니다. 이 경우 메서드의 입장에..
[자바스크립트] 클래스란 무엇일까?
JS 의 클래스 자바스크립트는 프로토타입 기반의 객체지향 언어입니다. 대부분의 사람들은 자바스크립트는 객체지향 프로그래밍이 아닌 함수형 프로그래밍 언어로 알고있지만, 사실 자바스크립트는 프로토타입을 기반으로 한 강력한 객체지향 프로그래밍을 제공하기도 하는 멀티 패러다임 언어입니다. 프로토타입이에요. 사실 대부분의 사람들은 Java, C++ 과 같은 언어에서부터 시작해 클래스 기반 언어에 익숙합니다. 이런 분들은 프로토타입 기반의 프로그래밍 방식에 어려움을 느낄 수 있어 프로토타입은 JS 를 어렵게 느끼게 만드는 수많은(?) 장벽중 하나의 장벽으로 인식되고는 했습니다. 프로토타입 쉬워요 ^^ 한번 해요 ^^ 라고 말하는 JS 의 프로토타입 고수(?)가 아닌, 클래스가 익숙한 프로그래머들의 좀 더 빠른 학습..
Tree 에 대해서 알아보자! (자료구조, 알고리즘)
안녕하세요 원재입니다 ^ㅡ^ 이번 글에서는 빠른 탐색을 위해 사용되는 트리 자료구조에 대해서 알아보려고 합니다! Tree 는? Tree 는 말 그대로 나무입니다 ^ㅡ^ 읽어주셔서 감사합니다가 아니라 생뚱맞게 왜 자료구조를 공부하기 위해 작성된 게시글에서 갑자기 나무 사진을 들고 여러분들에게 소개를 하고있을까요? 한번 위에 있는 나무를 뒤집어 볼까요? 독자분들이 물구나무서기를 할 필요없이 제가 완벽하게 뒤집었습니다. 근데 이게 무슨 소용이 있길래 제가 어마무시한 노력과 정성 그리고 시간을 들여 나무를 뒤집어버렸을까요? 바로 아래 배울 자료구조로서의 트리의 생김새가 마치 나무를 뒤집은 것과 비슷하게 생겼기 때문입니다. 위 그림이 우리가 알아볼 트리입니다. 꽤나 비슷하게 생기지 않았나요? 사실 저도 뒤집어놓고..
Union-Find(Disjoint-Set) 에 대해, + BOJ 4195
안녕하세요 원재입니다 ^ㅡ^ 이번에는 알고리즘에서 주로 쓰이는 (특히 그래프 알고리즘) Union-Find 에 대해서 알아보려고 합니다! Union-Find 는? Union-Find 의 가벼운 첫 인상을 알려드리자면, Union-Find 는 우리 조상님 찾기 라고 볼 수 있습니다! 조상님이라고 부르세요 위와 같은 그래프가 있다고 생각해 봅시다. 루트 노드는 1 과 5 가 되겠죠? 3,4 를 자식으로 가지는 1번 트리와, 6, 2를 자식으로 가지는 5번 트리가 존재한다고 생각하겠습니다. 그렇다면 우리는 Union-Find 를 통해 4의 조상님은 1이에요! 라는 것을 Find 할 수 있습니다. 그렇다면 Union 은 어떨때 사용할까요? 바로 족보 구매 입니다. 족보입니다 만약 위와 같은 노드에서 5번 노드가..