TIL_20210112
화살표 함수
function을 생략하고 파라미터 오른쪽에 => 의 형식으로 사용한다.
함수 본문에 return 만 존재할 시 return 을 생략할 수 있으며 return을 생략할 때는 중괄호를 사용할 수 없다.
파라미터(매개변수) 가 하나일 때는 소괄호를 생략할 수 있다.
call, apply, bind 메소드 사용 불가
- 함수 선언식/함수 표현식과 this값이 다르기 때문에 화살표 함수로 메소드를 정의하는 것을 피해야 한다.
화살표 함수의 실행은 this를 결정짓지 않는다.
바인딩이란?
어떤 메소드에 어떤 객체/배열/요소 를 묶어주는 활동
함수 실행의 다섯가지 방법
함수가 무엇인가가 중요한 것이 아니라 어떻게 실행되는지가 중요하다.
함수 내부의 this는 함수가 어떻게 실행되는지에 따라 결정되기 때문이다.
1. Global
엄밀히 말하면 함수 실행은 아니다. 전역에서 this를 참조할 때를 의미한다.
console.log(this)
2. Function 호출
foo()
3. Method 호출
obj.foo()
4. new 키워드를 이용한 생성자 호출
new Foo()
5. .call 또는 .apply 호출
foo.call()
foo.apply()
함수 실행에 따른 this 바인딩 패턴
함수 실행의 다섯가지 방법에 따라 this도 다섯가지 바인딩 패턴이 존재한다.
1. Method 호출 시
바인딩되는 객체 - 부모 객체(실행 시점에 온점 왼쪾에 있는 객체)
하나의 객체에 값과 연관된 메소드를 묶어서 사용할 때 주로 사용함
2. new 키워드를 이용한 생성자 호출 시
바인딩되는 객체 - 새롭게 생성된 인스턴스 객체
객체 지향 프로그래밍에서 주로 사용됨
3. .call 또는 .apply 호출 시
바인딩되는 객체 – 첫번째 인자로 전달된 객체
this 값을 특정할 때 사용하며, 특히 apply의 경우 배열의 엘리먼트를 풀어서 인자로 넘기고자 할 때 유용함
4. Global 환경일 때
브라우저 환경에서 바인딩되는 객체 – window.this
node.js 환경에서 바인딩되는 객체 – module.exports
5. Function 호출 시
브라우저 환경에서 바인딩되는 객체 – window.this
node.js 환경에서 바인딩되는 객체 – global
(Global 환경일 때, Function 호출 시 에는 this 사용이 권장되지 않는다. 굳이 쓸 필요가 없다.)
Method 호출이란?
메소드 호출은 객체.메소드() 와 같이 객체 내에 메소드를 호출하는 방법을 의미한다.
단순 객체를 사용한 Singleton 패턴에서 이러한 예제를 흔히 볼 수 있다.
예제
let counter1 = {
value: 0,
increase: function() {
this.value++ // 메소드 호출(increase)에 this가 사용될 시, this는 부모 객체(counter1)
},
decrease: function() {
this.value--
}
getValue: function() {
return this.value
}
}
counter1.increase() // this.value++ 발동_ value: 1
counter1.increase() // value: 2
counter1.increase() // value: 3
counter1.decrease() // value: 2
counter1.getValue() // 2
하나의 객체에만 해당되지 않도록 함수에 정의 후 자유롭게 적용시킬 수 있다.
function makeCounter() {
return {
value: 0,
increase: function() {
this.value++ // 메소드 호출을 할 경우, this는 makeCounter 함수가 리턴하는 익명의 객체입니다
},
decrease: function() {
this.value--
},
getValue: function() {
return this.value;
}
}
}
// 이러한 함수를 선언했을 때
let counter1 = makeCounter()
counter1.increase()
counter1.getValue() // 1
let counter2 = makeCounter()
counter2.decrease()
counter2.decrease()
counter2.getValue() // -2
// 가 된다
생성자 호출이란?
객체.메소드() 와 같이 객체 내에 메소드를 호출하는 방법과 비슷하지만. 객체가 new 키워드를 이용해서 만들어졌다는 것이 다르다.
이 때의 객체는 인스턴스라고 부른다. 즉 인스턴스.메소드() 의 형태이다.
예제
let this_value_in_constructor;
function Car(name, brand, color) {
this.name = name;
this.brand = brand;
this.color = color;
this_value_in_constructor = this;
}
const mycar = new Car("mini", "bmw", "red");
this_value_in_constructor === {
name: "mini",
brand: "bmw",
color: "red",
};
const yourcar = new Car("911", "porsche", "black");
// yourcar 가 new 생성자로 인해서 function Car()의 this 가 된 것에 초점을 맞추면
this_value_in_constructor === {
name: yourcar.name,
brand: yourcar.brand,
color: yourcar.color,
};
// 이렇게 작성할 수 있다.
// 제일 좋은 답은
// 이미 yourcar 변수에 new Car() 생성자 호출이 할당되어 있기 때문에
this_value_in_constructor === yourcar
// 가 될 것이다.
.call, .apply 메소드
함수는 소괄호를 열고 닫는 방법 외에 메소드를 이용해서 실행할 수도 있다.
function foo() {
return 'bar'
}
foo()
foo.call()
foo.apply().call, .apply 호출은 명시적으로 this를 지정하고 싶을 때 사용한다. 첫번째 인자가 항상 this 값이 된다.
예제
const mike = {
name: ‘Mike”,
}
function update(birthYear, occupation) {
this.birthYear = birthYear;
this.occpation = occupation;
}
update.call(mike, 1999, ‘singer’) // mike는 this, 1999, 'singer'는 update함수의 인자
console.log(mike) === {name: ‘Mike”, birthYear: 1999, occupation: ‘singer’}
update.apply(mike, [1999, ‘singer’]) // apply 메소드는 this 뒤의 인자가 배열로 와야 한다.
console.log(mike) === {name: ‘Mike’, birthYear: 1999, occupation: ‘singer’}
bind
bind의 역할 자체는 call, apply와 같으나 결과물이 다르다.
call과 apply는 해당 함수의 결과값을 리턴한다.
bind는 bind 대상을 this로 가진 새로운 함수 자체를 리턴한다.
function foo(a, b) {
return this + (a ? a : "") + (b ? b : "");
}
const context = "almost finish";
const boundFoo = foo.bind(context); // boundFoo는 context를 this로 가진 foo함수
typeof boundFoo === "function"; // bind는 함수를 리턴하기 때문
boundFoo() === "almost finish";
git 개념
내가 fork 해 온 최상위 레포지토리 - 업스트림(upstream)
git pull upstream master _ 로컬 레포지토리 최신화
git remote remove 'pair' _ 내 레포지토리와 연결되어 있는 'pair' 제거
branch / merge
branch 는 원형 레포에서 분기해 나온 레포지토리. 원본에 상관없이 수정이 가능하다.
merge 는 분기해 나온 branch와 상위 레포지토리를 합치는 활동을 말한다.