javascript

javascript

[javascript] nested object deep copy, 중첩 Object 깊은 복사

nestd object 란? 아래처럼 중첩된 object를 말한다. // nested Object const a = { b : 100, c : { d : 1, e ; 2 } } //nested Array const b = [{a:1, b:2}, {c:3}] const c = [[a,b],[c,d]] shallow copy & deep copy object(array)를 copy할 때는 shallow copy와 deep copy가 있다. shallow copy 방법을 사용하면 해당 object의 property 자체를 복사하는게 아니라, reference를 복사하게된다. 따라서 새로 copy한 object에서 무언가 바꾸면 원래 object에서도 바뀐다. 이렇게 하지 않고 실제로 복사한 것을 deep co..

javascript

[javascript] super의 역할

super의 역할 1 : 상위 객체의 프로토타입을 참조 class B{ sayB(){ console.log("b"); } } class A extends B{ sayA(){ super.sayB(); } } const a = new A(); a.sayA(); //"b" super는 자신을 참조한 메소드(sayHello)가 바인딩하는 객체(A.prototype)의 프로토타입(B.prototype)을 가리킨다. (A.prototype의 프로토타입객체는 B.prototype이다.) 위의 문장이 이해가 안가면 아래를 보고 오자 2022.04.06 - [javascript] - [javascript] 상속, class, extends키워드 [javascript] 상속, class, extends키워드 javascr..

javascript

[javascript] 프로토타입 섀도잉, 오버리이딩

javascript에서 오버라이딩을 구현하는 방법을 알아보겠다. function A(){} A.prototype.sayHello = function() { console.log("prototype hello"); } // 프로토타입 섀도잉 const a = new A() a.sayHello(); // prototype hello class A가 있을때, prototype에 sayHello가 있다고 하자. new를 이용해 인스턴스 a를 생성하면 a.sayHello에 접근할 수 있을 것이다. 이때 a에 똑같은 sayHello라는 프로퍼티를 추가하여 오버라이딩 할 수 있다. a.sayHello = function() { console.log("my hello"); } //프로토타입 오버라이딩 console.l..

javascript

[javascript] 상속, class, extends키워드

javascript에서는 calss와 extends를 이용하여 상속을 구현할 수 있다. class B{ } class A extends B{ } 이때 extends뒤에 오는 것은 [[construct]] 내부 슬롯이 있는 constructor만 가능하다. 따라서 아래와 같은 코드도 가능하다. function B(){ } class A extends B(){ } 내부슬롯 [[construct]]에 대한 설명은 아래를 참고 2022.04.05 - [javascript] - [javascript] 생성자 함수, 내부 슬롯 [[Construct]] [javascript] 생성자 함수, 내부 슬롯 [[Construct]] 자바스크립트에서는 함수를 new로 생성하여 객체를 생성할 수 있다. function A(){..

javascript

[javascript] private 정의하기

private이 언제부터 가능했지? 원래 javascript는 모두 public이다. 하지만 2021년 1월 TC39의 stage3(candidate)에 private을 정의할 수 있는 새 표준 사양이 제안되었고, 표준 사양으로 승급이 확실시 되기 때문에 최신브라우저(chrome74이상), node.js(v.12이상)에 이미 구현되어있다. ECMA에는 ECMAScript외에도 다양한 기술의 사양을 관리하고, 그 주체인 기술위원회(Technical Committee도 여럿 존재한다. 그 중 ECMA-262(ECMAScript)를 담당하는 위원회가 TC39다. TC39프로세스는 새 표준 사양을 추가하기 위한 과정을 말한다. 0~4단계까지 총 5단계가 있다. stage 0 : strawman -> stage ..

javascript

[javascript] 클래스 필드란

java에서는 아래와 같이 사용할 수 있다. public class Person{ priavte String firstName = ""; // 클래스 필드에 클래스 멤버 생성 public String getName() { return this.firstName; } } firstName이 생성된 곳을 클래스 필드라고 한다. ES6+이후 javascript에서도 클래스 필드에 선언 할 수 있게 되었다. class Person{ firstName = "Lee"; // 클래스 필드에 인스턴스 변수 선언 } const p = new Person(); // Person {firstname:"Lee"} 클래스필드에 변수를 선언하면 인스턴스의 변수가 된다. 위의 코드는 아래와 같다. class Person{ cons..

javascript

[javascript] static 사용하기, class, static method

static method ES6부터 class가 도입되면서, 클래스 내에서 static method를 사용할 수 있게 되었다. (function에서는 사용할 수 없다) static 키워드를 사용하여 메소드를 정의하면 new "클래스이름" 으로 인스턴스 객체를 생성하지 않아도 해당 메소드를 사용할 수 있다는 장점이 있다. class A{ static a(){ console.log("a"); } } A.a(); // "a" 이와 같은 static 메소드는 A자체의 프로퍼티가 된다. class대신 function을 사용하면 아래와 같다. function A() {} A.a = function(){ console.log("a"); } A.a(); this.a와 static a this.a와 static a를 자..

javascript

[javascript] 생성자 함수, 내부 슬롯 [[Construct]]

자바스크립트에서는 함수를 new로 생성하여 객체를 생성할 수 있다. function A(){ this.a = 1; this.hi = function() { console.log("hi") } } const a = new A(); console.log(a) 함수가 이렇게 객체를 생성하는 방식으로 사용될 때 이 함수를 생성자 함수라고 부른다. 자바스크립트에서는 생성자 함수에 대한 구별이 없다. 그냥 함수를 new로 생성하면 생성자 함수가 되는 것이다. ( 이를 구분하기 위해 생성자 함수로 사용될 함수는 첫글자를 대문자로 쓰는 컨벤션이 있다. ) 그럼 모든 함수가 다 생성자 함수가 될 수 있을까? 아니다. 함수에 대해 더 알아보자. 함수 함수도 객체다. 따라서 객체가 가지는 내부슬롯( [[Environment..

우주유령
'javascript' 카테고리의 글 목록 (2 Page)