[SEB] Today I Learn

Chipmunk_jeong·2021년 4월 8일

JavaScript TIL

TIL

목록 보기

41/62

Spread / Rest

Destructing(구조 분해)

객체지향프로그래밍 - Class / Instance

this 키워드

Spread / Rest

Spread문법

배열이나 객체의 데이터들을 풀어서 사용하기 위한 문법

let arr = [10, 20, 30, 40];
console.log(arr);  // [10, 20, 30, 40]
console.log(...arr); // 10 20 30 40

Rest 문법

함수의 매개변수로 여러개의 인자를 배열로 묶어서 받을 수 있는 문법

function sum(...numbers) {
  return numbers.reduce((acc, cur) => acc + cur);
}

console.log( sum(10, 20, 30, 40) ); // 100

배열에서 사용하기

배열 합치기

let first = ['one', 'two'];
let seconds = ['three', 'four'];

let concatArr = [...first, ...seconds];
// ['one', 'two', 'three', 'four']

배열 복사

let arr = [1, 2, 3];
let copyArr = [...arr];

arr.push(4);
console.log(arr, copyArr); // [1,2,3,4] , [1,2,3]

객체에서 사용하기

let obj1 = { foo: 'bar', x: 42 };
let obj2 = { foo: 'baz', y: 13 };

let cloneObj = { ...obj1 };
let mergedObj = { ...obj1, ...obj2 };

함수에서 매개변수

function myFun(a, b, ...args) {
  console.log('a', a);
  console.log('b', b);
  console.log('other', args );
}

myFun('one', 'two', 'three', 'four');
// 'a', 'one'
// 'b', 'two'
// 'other', ['three', 'four']

구조 분해

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있는 표현식이다.

구조분해 문법을 사용하지 않는다면 배열의 요소들을 아래와 같이 담아줄 수 있다.

let arr = [1, 2, 3, 4];
let num1 = arr[0];
let num2 = arr[1];
let num3 = arr[2];
let num4 = arr[3];

여기서 구조분해 문법을 사용하면

let arr = [1, 2, 3 ,4];
let [num1, num2, num3, num4] = arr;
console.log(num1, num2, num3, num4); // 1, 2, 3, 4

위처럼 배열의 요소들을 분해하여 각각 변수에 담아준다.

선언에서 분리한 할당

let a, b;
[a, b] = [1, 2];
console.log(a, b); // 1, 2

default value

let a, b;
[a=10, b=20] = [50];
console.log(a, b); // 50, 20

change value

let a = 10;
let b = 20;

[a, b] = [b, a];
console.log(a, b); // 20, 10

return array

function a() {
  return [10, 20];
}
let a, b;
[a, b] = a();
console.log(a, b); // 10, 20

반환 값 무시

let [num1, , num3] = [10, 20, 30];
console.log(num1, num3); // 10, 30;

rest

let [num1, ...args] = [1, 2, 3, 4];
console.log(num1, args); // 1, [2, 3, 4]

클래스와 인스턴스

객체지향프로그래밍에는 실제 세계에서 모델이되는 청사진을 만들고 그 창사진을 바탕으로 여러개의 객체를 만들어 낸다.
여기서 청사진은 Class라 할수 있고, 찍어내는 객체들을 Instance라고 할 수 있다.

자바스크립트에서는 이미 객체지향프로그래밍(이하 OOP)와는 상관없이 객체를 사용하고있다.
그러므로 인스턴스와 객체는 이제 구분되어 말하겠다.

객체를 만드는방법은 일반적인 함수를 정의하듯 만든다.
하지만 만들어진 이 함수를 사용하는 방법이 다르다.
그냥 실행하여 만드는것이 아닌 new키워드를 이용해여 만든다.
이를 통해 만들어진 객체를 Instance라고 한다.

그렇다면 일반함수와 클래스를만드는 함수는 어떻게 구문하는가?
es6이전의 방법으로는 클래스함수는 첫글자를 대문자와 일반명사로 구분하여 작성하고 일반함수는 첫글자 소문자와 카멜케이스, 동사로 구분하여 작성했다. 하지만 es6이후에는 class키워드가 생겨서 좀더 명확한 구분이 가능해졌다.

class도 결국 함수이다. 좀더 특별한함수.
그래서 선언식과 표현식이 존재한다.

// 선언식
class Car {
  constructor(kind, color) {
    this.kind = kind;
    this.color = color;
  }
}

// 표현식
let Car = class {
  constructor(kind, color) {
    this.kind = kind;
    this.color = color;
  }
}

클래스는 일반 함수와다르게 선언식이라도 호이스팅이 일어나지 않는다.

// 인스턴스 생성
let mini = new Car('mini', 'white');

클래스를 정의할때 해당 인스턴스의 속성과 메서드를 정의할 수 있다.

속성은 차로 생각할 때 브랜드, 이름, 색상과 같은 특징을 정하고
메서드는 달리다, 멈추다, 시도을건다 등의 행위를 나타낼수 있다.

this

this는 함수 실행시 호출방법에 의해 결정되는 특별한 객체다.
함수 실행시 결정되므로, 실행되는 맥락에 따라 this는 다르게 결정된다.

this는 어떻게 실행되는지가 중요한데 아래처럼 나눌 수 있다.

Function
test();
Method
obj.test();
new
new Car();
call, apply
obj.call();
obj.apply();

함수 실행에 따른 this 패턴

패턴	바인딩	내용
Method	부모 객체	객체의 값과 연관된 메서드를 묶어서 사용할때 사용
new	새롭게 생성된 인스턴스 객체	객체 지향 프로그래밍에서 사용
.call, .apply	첫번째 인자로 전달된 객체	this값을 특정할 때 사용