스프레드 연산자
자바스크립트에서 스프레드 연산자는 배열, 객체 등의 요소를 전개하는데 사용됩니다. 스프레드 연산자는 코드를 간결하게 만들어 주고, 유용한 기능을 제공합니다.
전개한다는 것이 이해하기 힘들겠지만, 아래의 예시를 보면 이해에 도움이 될 것 같습니다.
배열의 결합
배열을 합칠 때 사용할 수 있습니다.
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combinedArr = [...arr1,"haha",...arr2];
console.log(combinedArr); // [1, 2, 3,"haha", 4, 5, 6]배열의 복사
스프레드 문법은 얕은 복사입니다. 하지만 1depth에선 깊은 복사처럼 사용할 수 있기 때문에 많이 사용됩니다.
const originalArr = [1, 2, 3];
const copiedArr = [...originalArr];
console.log(copiedArr); // [1, 2, 3]함수와 스프레드 연산자
인수들을 원소로 가지는 배열에 스프레드 연산자를 사용하면 함수를 쉽게 호출할 수 있습니다.
//구닥다리
function doStuff(x,y,z) {
console.log(x + y + z);
}
var args = [0,1,2]
// 함수 호출, 인수 전달
doStuff.apply(null,args);
// ...연산자 (스프레드 문법) 사용
doStuff(...args);
console.log(args);
// [0,1,2]객체 리터럴과 스프레드
객체에 대한 스프레드 연산자의 예시도 같이 살펴보겠습니다.
객체도 마찬가지로 1depth 복사를 할 수 있습니다.
let person = {
name : "junho",
surname: "yun",
age: 25,
};
let clone = {...person}
console.log(clone);
레스트 매개변수
레스트 문법은 스프레드 문법과 유사하지만 (...) 기능적으로는 반대입니다
스프레드 연산자는 확장의 기능이라면 레스트는 압축의 기능입니다. 코드로 보겠습니다.
const runners = ["Tom","Paul","Mark","Luke"]
const [first,second,...losers] = runners
console.log(losers);
// [Mark Luke]심벌
심벌은 항상 고유하며, 객체 속성의 식별자로 사용할 수 있습니다.
심벌의 고유성
const symbol1 = Symbol();
const symbol2 = Symbol();
console.log(symbol1 === symbol2); // false객체 속성에 대한 식별자
const name = Symbol('name');
const person = {
[name]: 'John'
};
console.log(person[name]); // 'John'
클래스
한국에서 클래스는 붕어빵 틀이라고 많이 설명을 하는 것 같습니다.
같은 속성(팥 + 반죽)을 갖는 하나의 개체(붕어빵)을 만드는 아니 찍어내는 문법이라 할 수 있습니다.
클래스 생성
클래스 생성하는 방법은 크게 두가지가 있습니다. 클래스 선언과 클래스 표현식입니다.
// 클래스 선언
class Person {
}
// 클래스 표현식
const person = class Person {
};참고로 클래스 선언과 클래스 표현식은 호이스팅되지 않습니다.
생성자 메서드를 추가한 것을 제외하면 프로토타입 방식과 큰 차이가 없습니다.
주의할 점은 생성자 메서드는 하나만 추가해야합니다.
class Person {
constructor(name, age){
this.name = name;
this.age = age;
}
greet() {
console.log(`Hi, my name is ${this.name} and i'm ${this.age} years old`);
} // 메서드와 메서드 사이에는 쉼표가 없습니다.
farewell() {
console.log("goodbye friend");
}
}
const junho = new Person("yun", 25)
junho.greet();
// Hi, my name is yun and i'm 25 years old
junho.farewell();
// goodbye friend
Person.info();
// I am a Person class, nice to meet you
// 정적 메서드정적 메서드
정적 메서드란 클래스의 인스턴스가 아닌 클래스 자체에서 접근할 수 있는 메서드를 의미합니다.
set와 get
setter 와 getter 메서드를 사용하여 클래스 내에 값을 설정하거나 가져올 수 있다.
class Person {
constructor(firstName, lastName) {
this._firstName = firstName;
this._lastName = lastName;
}
get fullName() {
return `${this._firstName} ${this._lastName}`;
}
set fullName(name) {
const [firstName, lastName] = name.split(' ');
this._firstName = firstName;
this._lastName = lastName;
}
}
const person = new Person('John', 'Doe');
console.log(person.fullName); // output: 'John Doe'
person.fullName = 'Jane Smith';
console.log(person.fullName); // output: 'Jane Smith'
console.log(person._firstName); // output: 'Jane'
console.log(person._lastName); // output: 'Smith'클래스 상속하기
기존 클래스에서 상속된 새로운 클래스를 만들때 extends 키워드를 사용합니다.
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
console.log(`Hi, my name is ${this.name} and i'm ${this.age} years old`);
}
}
class Adult extends Person {
constructor(name, age, work) {
super(name, age);
// Person으로 부터 상속 받기 때문에 super 생성자 함수 사용
this.work = work
}
}
const junho = new Adult("yun",26,"fe_dev")
console.log(junho.age)
// 26
console.log(junho.work)
// fe_dev
junho.greet();
// 어쩌구~