본문 바로가기

전체 글

 (63)
자바스크립트에서 작동 위임이란 이 게시글은 기존의 클래스/상속 디자인 패턴에서 작동 위임 디자인 패턴으로 사고방식을 바꾸기 위함입니다. 자바스크립트 (이하 JS)의 무한한 가능성을 이끌어낼 가장 중요한 핵심 기능이자 실제적인 체계는 전적으로 '객체를 다른 객체와 연결하는 것'에서 비롯됩니다. 클래스 지향과 대비하여 객체를 다른 객체에 연결하는 코드 스타일을 OLOO (Objects Linked to Other Objects)라고 지칭하겠습니다. 이 코드 스타일에서 우리는 객체가 다른 객체에 작동을 위임하는 부분만 신경 쓰면 됩니다. OLOO 스타일 코드의 특징은 다음과 같습니다. 상탯값은 위임하는 쪽에 두고 위임받는 쪽에 두지 않는다. 같은 명칭이 뒤섞이는 일이 될 수 있으면 피해야 한다. 암시적 호출부에 따른 this 바인딩 규칙에..
자바스크립트에서 프로토타입이란 자바스크립트 (이하 JS) 객체에는 [[Prototype]]이라는 내부 프로퍼티가 있고 다른 객체를 참조하는 단순 레퍼런스로 사용됩니다. var otherObj = { a: 2 }; var myObj = Object.create(otherObj); console.log(myObj.a); // 2 myObj는 otherObj와 [[Prototype]]이 링크됩니다. myObj.a란 프로퍼티는 없지만 otherObj에서 2라는 값을 대신 찾아 프로퍼티 접근의 결괏값으로 반환합니다. 만약 otherObj에서도 a라는 프로퍼티를 찾지 못했다면 프로토타입 연쇄를 다시 따라 올라가고 일치하는 프로퍼티명이 나오거나 프로토타입 연쇄가 끝날 때까지 이 과정은 반복됩니다. 연쇄 끝에 이르러서도 프로퍼티가 발견되지 않으면 ..
자바스크립트에서 클래스의 진실 이 글에서는 ES6 이후로 사용할 수 있는 class 문법이 아닌, 자바스크립트에서 클래스가 가지는 체계와 개념을 중점적으로 설명합니다. 클래스는 특정 자료 구조를 분류하는 용도로 사용됩니다. 예를 들면, Vehicle 클래스와 Car 클래스는 서로 상속관계로서, Vehicle은 엔진 등의 추진 기관과 사람 등을 운송하는 기능을 함께 정의합니다. Car는 Vehicle의 기반 정의를 상속 받아 정의하여 세분화한 것입니다. 다형성은 부모 클래스에 뭉뚱그려 정의된 작동을 자식 클래스에서 좀 더 구체하하여 오버라이드 (재정의)하는 것을 의미합니다. 그렇다면 자바스크립트 (이하 JS)에는 클래스가 존재할까요? 단도직입으로 말해서 아닙니다. 많은 개발자들이 적어도 외관상으로는 클래스처럼 생긴 구문을 제공하여 클래..
자바스크립트에서 객체란 객체는 선언적 형식과 생성적 형식, 두 가지로 정의합니다. var obj = { key: value, } // 리터럴 형식 var obj2 = new Object(); // 생성자 형식 obj2.key = value; 두 형식 모두 결과적으로 생성되는 객체는 같습니다. 유일한 차이점은 리터럴 형식은 한 번의 선언으로 다수의 key - value 쌍을 프로퍼티로 추가할 수 있지만, 생성자 형식은 한 번에 한 프로퍼티만 추가할 수 있다는 것입니다. 이전에 자바스크립트 (이하 JS)의 타입의 종류를 말씀드린 적이 있습니다. null undefined boolean number string object symbol 여기서 object와 symbol을 뺀 나머지 5가지 타입은 단순 원시 타입입니다. 여기서 명확히..
자바스크립트에서 this란 this를 둘러싼 오해 this는 모든 함수 스코프 내에 자동으로 설정되는 특수한 식별자입니다. this는 어떤 식으로도 함수의 렉시컬 스코프를 참조하지 않습니다. function foo() { var a = 2; this.bar(); } function bar() { console.log(this.a); } foo(); // error foo()와 bar()의 렉시컬 스코프 사이에 어떤 연결 통로를 만들어서 bar가 foo의 내부 스코프에 있는 변수 a에 접근하게 하고 싶지만 그건 불가능합니다. this는 작성 시점이 아닌 런타임 시점에 바인딩되며 함수 호출 호출 당시 상황에 따라 콘텍스트가 결정됩니다. 렉시컬 스코프가 함수 선언문 위치가 중요하다면 this 바인딩은 오로지 어떻게 함수를 호출했느냐에 ..
자바스크립트에서 클로저란 클로저는 렉시컬 스코프에 의존해 코드를 작성한 결과로 그냥 발생합니다. 여기서, 렉시컬 스코프란 개발자가 코드를 작성할 때 함수를 어디에 선언하는지에 따라 정의되는 스코프입니다. 모든 코드에서 클로저는 생성되고 사용됩니다. function foo() { var a = 2; function bar() { console.log(a); // 2 } bar(); } foo(); 함수 bar()는 렉시컬 스코프 검색 규칙을 통해 바깥 스코프의 변수 a에 접근할 수 있습니다. (이 경우에는 RHS 참조 검색) 여기서 클로저의 마법이 발생하는 것입니다. 선언된 위치 덕에 bar()는 foo() 스코프에 대한 렉시컬 스코프 클로저를 가지고 foo()는 bar()가 나중에 참조할 수 있도록 스코프를 살려둡니다. 즉, b..
자바스크립트에서 호이스팅이란 a = 2; var a; console.log(a); 다음의 결과값은 undefined가 아니라 놀랍게도 2입니다. console.log(a); var a = 2; 이 코드의 결과값은 undefined입니다. 이런 결과가 나오는 이유는 호이스팅 때문입니다. 호이스팅은 선언문을 끌어올리는 동작입니다. var a;는 선언문이고 a = 2는 대입문입니다. 따라서, 맨 위의 코드는 var a;가 호이스팅에 의해서 가장 위로 끌어올려지므로 2가 출력됩니다. 하지만, var a = 2;는 다릅니다. var a = 2;를 자바스크립트 (이하 JS) 엔진은 var a;와 a = 2;로 나누어서 처리합니다. 여기서, 선언문인 var a;만 맨 위로 끌어올려지므로 var a; console.log(a); a = 2; JS..
자바스크립트에서 함수, 블록 스코프란 직전 게시물에서 언급한 것처럼 스코프는 컨테이너 또는 바구니 역할을 하는 일종의 '버블'이며 변수나 함수가 그 안에서 선언됩니다. 이 컨테이너는 경계가 분명하게 중첩되고, 그 경계는 개발자가 코드를 작성할 때 결정됩니다. 함수 기반 스코프 스코프 안에 있는 모든 변수와 함수는 그 스코프에 속합니다. function foo(a) { let b = 2; function bar() { ... } let c = 3; } foo()의 스코프 버블은 변수 a, b, c와 함수 bar를 포함합니다. 즉, 스코프 안에 있는 모든 변수와 함수는 그 스코프 버블에 속합니다. 함수 스코프는 모든 변수가 함수에 속하고 함수 전체에 걸쳐 사용되며 재사용됩니다. 일반 스코프에 숨기 스코프를 이용해 변수와 함수를 숨기는 방식을 사..

티스토리툴바