JS 줍줍

김민태의 프론트엔드 아카데미 강의 참조사전 파트중 일부입니다.

객체 참조

let malza = {
  isBlack: false
}

function func(malza) {
  malza.isBlack = true
}

func(malza); // true

call 과 apply

function sum(a, b, ...args) {
  // ...
}
sum.call(null, 10, 20, 30, 40)
sum.apply(null, [10, 20, 30, 40, 50])

둘의 결과는 같다. 버뜨 .. 넣어주고 싶은 인자가 변경된다면 코드가 바뀌어야 한다.

function sum(a, b, ...args) {
  // ...
}
const arr = [10, 20, 30, 40, 50, 60, 70]
sum.call(null, 10, 20, 30, 40)
sum.apply(null, arr) // 이 부분이 변경될 필요가 없어졌다.

getter, setter

class Malza {
  _bloodType: string;
  constructor(bloodType: string) {
      this._bloodType = bloodType;
  }
}
const me = new Malza('O')
me.bloodType; //  'O'
me.bloodType = '이런 혈액형은 들어오면 안돼'
me.bloodType; // '이런 혈액형은 들어오면 안돼'

A, B, O, AB 혈액형을 제외하곤 받지 말아보자.

class Malza {
  _bloodType: string;
  constructor(bloodType: string) {
      this._bloodType = bloodType;
  }

  set bloodType(bType: string) {
    if(bType === 'A' || bType === 'B' || bType === 'O' || bType === 'AB') {
      this._bloodType = bType
    }
  }
}

const me = new Malza('O')
me.bloodType = '이런 혈액형은 들어오면 안돼'
me.bloodType; // undefined

me.bloodType = '이런 혈액형은 들어오면 안돼' 부분이 에러가 나는데 set 키워드를 사용해서 속성 접근처럼 함수를 사용하게끔 할 수 있다. set이 있으면 get도 있는법. me.bloodType;이 undefined가 나오는데 get으로 꺼내와보자.

  get bloodType() {
    return this._bloodType

잘 빼내온다!!

class Malza {
  _bloodType: string;
  constructor(bloodType: string) {
      this._bloodType = bloodType;
  }

  set bloodType(bType: string) {
    if(bType === 'A' || bType === 'B' || bType === 'O' || bType === 'AB') {
      this._bloodType = bType
    }
  }

  get bloodType() {
    return this._bloodType
  }
}

const me = new Malza('O')
me.bloodType;
me.bloodType = 'c'
console.log(me.bloodType) // 'O'

generator

function* inifiniteGenerator() {
    let infinite = 1;
    while(true) {
        const wow:number = yield infinite;

        if(wow) {
            infinite  += wow;
        } else {
            infinite++;
        }
    }
}
// 자신을 실행시키는게 아니라 실행시키는데 필요한 도구를 갖고 있는 객체를 만들어서 넘겨준다.
const generatorObject = inifiniteGenerator()

for(let i = 0; i < 5; i++) {
    console.log(generatorObject.next());
}

// {
//  "value": 1,
//  "done": false
// }
// 위와 같은 형태로, 5까지 나온다.

yield키워드는 제네레이터 함수를 멈춘다. 멈추고 yield 뒤의 값을 호출자에게 넘겨준다.

generatorObject.next(10) // 15

요렇게 사용하면 다시 yield로 가서 wow에 10을 대입 해 버린다.
실제로 코드는 무한루프지만, 다음 next호출까진 함수가 멈춰있는다.

튜플

js가 아닌 ts에서 제공하는 타입이다. 배열이 가지고 있는 모든 기능이 있으며, 배열이 가지지 못하는 제약사항 하나를 걸 수 있다. 바로 크기를 제어할 수 있는것.

    const person: [string, number] = ['malza', 100]
    let [name, age] = person

    name = 1909 // error

ts답게 몇번째에 어떤 타입이 들어가야 하는지 까지 캐치해준다. 구조 분해 할당으로 나눠진 name과 age에 맞는 타입만을 넣을 수 있다.

prototype

const obj1 = {
  some: 'some',
  thing: 'thing'
}

const obj2 = {
  special: 'special'
}

console.log(obj1.toString()) // [object Object]

obj1의 toString을 호출했다. 내가 선언한 그 어디에도 toString()이라는 함수는 없다. 하지만 에러대신 무언가 출력이 되고 있다. 이는 자바스크립트의 prototype이라는 특징 덕분이다. 모든 객체는 __proto__라는 속성을 가지고 있는데 이는 모든 객체의 조상인 Object를 가리키고 있다. toString은 바로 요놈, Object가 가지고 있는 메서드이며, 프로토타입 체이닝으로 인해서, obj1에서도 toString에 접근할수 있는 것이다.

const obj1 = {
  some: 'some',
  thing: 'thing'
}

const obj2 = {
  special: 'special'
}

obj1.__proto__ = obj2
console.log(obj1.special) // special

문자열 변환 - 템플릿

function div(strings, ...fns) {
  const flat = s => s.split('/n').join('')

  return function (props) {
    return `<div style="${flat(strings[0]) + (fns[0] && fns[0](props)) + flat(strings[1])}"></div>`
  }
}

const Div = div`
  font-size: 20px;
  color: ${props => props.active ? 'white' : 'gray'};
  border: none;
`

console.log(Div({active: true}))

/** <div style="
  font-size: 20px;
  color: white;
  border: none;
"></div>
*/

달러 브레이브가 들어가면 그곳을 기준으로 배열로 쪼개진다. color: 까지 하나, ${}; 다음부터 끝까지 둘.
그리고 fns로 달라 브레이스 부분이 들어가게 된다.