요약
- JS
- 화살표 함수 총 정리
- 호이스팅
- Temporal Dead Zone
- 배열 메소드
JS
화살표 함수
함수 표현 방식에는 세가지가 있다.
- 함수 선언문
- 함수 표현식
- 화살표 함수*
함수 선언문은 순차적으로 작성하지 않아도 어디서든 호출이 가능하다. JS가 실행 전 함수 선언문을 미리 읽어서 기억(호이스팅)하기 때문에 코드 작성 순서와 관련없이 사용 가능하다.
함수 표현식은 해당 코드에 도달해야 생성되고 그 이후부터 호출이 가능하다.
화살표 함수는 규칙이 다소 복잡한데, 몇가지를 기억해두면 된다.
const add = function (num1, num2) { return num1 + num2 };위와 같은 함수 표현식을 화살표 함수로 바꾸면
const add = (num1, num2) => { return num1 + num2 };로 표현할 수 있다. 이것이 화살표 함수의 기본적인 사용 방법이고 여기서 인자와 return 값에 주의해야 한다.
화살표 함수의 return
화살표 함수 내부의 return은 특정한 경우에 생략할 수 있다. 기본적으로 중괄호 안에 코드를 묶지만 return이 한줄인 경우 return을 생략하고 소괄호()로 묶으면 같은 의미로 사용할 수 있다.
중괄호 안에 return문만 존재하면 소괄호를 사용할 수 있다. 이 때 return은 생략해야 한다.
const add = (num1, num2) => ( num1 + num2 );return문 외에 코드가 없고 return문이 한줄 이내일 때는 소괄호도 생략할 수 있다.
const add = (num1, num2) => num1 + num2;화살표 함수의 인자
화살표 함수의 인수가 하나도 없으면 소괄호를 생략할 수 없다.
const showError = () => {
console.log('Error');
};화살표 함수의 인자가 딱 하나라면 소괄호를 생략할 수 있다.
const printOne = num1 => {
console.log(num1);
};화살표 함수의 인자가 두개 이상이라면 소괄호를 생략할 수 없다.
const add = (num1, num2) => { return num1 + num2 };나는 주로 화살표 함수에서 return을 작성하는 부분이 헷갈렸는데, 중괄호와 소괄호의 차이, 괄호 생략의 의미를 정확하게 이해하고 있으면 헷갈리지 않을거 같다.
호이스팅(hoisting)
호이스팅은 js가 실행될 때 변수나 함수선언문 등을 미리 읽어서 기억하는 것이다.
호이스팅에 대해 이해하려면 변수 종류의 차이점을 알아야 한다.
js에는 대표적으로 var/let/const가 있다. (const는 상수지만 js에서 사용빈도가 높은 편이라 묶어서 많이 씀)
호이스팅은 세 종류 자료에 모두 적용되지만 이후 소개할 TDZ로 인해 각각의 실제 사용방법이 다르다. 이를 이해하기 위해 변수의 생성단계를 설명한다.
변수의 생성단계는 크게 세가지로 분류된다.
1. 선언 → 2. 초기화 → 3. 할당
- var는 선언과 초기화를 동시에 한다.
- let은 선언과 초기화를 분리해서 한다.
- const는 선언, 초기화, 할당을 동시에 한다.
let도 var처럼 호이스팅을 하지만, 선언될 때 호이스팅하는 반면 초기화는 할당할 때 하기 때문에 할당 전에 변수를 사용하려고 하면 오류가 나게 된다.
Temporal Dead Zone
이런 특징은 Temporal Dead Zone때문에 생기는데, 변수가 선언될 때 호이스팅되지만 초기화 전까지 TDZ에 머무르기 때문에 그 때 변수에 접근하려고 하면 오류가 나는 것이다.
쉽게 말해 TDZ는 변수 사용을 임시적으로 죽이는 공간이다.
정리하면 var/let/const 모두 호이스팅되지만 let과 const는 TDZ에 머무르기 때문에 할당 전에 사용할 수 없고, var는 TDZ의 영향을 받지 않기 때문에 할당 전에도 사용할 수 있다.
배열메소드
react에서 사용할 수 있는 배열 메소드는 원본 배열을 수정하지 않고 새로운 배열을 반환하는 배열이다. 조건을 충족하는 메소드만 정리했다.
slice(n,m)
n부터 m까지 반환한다. 주의할 것은 인덱스 n번부터 시작해서 인덱스 m직전까지 반환한다는 점이다.
let arr=[1,2,3,4,5];
arr.slice(1,4);
//[2,3,4]concat(arr2, arr3 ...)
원본 배열과 인자로 받은 배열을 합쳐서 새로운 배열을 반환한다. 정렬 순서는 원본배열+왼쪽->오른쪽 인자 순서
let arr=[1,2];
arr.concat([3,4]);
//[1,2,3,4];filter(fn)
fn에 만족하는 모든 요소를 배열로 반환한다
const arr=[1,2,3,4,5,6,];
const result=arr.filter((item)=>{
return item%2===0;
});
//[2,4,6]map(fn)
함수를 받아서 특정 기능을 실행하고 배열로 반환한다
let userList = [
{ name: "Mike", age: "30", },
{ name: "Jane", age: "27", },
{ name: "Tom", age: "19", },
];
const result2 = userList.map((user, index) => {
return Object.assign({}, user, {
isAdult: user.age > 19,
id: index + 1,
});
});[{name: 'Mike', age: '30', isAdult: true, id: 1},
{name: 'Jane', age: '27', isAdult: true, id: 2},
{name: 'Tom', age: '19', isAdult: false, id: 3}]