'JavaScript/JS 객체지향 프로그래밍' 카테고리의 글 목록

자바스크립트 비공개 프로퍼티와 메서드

JS 비공개(private) 멤버 및 특권(privileged) 메서드 자바 등 다른 언어와는 달리 자바스크립트에는 private, protected, public 프로퍼티와 메서드를 나타내는 별도의 문법이 없습니다. 객체의 모든 멤버는 public, 즉 공개되어 있습니다. 자바스크립 객체의 모든 멤버는 공개되어 있다 위에 언급했듯이 다른 언어와 달리 별도의 문법이 없기 때문에 일반적으로 객체의 모든 멤버는 공개되어 있습니다. 다음의 예제를 살펴봅니다. javascript var myObj = { myProp : 1, getProp: function () { return this.myProp; } }; console.log(myObj.myProp); // myProp 에 공개적으로 접근할 수 있다. co..

JavaScript/JS 객체지향 프로그래밍 2018. 12. 25. 21:06

Chaining Pattern of JavaScript

체이닝패턴 체이닝 패턴이란 객체에 연쇄적으로 메서드를 호출할 수 있도록 하는 패턴입니다. 여러 가지 동작을 수행할 때, 먼저 수행한 동작의 반환 값을 변수에 할당한 후 다음 작업을 할 필요가 없기 때문에 호출을 여러 줄에 걸쳐 쪼개지 않아도 됩니다. javascript myobj.method1('hello').method2().method3('world').method4(); 만약 메서드에 의미있는 반환 값이 존재하지 않는다면, 현재 작업중인 객체 인스턴스인 this 를 반환하게 됩니다. 이렇게 하면 객체의 사용자는 앞선 메서드에 이어 다음 메서드를 바로 호출할 수 있습니다. javascript var obj = { value : 1, increment : function () { this.value +..

JavaScript/JS 객체지향 프로그래밍 2016. 10. 31. 07:00

Static member of JavaScript

스태틱 멤버 스태틱 프로퍼티와 메서드란 인스턴스에 따라 달라지지 않는 프로퍼티와 메서드 를 말합니다. 클래스 기반 언어에서는 별도의 문법을 통해 스택틱 멤버를 생성하여 클래스 자체의 멤버인 것처럼 사용할 수 있습니다. 예를 들어 MathUtils 클래스에 max() 라는 스태틱 메서드가 있다면MathUtils.max(2,5) 와 같은 식으로 호출할 수 있습니다. 이것은 공개 스태틱 멤버의 예로, 클래스의 인스턴스를 생성하지 않고도 사용할 수 있습니다. 비공개 스태틱 멤버는 클래스 사용자에게는 보이지 않지만 클래스의 인스턴스들은 모두 함께 사용할 수 있습니다. 그럼 자바스크립트에서 공개와 비공개 스태틱 멤버를 구현하는 방법을 살펴보도록 합니다. 공개 스태틱 멤버 자바스크립트에는 스태틱 멤버를 표기하는 별도..

JavaScript/JS 객체지향 프로그래밍 2016. 10. 29. 16:15

모듈 패턴(기타) 및 샌드박스 패턴 #3

모듈 노출 패턴, 생성자를 생성하는 모듈 그리고 샌드박스 패턴 이 포스팅에서는 전 포스팅의 모듈 패턴 #2 에서 알아본 내용 이외의 패턴들에 대해 알아봅니다. 모듈 노출 패턴 전 포스팅에서 비공개 멤버와 관련된 패턴을 살펴보면서 이미 노출 패턴을 다룬 바 있습니다. 모듈 패턴도 비슷한 방식으로 작성할 수 있습니다. 즉, 모든 메서드를 비공개 상태로 유지하고, 최종적으로 공개 API 를 갖출 때 공개할 메서드만 골라서 노출하는 것입니다. javascript var MYAPP = MYAPP || {}; MYAPP.namespace = function (ns_string) { var parts = ns_string.split('.'), parent = MYAPP, i; // 처음에 중복되는 전역 객체명은 제거..

JavaScript/JS 객체지향 프로그래밍 2016. 10. 19. 08:31

모듈화와 모듈 패턴(module pattern) #2

Module Pattern모듈화와 모듈 패턴에 대해 알아봅니다. 먼저 이 개념에 대해 알아보기 전에 고유변수(private member)와 특권메소드(privileged member)에 대해 간략히 짚고 넘어가자. 자바 등 다른 언어와는 달리 자바스크립트에는 private, protected, public 프로퍼티와 메서드를 나타내는 별도의 문법이 없다. 객체의 모든 멤버는 public, 즉 공개되어 있다.다시 말해서,자바스크립트에는 고유 구성원(private member)이란 개념이 없으며 객체의 프로퍼티는 모두 공용(public)이다. 하지만 '고유변수'란 개념은 존재한다. 예를 들어 함수 안에서 정의한 변수는 함수 밖에서 접근할 수가 없으므로 모두 고유변수(private member)라고 간주한다...

JavaScript/JS 객체지향 프로그래밍 2016. 10. 14. 15:17

module pattern (모듈패턴) #1

Module Pattern 모듈 패턴을 알아보기 전에 네임스페이스란 용어부터 짚고 넘어가 보겠습니다. 네임스페이스란 수많은 함수, 객체, 변수들로 이루어진 코드가 전역 유효범위를 어지럽히지 않고, 애플리케이션이나 라이브러리를 위한 하나의 전역 객체를 만들고 모든 기능을 이 객체에 추가하는 것을 말합니다. 예를 들어 jQuery와 같은 라이브러리에서 jQuery가 네임스페이스를 가지며 jQuery 이름 내에 모든 기능을 추가하는 것을 말합니다. 다시 말해서, 코드에 네임스페이스를 지정해주며, 코드 내의 이름 충돌뿐만 아니라 이 코드와 같은 페이지에 존재하는 또 다른 자바스크립트 라이브러리나 위젯등 서드파티 코드와의 이름 충돌도 미연에 방지해 주는 것입니다. 우리는 이러한 네이스페이스 패턴을 작은 기능들 만..

JavaScript/JS 객체지향 프로그래밍 2016. 10. 14. 15:08

new Object() 의 문제점

객체 생성자의 함정 객체 리터럴을 사용할 수 있는 상황에서는 new Object() 생성자를 쓸 이유가 없지만, 다른 사람이 작성한 레거시 코드를 물려받을 수도 있기 때문에 이 생성자의 '기능'하나를 알아둘 필요가 있습니다. 결국 이는 생성자를 써서는 안되는 이유이기도 합니다. 문제의 기능은 Object() 생성자가 인자를 받을 수 있다는 점입니다. 인자로 전달되는 값에 따라 생성자 함수가 다른 내장 생성자에 객체 생성을 위임할 수 있고, 따라서 기대한 것과는 다른 객체가 반환되기도 합니다. 다음은 new Object() 에 숫자, 문자열, 불린 값을 전달한 몇 가지 예입니다. 예상한 바와 다른 생성자로 생성된 객체가 반환됩니다. JavaScript // 경고 : 모두 안티 패턴이다. // 빈 객체 va..

JavaScript/JS 객체지향 프로그래밍 2016. 10. 11. 08:24

함수의 프로토타입(prototype) 핵심 정리

프로토타입 체인 자바스크립트는 Function() 인스턴스에 자동으로 prototype 이라는 속성을 만듭니다. 구체적으로 말하자면 prototype 속성은 new 키워드와 생성자 함수를 같이 사용해서 만든 객체에 연결됩니다. 인스턴스들은 생성자 함수의 prototype 속성을 통해 공통의 메소드와 속성을 공유하고 상속합니다. 중요한 사실은 이러한 공유가 속성을 검색하는 동안 일어난다는 것입니다. 즉, 어떤 객체의 속성을 찾거나 접근하면 자바스크립트는 그때마다 해당 객체는 물론 프로토타입 체인에서도 그 속성을 찾는다는 것입니다. 함수는 모두 prototype 객체를 포함하고 있다. 심지어 생성자 함수로 사용할 생각이 전혀 없는 함수도 prototype 객체를 자동으로 포함합니다. 다음은 Array() 생..

JavaScript/JS 객체지향 프로그래밍 2016. 10. 5. 12:54

클래스 기반(일반 언어)과 프로토타입(자바스크립트) 기반 비교

클래스 기반(일반 언어)과 프로토타입 기반 비교 클래스 기반(일반 언어) Java /* 1단계 : 클래스 정의 */ public class Prisoner { public int setence = 4; public int probation = 2; public string name; public string id; /* 2단계 : 클래스 생성자 정의*/ public Prisoner(string name, string id) { this.name = name; this.id = id; } } /* 3단계 : 객체 생성 */ Prisoner firstPrisoner = new Prisoner("Joe", "12A"); Prisoner secondPrisoner = new Prisoner("Sam", "2BC..

JavaScript/JS 객체지향 프로그래밍 2016. 9. 29. 10:43

절차 지향 방식에서 객체지향 방식(함수기반 클래스,프로토타입방식 클래스) 으로 리팩토링하기

함수기반 클래스, 프로토타입 방식 클래스 절차 지향 방식 코드 jQuery(function($){ console.time('성능'); /* Radio */ var radioBox = $('.ctm-radio'); var addClassRadio = function($input){ $input.each(function(){ if ($(this).prop('checked')){ if ($(this).parent().hasClass('ctm-radio')){ var radioName = $(this).attr('name'); $('input[name='+radioName+']').parent('.ctm-radio').removeClass('checked'); } $(this).parent().addClass(..

JavaScript/JS 객체지향 프로그래밍 2016. 9. 29. 10:42

팩토리 함수를 활용한 Object.create

팩토리 함수를 활용한 Object.create JavaScript /** * ------------------------------------------------------- * Object.create() 를 지원하지 않는 * 브라우저를 위한 크로스 브라우징 메서드 정의 * ------------------------------------------------------- */ var objectCreate = function ( arg ) { if(!arg) { return {}; } function obj() {} obj.prototype = arg; return new obj; }; Object.create = Object.create || objectCreate; var proto = { se..

JavaScript/JS 객체지향 프로그래밍 2016. 9. 29. 10:42

싱글톤(singleton) 패턴

싱글톤 싱글톤(singleton) 패턴은 전체 시스템에서 하나의 인스턴스만 존재하도록 보장하는 객체 생성패턴을 말합니다. 따라서 객체 리터럴도 싱글톤 패턴이라고 할 수 있습니다. javascript var singletonObj = { a : '값', b : function () { } } 그러나 객체 리터럴로는 비공개 상태 및 함수를 정의할 수는 없습니다. 규모가 큰 라이브러리에서는 흔히 외부에서 접근할 수 없는 비공개 멤버를 가지고 있습니다. 자바스크립트에서 비공개 멤버가 필요하다면 먼저 클로저(closure) 를 염두에 두어야 합니다. 즉, 비공개 멤버를 가진 싱글톤 객체를 생성하려면 클로저를 이용해야 합니다. 다음은 클로저를 이용한 싱글톤 패턴을 구현하는 예제입니다. javascript var S..

JavaScript/JS 객체지향 프로그래밍 2016. 9. 29. 10:40

네임스페이스 패턴(namespace pattern)

네임스페이스 패턴 자바스크립트 코드의 재사용과 생산성을 향상시키고자 많은 라이브러리가 나오고 있다. 이러한 라이브러리를 제작할 때 일반적으로 가장 중요한 것은 다른 모듈로부터 독립성을 보장하고 상호 간섭하지 않게끔 네임스페이스(namespace) 를 사용하는 것이다. 라이브러리를 사용하다 보면 언제든지 한쪽에서 사용한 타입명이 다른 쪽에서도 사용될 수도 있는데, 어디서 사용될 지 모르는 라이브러리를 만드는 경우라면 반드시 네임스페이스를 정의해 객체를 안전하게 분리/관리하는 것을 필수입니다. 네임스페이스는 프로그램에서 필요로 하는 전역 변수의 개수를 줄이는 동시에 과도한 접두어를 사용하지 않고도 이름이 겹치지 않게 해준다. 수많은 함수, 객체, 변수들로 전역 유효범위를 어지럽히지 않는 대신, 애플리케이션이..

JavaScript/JS 객체지향 프로그래밍 2016. 9. 29. 10:38

자바스크립트 네임스페이스 패턴 - namespace pattern

자바스크립트 설계 패턴 - Namespace Pattern 네임스페이스는 프로그램에서 필요로 하는 전역 변수의 개수를 줄이는 동시에 과도한 접두어를 사용하지 않고도 이름이 겹치지 않게 해줍니다. 자바스크립트의 언어 문법에 내장되어 있지는 않지만, 네임스페이스는 꽤 쉽게 구현할 수 있는 기능입니다. 네임스페이스 패턴 대개 애플리케이션이나 라이브러리를 위해 전역 유효 범위에 수많은 함수, 객체, 변수들로 어지럽히지 않도록 하기 위해 전역 객체를 하나 만들고(단 하나만 만드는 것이 이상적이다) 모든 기능을 이 객체에 추가하는 패턴을 네임스페이스 패턴이라고 합니다. 다음의 예제는 안티 패턴입니다. JavaScript // 수정 전 : 전역 변수 5개 // 경고 : 안티 패턴 // 생성자 함수 2개 functio..