Javascript
-
모듈 - 문법 | PoiemawebJavascript/ECMAScript 2015 (ES6) 2020. 3. 9. 18:53
[출처 : https://poiemaweb.com] 모듈이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다. 모듈은 세부 사항을 캡슐화하고 공개가 필요한 API만을 외부에 노출한다. 일반적으로 모듈은 파일 단위로 분리되어 있으며 애플리케이션은 필요에 따라 명시적으로 모듈을 로드하여 재사용한다. 즉, 모듈은 애플리케이션에 분리되어 개별적으로 존재하다가 애플리케이션의 로드에 의해 비로소 애플리케이션의 일원이 된다. 모듈은 기능별로 분리되어 작성되므로 코드의 단위를 명확히 분리하여 애플리케이션을 구성할 수 있으며 재사용성이 좋아서 개발 효율성과 유지보수성을 높일 수 있다. 자바스크립트는 웹페이지의 보조적인 기능을 수행하기 위해 한정적인 용도로 만들어진 태생적 한계로 다른 언어에 비해..
-
언어의 원리를 이용한 자바스크립트(2) | 강희성님Javascript/ECMAScript 2009 (ES5) 2020. 3. 8. 10:19
2주차 스터디 기록 # 대입연산자, 변수, 리턴은 값을 복사한다 (객체가 복사되는 게 아님) - 값 : Heap 에서 저장된 주소 # 자바스크립트에서 실행 할 수 있는 건 오직 함수, 연산자 뿐이다. # , 연산자는 순서대로 실행해라 함수 # arguments : 매개변수를 지정하지 않을 경우 입력한 매개변수 값만큼 처리한다. # 이론과 구현을 혼동하지 마라 # 자바스크립트 함수의 시그니처는 이름이다. - 이름으로 함수를 구분한다. - 함수를 사용하려면 이름 (또는 연산자)이(가) 있어야 한다. ※ 함수의 기본 구조 - function a () { return }; * 함수를 정의하고 a를 쓰겠다고 선언함. - function () { return }; * 실행 안됨. 함수를 정의 했을 뿐 선언을 하지 ..
-
클래스(2) - 문법 | PoiemawebJavascript/ECMAScript 2015 (ES6) 2020. 3. 6. 18:38
[출처 : https://poiemaweb.com] 7. 정적 메소드 클래스의 정적(static) 메소드를 정의할 때 static 키워드를 사용한다. 정적 메소드는 클래스의 인스턴스가 아닌 클래스 이름으로 호출한다. 따라서 클래스의 인스턴스를 생성하지 않아도 호출할 수 있다. class Foo(){ constructor(prop){ this.prop = prop; } static staticMethod(){ // 정적 메소드는 this를 사용할 수 없다. // 정적 메소드 내부에서 this는 클래스의 인스턴스가 아닌 클래스 자신을 가리킨다. return "static method"; } prototypeMethod(){ return this.prop; } } // 정적 메소드는 클래스 이름으로 호출한다...
-
언어의 원리를 이용한 자바스크립트(1) | 강희성님Javascript/ECMAScript 2009 (ES5) 2020. 2. 29. 16:22
1주차 스터디 기록 # 이진수는 0.1 을 만들 수 없기 때문에 소수점을 표현할 경우 오차가 생길 가능성이 있다. # 2 를 나누면 끝 자리는 항상 5로 끝난다. → 0.1 + 0.2 != 0.3 / 0.1 + 0.2 = 0.30000000000000004 # 2의 52승을 넘어가면 정밀도가 떨어져서 작은 수를 탈락시킨다. # 데이터의 자료형을 항상 체크해라. (넘버형으로 받은 데이터는 넘버형 자료형으로 변환) Not a Number : 자료형을 나누려고 할때 Infinity : 숫자를 0으로 나누려고 할때 # 기본 자료형 : 메모리에서 어떤 위치에 가서 얼만큼 가져오라 (크기가 고정되고 그 크기를 담고 있으면 안된다) - 가져올 크기를 알려준다. (* 모든 변수는 자료형을 가지고 있고 변수의 역할은 메..
-
객체 복사하기(얕은·깊은) | ddalpangeJavascript/ECMAScript 2009 (ES5) 2020. 2. 26. 19:35
[출처 : ddalpange.log] 시작하기 전에 # 예제 A const a = 1; const b = a; b = 2; console.log(a, b); # 예제 B const a = { p : 1 }; const b = a; b.p = 2; console.log(a.p, b.p); 자바스크립트는 불변형의 데이터를 선언할 때 포인터와 값 모두 생성하지만, 오브젝트(배열)을 생성할 때에는 메모리 절약을 위해 포인터만 새로 할당할 뿐이다. 위 예제의 해석은 - 예제 A는 b에 a를 복사하였다. - 예제 B는 b에 a를 대입하였다. 단순히 대입연산자(=)를 통해 변수를 대입하는것과 얕은 복사는 엄연히 다르다. 예제 B에서 b에 a를 복사하는 방법에는 다음과 같다. 1. Object.assign()을 이용 ..
-
클래스(1) - 문법 | PoiemawebJavascript/ECMAScript 2015 (ES6) 2020. 2. 24. 20:13
[출처 : https://poiemaweb.com] 자바스크립트는 프로토타입 기반(prototype-based) 객체지향 언어다. 프로토타입 기반 프로그래밍은 클래스가 필요없는(class-free) 객체지향 프로그래밍 스타일로 프로토타입 체인과 클로저 등으로 객체 지향 언어의 상속, 캡슐화(정보 은닉) 등의 개념을 구현할 수 있다. # ES5에서는 생성자 함수와 프로토타입, 클로저를 사용하여 객체 지향 프로그래밍을 구현하였다. var Person = (function () { // Constructor (생성자) function Person(name) { this._name = name; } // public method Person.prototype.sayHi = function () { console..
-
디스트럭처링 - 문법 | PoiemawebJavascript/ECMAScript 2015 (ES6) 2020. 2. 18. 22:49
[출처 : https://poiemaweb.com] ※ 디스트럭처링(Destructuring) - 구조화된 배열 또는 객체를 Destructuring(비구조화, 파괴)하여 개별적인 변수에 할당하는 것이다. - 배열 또는 객체 리터럴에서 필요한 값만을 추출하여 변수에 할당하거나 반환할 때 유용하다. 1. 배열 디스트럭처링 (Array destructuring) ES6의 배열 디스트럭처링은 배열의 각 요소를 배열로부터 추출하여 변수 리스트에 할당한다. 이때 추출/할당 기준은 배열의 인덱스이다. var arr = [1, 2, 3]; // ES5 : 배열의 각 요소를 배열로부터 디스트럭처링하여 변수에 할당하기 위한 방법 var one = arr[0]; var two = arr[1]; var three = arr..
-
객체 리터럴 프로퍼티 기능 확장 - 문법 | PoiemawebJavascript/ECMAScript 2015 (ES6) 2020. 2. 17. 22:45
[출처 : https://poiemaweb.com] 1. 프로퍼티 축약 표현 ES6에서는 프로퍼티 값으로 변수를 사용하는 경우, 프로퍼티 이름을 생략(Property shorthand)할 수 있다. 이때 프로퍼티 이름은 변수의 이름으로 자동 생성된다. var x = 1, y = 2; // ES5 : 객체 리터럴의 프로퍼티는 이름과 값으로 구성된다. 프로퍼티의 값은 변수에 할당된 값일 수도 있다. var Object = { x: x, y: y } // ES6 : 프로퍼티의 값으로 변수를 사용할 경우, 이름은 생략 가능. *프로퍼티 이름 = 변수의 이름 const Object = { x, y }; console.log(Object); // {x: 1, y: 2} 2. 프로퍼티 키 동적 생성 문자열 또는 문자..