ES6+ 문법 (2)

- Spread Operator(...)

배열[]로부터 아이템을 가져와서 unpack해줌.

const days = ["Mon", "Tues", "Wed"];
const otherDays = ["Thur", "Fri", "Sat"];

const allDays1 = days + otherDays;
const allDays2 = [days + otherDays];
const allDays3 = [days, otherDays];
const allDays4 = [...days, ...otherDays];

console.log(allDays1);
//Mon,Tues,WedThur,Fri,Sat 한 문자열로 출력
console.log(allDays2);
//["Mon,Tues,WedThur,Fri,Sat"] 한 문자열이 배열에 담겨서 출력
console.log(allDays3);
//[Array(3), Array(3)] 각각이 배열에 담겨서 출력
console.log(allDays4);
//["Mon", "Tues", "Wed", "Thur", "Fri", "Sat"] 각 원소가 새 배열에 담김

allDays4의 ...가 spread operator임.

(원소의 갯수가 3개라서 ...가 아니냐고 오해하는데 무관하다. 본래 ...로 활용된다)

 

spread operator는 object, argument 등등에서도 활용됨.

React에서 매우 자주 사용하게 될 것.

const ob = {
  first: "hi",
  second: "hello"
};

const ab = {
  third: "bye"
};

const two = { ...ob, ...ab };

 

- class

OOP에 속했던 파이썬의 클래스를 떠올리면 아주 쉽다!

JS도 class를 쓸 수 있기 때문이고 class의 구조는 다 비슷하니 쉽게 익힐 수 있다. 

주의할 점은 생성자 함수는 대문자로 시작하는 코딩 컨벤션을 지키라는 것.

class Human {
   //생성자 함수는 반드시 대문자로 시작해야 함
  constructor(name, nationality) {
    //constructior는 일종의 __init__
    this.name = name;
    this.nationality = nationality;
  }
}

const me = new Human("darren", "korea"); //인스턴스 생성

console.log(me);

constructor는 python으로 치자면 __init__ 같은 것.

또한, 새 인스턴스를 생성할 때 new를 붙여주는 것을 잊지 말아라.

 

한편 React에서 class를 사용할 때 extends React.component를 했던 것처럼 확장이 가능하다.

 

class Human {
  constructor(name, nationality) {
    this.name = name;
    this.nationality = nationality;
  }
  sayName() {
    console.log(`My Name is ${this.name}`);
  }
}

class Baby extends Human {
  cry() {
    console.log("waaaaaa");
  }
}

const phony = new Baby("dora", "korea");

phony.cry();
phony.sayName();

 

-array.map

const days = ["Mon", "Tues", "Wed", "Thur", "Fri"];

const smile = days.map((e, i) => `😊 ${e} is number ${i}`);
console.log(smile);

 

첨언하자면 map에서 전달되는 argument는 배열의 원소뿐만 아니라

원소의 index도 전달이 된다는 것이 중요함.

 

-array.filter

const nums = [1, 3, 5, 7, 9, 11, 15, 21];

const filter_nums = nums.filter(e => e <= 10);
console.log(filter_nums);

map과 마찬가지로 조건에 ture인 것을 filter함.

 

- forEach

let saying = ["what", "are", "you", "doing"];

saying.forEach(e => console.log(e));

각 원소에 대응하여 작동한다.

map나 filter와 다른 점은 map, filter는 새로운 배열을 return하는 반면

(const new_array = array.map(e => "add" + e)의 형태로 사용한 것을 기억하라)

반면에 forEach는 각 원소에 대응하여 작동할 뿐이다.

 

- array.includes, array.push

let saying = ["what", "are", "you", "doing"];

saying.forEach(e => console.log(e));
saying.push("now");

if (saying.includes("you")) {
  console.log("already include 'you'!");
} else {
  saying.push("you");
}

array.includes는 argument로 넘긴 값이 array에 있는지 확인한 후 boolean을 출력한다.

array.push는 argument의 값을 해당 array에 추가한다

 

위의 코드는 saying이라는 array에 you가 있다면 이미 있음을 콘솔창에 출력하고

없다면 you를 추가하라는 뜻이다.

 

---

이 외에도 수 많은 array.method가 있으니 MDN에서 필요할 때 직접 찾아서 사용하자.

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array