[Javascript] js remind

import 하는 파일에서 as 키워드를 써서 자유롭게 선택할 수 있는 별칭을 할당할 수 있음

import {hello as Hello} from './hello.js'

다수의 named export가 있는 경우 전체 내보내기도 가능

import * as bundled from './hello.js'

이 경우 나중에 접근하기 위해서는 bundeld.basedata, bundled.clean 이렇게 사용하면 된다.

 

 

class

 

class Human{
	constructor(){
    	this.gender = 'female';
    }
    printGender(){
    	console.log(this.gender);
    }
}

class Person extends Human{
	constructor(){
    	this.name = 'dropdew';
    }
    printName(){
    	console.log(this.name);
    }
}

const person = new Person();
person.printName();
person.printGender();

//error
//Must call super constructor in derived class before accessing 'this' or returning from derived constructor

 

다른 클래스를 상속(extends)받으면 상속받은 클래스 내부의 프로퍼티(constructor)와 메소드(printGender)를 사용할 수 있음

 

실행하면 오류 발생 => 서브클래스에서는 super 생성자를 먼저 호출해줘야한다 !

 

 

class Human{
	constructor(){
    	this.gender = 'female';
    }
    printGender(){
    	console.log(this.gender);
    }
}

class Person extends Human{
	constructor(){
    	super();
    	this.name = 'dropdew';
        this.gender = 'male';
    }
    printName(){
    	console.log(this.name);
    }
}

const person = new Person();
person.printName();
person.printGender();

//dropdew
//male

 

다른 클래스를 확장하고 생성자를 실행한다면, 생성자 함수 안에 super()메소드를 추가해줘야한다.

super()는 상위클래스의 생성자함수를 실행(Human 내의 constructor(){})

 

Human클래스 내의 gender는 female인데 male이 출력된 이유?

Human클래스를 상속받았지만 Person클래스에서 male로 확장되었기 때문이다.

 

생성자함수는 클래스와 비슷하고 클래스는 상속과 비슷하고 상속은 프로토타입과 비슷.. 컴포넌트 생성할 때도 이와 같은 논리

 

* 프로퍼티: 클래스와 객체에 추가되는 변수

* 메소드: 클래스와 객체에 추가되는 함수

 

//프로퍼티
//es6
constructor(){
	this.myName = 'dropdew'
}

//es7
myName = 'dropdew'

//메소드
//es6
myMethod(){}

//es7
myMethod = () => {}

 

스프레드 연산자(...)

 

const numbers = [1, 2, 3];
const newNumbers = [...numbers , 4];
const newNumbers2 = [numbers, 4];

console.log(newNumbers);
// [1 ,2, 3, 4]
console.log(newNumbers2);
// [[1, 2, 3], 4]

const person = {
	name = 'dropdew'
};

const newPerson = {
	..person,
    age : '55'
}

console.log(newPerson);

//[object Object]{
//	age: 55,
//	name: 'dropdew'
//}

이전 person객체의 모든 프로퍼티 값을 복사하기 위해 스프레드연산자(...) 사용

스프레드 연산자 사용해서 person객체를 newPerson에서 받아와서 전달

 

디스트럭처링(destructuring)

 

배열의 원소나 객체의 프로퍼티 추출해서 변수에 저장할 수 있게 함

(cf. 스프레드는 모든 원소와 프로퍼티 가져와서 새 배열이나 객체 등에 전달,

디스트럭처링은 원소나 프로퍼티 하나만 가져와서 변수에 저장)

 

const numbers = [1,2,3];
[num1, num2] = numbers;
console.log(num1, num2);
//1, 2
console.log(num1, num3);
//1, undefined

{name} = {name:'dropdew', age:'55'};
console.log(name);	//dropdew
console.log(age);	//undefined

 

참조형 및 원시형 데이터 타입

 

number, boolean, string : 기본형 자료 타입, 재할당하거나 변수를 다른 변수에 저장할 때 마다 값을 복사한다(복사본)

객체, 배열: 참조형 자료 타입

 

const num = 1;
const num2 = num;

console.log(num2); //1

const person = }
	name: 'Due'
};

const secondPerson = person;

person.name = 'dropdew';

console.log(secondPerson);

//[object Object] {name: "dropdew"}

객체를 가져다 사용하는 건 값을 복사해서 사용하는 것이 아니라,

person이 가르키는 주소값을 복사해오는 것

 

const person = }
	name: 'Due'
};

const secondPerson = {
	...person
};

person.name = 'dropdew';

console.log(secondPerson);

//[object Object] {name: "Due"}

스프레드 연산자(...)사용해서 객체를 복사해왔기 때문에 person 객체의 이름을 바꿔도 secondPerson 내의 값이 바뀌지 않는다