React를 들어가기 전 ES6에서 자주 사용되는 문법을 알아보자.
상수와 변수
전에는 상수든 변수든 var 를 이용했으나 이제는 const(상수)와 let(변수) 이용한다.
- const : 재할당 불가. -- 상수
- let : 재할당 가능. --변수
const와 let은 둘 다 block level scope를 가진다.
block level scope이란??
해당하는 블록 내부에서만 유효. (ex.중괄호 안)
var는 해당 블록을 벗어나도 유효하기 때문에 비정상이다.
Object
Object는 key-value 쌍을 가진다.
이 때 value에는 어떤 값도, 함수까지도 올 수 있다.
const person = {
name: '세정이',
age: 21,
hobby: '개발',
doSomething: () => {},
}
이 때, 값을 따로 할당하고 key-value값이 같으면 생략한다.
const name = '세정이';
key값도 name이면 {name: name}대신 {name}만 적을 수 있다.
✨얕은 복사를 주의하기!
const a = {value1: 100}
const b = a; //얕은복사!
a.value1 += 1;이렇게 해버리면 b의 값도 같이 변경된다.
왜냐? 이는 얕은 복사의 방법인데 얕은 복사 후 복사한 애를 변경하면 복사 대상이었던 애도 같이 변경이 되기 때문이다.
왜냐고?
주소값을 복사한 것이기 때문에!(메모리)
따라서
const b = a; //이러한 얕은 복사 대신에
const c = JSON.parse(JSON.stringify(a)); //요렇게 새로운 객체를 만들어내야한다. 즉, 새로운 주소값을 생성한다!구조분해 할당
객체 구조분해 할당
person 객체 안에 있는 값들이 구조가 해제되어 각각 변수에 할당된다.
const person = {
name: '세정이',
age: 21,
}
const {name, age} = person;
console.log(`${name}는 ${age}살`);배열 구조분해 할당
const myArr = [1, 2, 3, 4, 5];
const [val1, val2, val3, val4, val5] = myArr;전개 연산자(...)
let [name, ...rest] = ["bbiyak", 21, "student"];
//rest의 결과 : [21, "student"]let names = ["bbiyak", "meow"];
let students = [...names]; //...은 배열을 깨고 나와라 라는 뜻!
//students의 결과 : ["bbiyak", "meow"]let names = ["bbiyak", "meow"];
let students = [...names]; //...은 배열을 깨고 나와라 라는 뜻!
//students의 결과 : ["bbiyak", "meow"]let bbiyak = {
name: "bbiyak",
age: 21,
};
let meow = {
...bbiyak,
};Arrow Functions
const mysum = (x, y) => x+y //한줄일때는 return이 빠지면서 중괄호 생략가능
const mysum2 = (x, y) => 기존 함수 표현식에서 function키워드 삭제하고 괄호()안에 매개변수, 코드블록{} 사이 화살표=>만 넣어주면 이것이 바로 화살표 함수이다.
화살표 함수와 일반 함수 차이?
화살표 함수는 인스턴스를 생성할 수 없는 non-constructor
중복된 매개변수 이름을 선언할 수 없음
화살표 함수는 함수 자체의 this, arguments, super, new.target 바인딩을 갖지 않음
왜 쓸까?(뭐가 좋을까?)
코드의 간결성
콜백함수 this에 값을 참조시킬 때
map사용 시 this를 넘겨주어 코드를 더 쉽게 작성 가능.
JavaScript함수의 this바인딩
상황에 따라 다르게 바인딩된다.
대표적으로 this에 바인딩 되는 값들
1. 전역 공간의 this : 전역 객체
2. 메서드 호출 시 메서드 내부의 this : 해당 메서드를 호출한 객체
3. 함수 호출 시 함수 내부의 this : 지정되지 않음 -> 자동으로 전역 객체를 바라봄
const cat = {
name: 'meow',
foo1: function() {
const foo2 = function() {
console.log(this.name);
}
foo2();
}
};
cat.foo1(); // undefined
cat.foo1()메서드 호출 시 내부 함수foo2가 실행됨- 호출된
foo1함수의 내부 함수foo2의 this는 지정되지 않아서 전역 객체를 가리킴 - 전역 객체에
name이라는 속성은 존재하지 않으므로 결과는undefined.
복잡하고 의도했던 바가 전혀 아니다.
그 함수를 호출한 배경의 상황이 this에 담기면 정말 좋을텐데.. -> 화살표 함수가 해낸다.
화살표 함수의 this바인딩
화살표 함수에는 ⭐this가 아예 없기 때문⭐에 가능하다.
JavaScript에서는 어떤 식별자(변수)를 찾을 때 현재 환경에서 그 변수가 없으면 바로 상위 환경을 검색합니다. 그렇게 점점 상위 환경으로 타고 타고 올라가다가 변수를 찾거나 가장 상위 환경에 도달하면 그만두게 되는 것이죠. 화살표 함수에서의 this 바인딩 방식도 이와 유사합니다. 화살표 함수에는 this라는 변수 자체가 존재하지 않기 때문에 그 상위 환경에서의 this를 참조하게 됩니다.
function으로 선언한 함수가 메서드로 호출되냐 함수 자체로 호출되냐에 따라 동적으로 this가 바인딩되는 반면, 화살표 함수는 선언될 시점에서의 상위 스코프가 this로 바인딩된다.
화살표 함수를 쓰면 안되는 경우?
다음과 같은 경우들 처럼 상위 환경의 this를 참조한다는 점이 문제가 될 수도 있다.
1. 메서드
const cat = {
name: 'meow';
callName: () => console.log(this.name);
}
cat.callName(); // undefined
위와 같은 경우에 callName 메서드의 this는 자신을 호출한 객체 cat이 아니라 함수 선언 시점의 상위 스코프인 전역객체를 가리키게된다.
2. 생성자 함수
const Foo = () => {};
const foo = new Foo() // TypeError: Foo is not a constructor화살표 함수를 생성자 함수로 사용하면 에러가 난다. 생성자 함수로는 사용할 수 없게 만들어졌다.
3. addEventListener()의 콜백함수
const button = document.getElementById('myButton');
button.addEventListener('click', () => {
console.log(this); // Window
this.innerHTML = 'clicked';
});
button.addEventListener('click', function() {
console.log(this); // button 엘리먼트
this.innerHTML = 'clicked';
});원래 addEventListener의 콜백함수에서는 this에 해당 이벤트 리스너가 호출된 엘리먼트가 바인딩되도록 정의되어 있다. 이처럼 이미 this의 값이 정해져있는 콜백함수의 경우, 화살표 함수를 사용하면 기존 바인딩 값이 사라지고 상위 스코프(이 경우에 전역객체)가 바인딩되기 때문에 의도했던대로 동작하지 않을 수 있다.
Reference
화살표 함수 velog
