[JavaScript] new
코딩하는 과정에서 객체를 정의할 때 해당 객체의 프로퍼티를 셋팅하도록 설정한다면 해당 객체를 추후 재활용하는데에 귀찮음과 어려움이 생길 수 있다. -> 이를 보완하기 위해 생성자를 새용해 원하는 프로퍼티의 인스턴스를 생성할 수 있도록 해줄 수 있다. 즉 생성자 패턴을 도입함으로써 코드의 재사용성을 대폭 높혀 레고 블럭인 객체를 좀더 자유자제로 사용할 수 있게 된다. - 함수를 호출할 때 new 를 붙이면 해당 함수는 새로운 객체를 만든 후에 이를 리턴한다. 해당 객체의 생성자를 호출한다고 생각하면 편하다. - 일반적인 객체지향 언어에서 생성자는 클래스의 소속이다. 하지만 자바스크립트에서 객체를 만드는 주체는 함수이다. 즉, 함수에 new 를 붙이는 것을 통해 객체를 만들 수 있다는 것은 자바스크립트의 특..
2020.08.28
no image
[JavaScript] 객체지향
객체 지향이라는 말은 코딩에 입문한 이후로 끊임없이 들었던 단어였다. 허나 정확한 개념에 대해 설명하라는 질문을 들었을 때 얼타기 일쑤인 말이기도 하다. 때문에 간단하게나마 정리하고자 한다. * 객체지향 프로그래밍 좀 더 나은 프로그램을 만들기 위한 프로그래밍 패러다임으로 로직을 상태(state)와 행위(behave)로 이루어진 객체로 만드는 것이라고 할 수 있다. 이 객체들을 마치 레고블럭처럼 조립해서 하나의 프로그램을 만드는 것이 객체지향 프로그래밍이라고 할 수 있다. 다시 말해서 객체지향 프로그래밍은 객체(레고블럭 조각) 를 만드는 것이다. 따라서 객체지향 프로그래밍의 시작은 객체가 무엇인가를 이해하는 것이라고 할 수 있다. 또한 객체지향을 비슷한 관점에서 부품화의 정점이라고도 할 수 있다. 즉, ..
2020.08.28
no image
[JavaScript] 브라우저 엔진이란
JavaScript 엔진은 JavaScript 코드의 인터프리터라고 보면된다. 여기서 인터프리터란 코드 한 구문씩 기계어로 해석해나가면서 실행해주는 프로그램이라고 알면 되고~ 여튼 JavaScript 엔진은 여러 종류의 웹 브라우저에서 찾아볼 수 있는데 대표적으로 Google Chrome의 V8, 블링크가 있으며, Mozilla Firefox의 SpiderMonkey 도 있다. 이 엔진들은 각자 퍼포먼스가 다르고, 지원되는 ECMAScript도 다르다. ECMAScript가 새로운 에디션을 발표하면 이에 맞춰서 JavaScript 엔진도 해당 사양을 따라가도록 점진적으로 업데이트를 해준다. 이름 설명 게코(Gecko) 모질라 재단에서 만든 레이아웃 엔진으로 파이어폭스, 모질라 선더버드, 시몽키 등이 이를..
2020.08.27

[JavaScript] new

TERAJOO
|2020. 8. 28. 17:23

코딩하는 과정에서 객체를 정의할 때 해당 객체의 프로퍼티를 셋팅하도록 설정한다면 해당 객체를 추후 재활용하는데에 귀찮음과 어려움이 생길 수 있다.

-> 이를 보완하기 위해 생성자를 새용해 원하는 프로퍼티의 인스턴스를 생성할 수 있도록 해줄 수 있다.

즉 생성자 패턴을 도입함으로써 코드의 재사용성을 대폭 높혀 레고 블럭인 객체를 좀더 자유자제로 사용할 수 있게 된다.

 

- 함수를 호출할 때 new 를 붙이면 해당 함수는 새로운 객체를 만든 후에 이를 리턴한다. 해당 객체의 생성자를 호출한다고 생각하면 편하다.

- 일반적인 객체지향 언어에서 생성자는 클래스의 소속이다. 하지만 자바스크립트에서 객체를 만드는 주체는 함수이다. 즉, 함수에 new 를 붙이는 것을 통해 객체를 만들 수 있다는 것은 자바스크립트의 특징이면서 자바스크립트가 추구하는 자유로움을 보여주는 사례라고 할 수 있다.

 


객체지향언어에서는 보통 클래스를 인스턴스화 시키기 위해 new 연산자를 사용한다. 

하지만 자바스크립트에서는 두개의 객체를 연결하기 위해 new 연산자를 사용한다.

 

즉, 전자의 경우 클래스로부터 작동을 복사하여 새로운 객체를 만드는 것이고, 후자의 경우 복사 과정 없이 그저 두 객체를 연결한다는 것이다. 따라서 자바스크립트의 new 키워드는 흔히 아는 new 키워드와 다르게 동작한다고 할 수 있다.

다시 말해 JavaScript 에서 new 연산자는 결국 새 객체를 다른 객체와 연결하기 위한 간접적인 우회 방법이며, 직접적으로 연결해주기 위해 Object.create() 을 이용하기도 한다.

 또한 [[Prototype]] 체계를 흔히들 프로퍼타입 상속이라고도 부르는데 상속은 기본적으로 복사를 수반하지만, 자바스크립트는 객체 프로퍼티를 복사하지 않고, 연결만 한다는 점에서 약간은 다르다. 따라서 프로퍼타입 상속이라는 말은 의미를 좀 헷갈리게 한다고 할 수 있고, 다른 적절한 단어인 위임이라고 생각하면 더 정확하지 않을까 한다.

