자바스크립트

오늘은 작동 위임에 대해서 정리해 보려고 한다. 이 책 Part 1의 마지막 챕터이다. 지난 프로토타입 에 대한 포스팅에서 프로토타입이 어떠한 역할을 하는지에 대해서 자세하게 알아보았다. 한 마디로 요약을 해 보면 [[Prototype]] 체계는 한 객체가 다른 객체를 참조하기 위한 내부 링크이며, 엔진은 이 링크를 따라 연결된 객체에 특정 프로퍼티/메서드가 있는지를 체크한다. 이와 같이 자바스크립트의 무한한 가능성을 이끌어 낼 가장 중요한 핵심 기능이면서 실질적인 체계는 전적으로 '객체를 다른 객체와 연결하는 것'에서 비롯된다. 위임 지향 디자인 [[Prototype]]의 사용방법을 쉽게 이해하기 위해서는 [[Prototype]]이 클래스와 근본적으로 다른 디자인 패턴이라는 사실을 인지해야 하며, 기존..

자바스크립트 객체와 클래스에 대한 포스팅에 이어 이번에는 프로토타입에 대해서 정리해 보려고 한다. [[Prototype]] 자바스크립트 객체는 [[Prototype]]이라는 내부 프로퍼티가 있고 다른 객체를 참조하는 단순 레퍼런스로 사용한다. [[Prototype]]은 어디에 쓰이는 걸까? 객체 프로퍼티를 참조할 때(myObject.a), 객체는 기본적으로 객체 자체에 해당 프로퍼티가 있는지를 찾고, 만약 있다면 그 프로퍼티를 사용한다. 하지만 만약에 myObject에 a라는 프로퍼티가 없다면 그 다음에는 이 객체의 [[Prototype]] 링크다. 두 번째 예제에서 connectObject는 anotherObject와 [[Prototype]]이 링크되었다. 분명히 connectObject.a 라는 프로..

이번 포스팅에서는 자바스크립트 클래스에 대해서 정리해 보려고 한다. 클래스 이론 클래스와 상속은 특정 형태의 코드와 구조를 형성하며 실생활 영역의 문제를 소프트웨어로 모델링 하기 위한 방법이다. 객체 지향 또는 클래스 지향 프로그래밍에서 데이터는 자신을 기반으로 하는 실행되는 작동(behavior)과 연관되므로 데이터와 작동을 함께 잘 감싸는(캡슐화) 것이 올바른 설계라고 강조한다. 예를 들어, 일련의 문자들은 보통 String이라는 단어를 나타낸다. 여기서 데이터는 문자들인데, 우리는 이 데이터를 가지고 원하는 작업을 하는 것이 관심사이므로 데이터에 적용 가능한 작동들을 모두 String 클래스의 메서드로 설계한다. 그래서 어떤 문자열이 주어지더라도 데이터와 작동이 잘 포장된 String 클래스의 인스..

이번 포스팅에서는 자바스크립트 객체에 대해서 공부한 내용을 정리해 보려고 한다. 객체 타입 객체는 선언적(Declarative, 또는 Literal) 형식과 생성자 형식, 두 가지로 정의한다. 그리고 객체는 언어 타입(Language Types)이라 불리는 7개의 주요 타입 중 하나를 가지고 있다. null undefined boolean number string object symbol(ES6에서 추가) 참고로 여기에서 단순 원시타입(Simple Primitives) 5개(string, number, boolean, null, undefined)는 객체가 아니다. 그리고 복합 원시타입(Complex Primitives)이라는 독특한 객체 하위 타입도 존재한다. 예를 들면 function 타입이 여기에 ..

오늘은 자바스크립트에서 많은 개발자들이 헷갈려하는 this 키워드에 대해서 확실하게 짚고 가보려고 한다. 많은 개발자들은 this를 다음 두 가지 의미로 많이 생각한다. 함수 그 자체를 가리킴 함수의 스코프(scope)를 가리킴 결론적으로 둘 다 올바른 의미로 이해한 것은 아니다. 하나씩 설명해 보려고 한다, 자기 자신으로의 this 함수가 내부에서 자기 자신을 가리킬 일이 언제 있을까? 재귀 로직이 들어가는 경우도 있고 최초 호출 시 이벤트에 바인딩 된 함수 자신을 언바인딩 할 때도 자기 참조가 필요하다. 아래의 코드는 함수가 this로 자기 참조를 할 수 없다는 것을 보여주는 예제이다. foo.count = 0을 하면 foo라는 함수 객체에 count 프로퍼티가 추가된다. 하지만 this.count에..

이번에는 타입스크립트의 클래스와 인터페이스에 대해 공부한 내용을 정리해 보고자 한다. 객체지향 프로그래밍과 클래스 기초 객체지향 프로그래밍(Object Oriented Programming, OOP)은 커다란 문제를 클래스 단위로 나누고 클래스 간의 관계를 추가하면서 코드 중복을 최소화 하는 개발방식이다. 클래스 간의 관계를 추가할 때는 상속이나 포함 관계를 고려하여 추가한다. OOP를 통해 어플리케이션을 개발하면 코드 중복을 상당히 줄일 수 있다. 타입스크립트는 자바스크립트(ES6)에 비해서 OOP를 지원하는 부분이 훨씬 더 많다. 타입스크립트에서는 클래스 선언을 다음과 같이 할 수 있다. 더불어 Rectangle 클래스 타입은 그 아래의 인터페이스 타입과 정확하게 일치한다. class Rectangl..

오늘은 타입스크립트의 제어문, 연산자, 함수에 대해서 공부한 내용을 정리해 보려고 한다. 참고로 자바스크립트에 나오는 문법과 겹치는 부분은 생략을 하고 타입스크립트에서 새롭게 추가되거나 변경된 문법들에 대해서만 다루려고 한다. 제어문 타입스크립트에서는 자바스크립트에서 사용하는 if문 및 switch문을 사용할 수 있다. if문에서 조금 헷갈릴 수 있는 부분 하나만 짚고 넘어간다. 타입스크립트에서 숫자 타입인데 숫자가 0이면 false를 나타내고, 0이 아닌 나머지 값은 true를 나타낸다. 문자열의 경우 빈 값은 false이고 값이 있으면 true이다. 아래의 예제를 참고하자. let text: string = ""; let statusActive: number = 0; let isEnabled: boo..

타입스크립트의 변수 선언 타입스크립트에서 변수 선언 방식은 var, const, let 이렇게 세 가지가 있다. 1. var 전역 공간이나 함수 내에서 변수를 선언할 때 var 선언자를 사용한다. var 로 선언된 변수는 다음과 같은 두 가지 특성이 있다. 첫 번째는 호이스팅(Hoisting)이다. 호이스팅은 선언한 변수가 스코프의 최상위로 끌어올림 되는 현상이다. 두 번째는 함수 레벨 스코프(function level scope)를 지원한다는 점이다. 이는 함수 내에서 선언한 변수는 함수 내에서만 유효하고 함수 외부에서는 참조할 수 없음을 의미한다. // var는 함수 레벨 스코프를 지원 var myName = "sad"; function functionLevel() { var myName = "hap..