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

paulkim·2020년 9월 1일
0

TIL

목록 보기
8/11

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 유틸리티 툴

0개의 댓글