'책장 > Javascript' 카테고리의 다른 글

[JavaScript] JavaScript 소개  (0) 2020.09.23
[JavaScript] Three.js 를 써보며  (0) 2020.09.02
[JavaScript] 객체지향  (0) 2020.08.28
[JavaScript] 브라우저 엔진이란  (0) 2020.08.27

객체 지향이라는 말은 코딩에 입문한 이후로 끊임없이 들었던 단어였다. 허나 정확한 개념에 대해 설명하라는 질문을 들었을 때 얼타기 일쑤인 말이기도 하다. 때문에 간단하게나마 정리하고자 한다.

 

* 객체지향 프로그래밍 

 좀 더 나은 프로그램을 만들기 위한 프로그래밍 패러다임으로 로직을 상태(state)와 행위(behave)로 이루어진 객체로 만드는 것이라고 할 수 있다.

 

 이 객체들을 마치 레고블럭처럼 조립해서 하나의 프로그램을 만드는 것이 객체지향 프로그래밍이라고 할 수 있다. 다시 말해서 객체지향 프로그래밍은 객체(레고블럭 조각) 를 만드는 것이다. 따라서 객체지향 프로그래밍의 시작은 객체가 무엇인가를 이해하는 것이라고 할 수 있다.

 또한 객체지향을 비슷한 관점에서 부품화의 정점이라고도 할 수 있다. 즉, 여러 로직들을 결합해 메소드라는 완제품을 만들고 이러한 메소드를 부품으로 해서 하나의 완제품인 독립된 프로그램을 만드는 것이라고 할 수 있다.

 이 때 서로 연관된 메소드와 그 메소드가 사용하는 변수들을 분류하고 그룹핑한 대상이 객체이고 이 과정에서 information hiding, Encapsulation 이라는 컨셉이 생겨난다.

cf) 객체란 변수와 메소드를 그룹핑한 것이라고 일단 생각하자.

 

* 인터페이스

잘 만들어진 부품이라면 부품과 부품을 서로 교환할 수 있어야 한다. 예를 들어 컴퓨터와 모니터는 서로가 교환관계에 있다. 이 이유는 모니터와 컴퓨터를 연결하는 케이블의 규격이 표준화 되어있기 때문이다. 이 때의 표준을 인터페이스라고 한다.

'책장 > Javascript' 카테고리의 다른 글

[JavaScript] JavaScript 소개  (0) 2020.09.23
[JavaScript] Three.js 를 써보며  (0) 2020.09.02
[JavaScript] new  (0) 2020.08.28
[JavaScript] 브라우저 엔진이란  (0) 2020.08.27

JavaScript 엔진은 JavaScript 코드의 인터프리터라고 보면된다.

여기서 인터프리터란 코드 한 구문씩 기계어로 해석해나가면서 실행해주는 프로그램이라고 알면 되고~

여튼 JavaScript 엔진은 여러 종류의 웹 브라우저에서 찾아볼 수 있는데 대표적으로 Google Chrome의 V8, 블링크가 있으며, Mozilla Firefox의 SpiderMonkey 도 있다.

연도 별 엔진 [출처 : 위키피디아]

이 엔진들은 각자 퍼포먼스가 다르고, 지원되는 ECMAScript도 다르다. ECMAScript가 새로운 에디션을 발표하면 이에 맞춰서 JavaScript 엔진도 해당 사양을 따라가도록 점진적으로 업데이트를 해준다. 

 

이름 설명
게코(Gecko) 모질라 재단에서 만든 레이아웃 엔진으로 파이어폭스, 모질라 선더버드, 시몽키 등이 이를 탑재하고 있다.
블링크(Blink) 웹키트에서 파생된 레이아웃 엔진으로 크롬, 오페라 등이 이를 탑재하고 있다.
트라이던트(Trident) 마이크로소프트의 레이아웃 엔진으로 인터넷 익스플로러, 아웃룩 익스프레스, 마이크로소프트 아웃룩, 그리고 윈앰프, 리얼플레이어의 미니 브라우저 등이 이를 탑재하고 있다.
프레스토(Presto) 오페라 소프트웨어의 사유 엔진으로 오페라가 탑재하고 있다. 오페라 15부터는 블링크로 교체되었다.
KHTML KDE 컨커러가 탑재하고 있다.
웹키트(Webkit) KHTML에서 파생된 레이아웃 엔진으로 사파리 등이 탑재하고 있다.
태즈먼(Tasman) 마이크로소프트의 레이아웃 엔진으로 맥용 인터넷 익스플로러가 탑재하고 있다.

 

이 때!! 브라우저마다 ECMAScript 를 지원하는 범위가 다르게 때문에, 웹 코딩시 흔히 듣는 "호환성 문제" 라는 것이 여기서 발생하게 된다.

이러한 문제를 해결하기 위해 바벨(babel) 이라는 오픈소스 JavaScript 트랜스 파일러를 사용한다. 바벨은 ES6 사양 기준으로 작성된 코드를 이전 버전과 호환되는 JavaScript 버전으로 변환해준다. 주요 브라우저는 ES5까지 지원하기 때문에 바벨이 ES5 코드로 변경해주어 호환성 문제를 해결할 수 있게 해준다.

 

 

'책장 > Javascript' 카테고리의 다른 글

[JavaScript] JavaScript 소개  (0) 2020.09.23
[JavaScript] Three.js 를 써보며  (0) 2020.09.02
[JavaScript] new  (0) 2020.08.28
[JavaScript] 객체지향  (0) 2020.08.28