2020/09/01 TIL (Destructuring, This, Call, Apply, Bind)

Topics Learned

• Destructuring (ES6)
• This
• Call, Apply, Bind
• ESLint
• [...new Set(Array)]

Details

Destructuring 이란 Array 혹은 Object 를 분해하는 것을 의미한다:

• 예시: Array 의 경우

  • let [first, second, ...rest] = [1,2,3,4,5,6]

    console.log(first) // 1 
    console.log([...rest]) // [3,4,5,6] 
    
    //응용
    let [firstName, surname] = "Ilya Kantor".split(' ');
    console.log(firstName, surname) // "Ilya Kantor"

  • let [,,third] = ["foo", "bar", "baz"];

    console.log(third) // "baz" 

• 예시: Object의 경우

  let options = {
    title: "Menu",
    width: 100,
    height: 200
  };
  
  let {title, width, height} = options;
  
  console.log(title);  // Menu
  console.log(width);  // 100
  console.log(height); // 200

  const name = '김아무개';
  const age = 14;
  
      const student = {
        name,
        age,
        school: 'Middle School',
      };
  console.log(person) // name: '김아무개', age: 14, school: 'Middle School'

	const student = { name: '최초보', major: '물리학과' };
    const { name, ...args } = student;

console.log(args) // {major: 물리학과} 

const user = {
      name: '김아무개',
      company: {
        name: '회사A',
        department: '개발',
        role: {
          name: 'Software Engineer',
        },
      },
      age: 35
    };

const overwriteChanges = {
      name: '이아무개',
      age: 24,
      ...user,
    };

console.log(overwriteChanges) 
/*
name: '김아무개',
      age: 35, //age 의 위치에 주목하자. 
      company: {
        name: '회사A',
        department: '개발',
        role: {
          name: 'Software Engineer',
        },
      },
*/

This

• 객체의 메소드로 존재 할 때는 가르키는 대상이 객체이다.
• 일반 함수에서 this 는 global
• 에로우펑션 은 최상위 실행환경을 가르킨다.

Apply, Call, Bind

• Apply, Call 은 함수를 this를 실행시킨다
• Bind 는 this 를 가지고 있는 함수를 리턴한다.

function a() {
      // this.name 을 result 에 push
      result.push(this.name); < 1, 2, 3 이 순차적으로 들어간다 
    }

    function callback(user) {
			let btn = createUserButton(user);
      btn.onclick = a.bind(user); 
    }

		users.forEach(callback);

const users = [{ name: 1 }, { name: 2 }, { name: 3 }];

ESLint

• 팀 단위 프로젝트에서 쓰이는 Syntax & Rule 유틸리티 툴