구조 분해 할당
배열 또는 객체의 값을 말 그대로 분해해 개별 변수에 즉시 할당하는 것.
배열 구조 분해 할당 : 배열의 요소를 개별 변수에 할당하는 방법
기본 사용법 ▼
const array = [1, 2, 3, 4, 5]
let [first, second, third, fourth ,fifth] = array;
console.log(first); // 1
console.log(second); // 2
console.log(third); // 3
console.log(fourth); // 4
console.log(fifth); // 5
일부 요소 건너뛰기 ▼
쉼표를 사용하여 배열의 일부 요소 건너뛰기
const array = [1, 2, 3, 4, 5]
let [first, , , ,fifth] = array;
console.log(first); // 1
console.log(fifth); // 5
기본값 설정 ▼
배열의 요소가 undefined인 경우 기본값을 설정할 수 있다.
- 기본값을 사용하는 것은 a, e
a : 명시적으로 undefined 지정
e : 배열의 길이를 넘어서서 구조 분해 할당됐으므로 undefined 평가됨.
const [a=1, b=1, c=1, d=1, e=1] = [undefined, null, 0, '']
a // 1
b //null
c // 0
d // ''
e // 1
Rest 패턴 ▼
나머지 요소를 하나의 배열로 모아서 할당
const array = [1, 2, 3, 4, 5]
let [first, second, ...arrayRest] = array;
console.log(first); // 1
console.log(second); // 2
console.log(arrayRest); // [3,4,5]
객체 구조 분해 할당 : 객체에서 값을 꺼내온 뒤 할당하는 것
배열 구조 분해 할당과 달리, 객체는 객체 내부 이름으로 꺼내온다는 것
const obj = {a:1, b:1, c:1, d:1, e:1}
const { a, b, c, ...objRest} = obj
// a 1
// b 1
// c 1
// objRest = {d:1, e:1}
새로운 이름으로 재할당, 배열과 마찬가지로 기본값을 주는 것도 가능하다.
전개 구문
배열이나 객체, 문자열과 같이 순회할 수 있는 값에 대해 말 그대로 전개해 간결하게 사용할 수 있는 구문
배열의 전개 구문
const arr1 = ['a', 'b']
const arr2 = [...arr1, 'c', 'd', 'e'] // ['a', 'b', 'c', 'd', 'e']
배열 내부에서 ...배열을 사용하면 해당 배열을 마치 전개하는 것처럼 선언하고 활용 가능
기존 배열에 영향을 미치지 않고 배열을 복사하는 것도 가능하다.
객체의 전개 구문
const obj1 = { a:1, b:2 }
const obj2 = { c:3, d:4 }
const newObj = { ...obj1, ...obj2 }
// { a:1, b:2, c:3, d:4 }
▼ 객체 전개 구문에 있어서 순서가 중요하다. 순서의 차이로 인해 값이 덮여쓰여질 수 있기 때문이다.
const obj = { a:1, b:2, c:3, d:4 }
const newObj = { ...obj, c:10 }
// { a:1, b:2, c:10, d:4 }
객체 전개 구문 이후에 c:10으로 값을 덮어씀.
const obj = { a:1, b:2, c:3, d:4 }
const newObj = { c:10, ...obj}
// { a:1, b:2, c:3, d:4 }
객체 전개 구문이 c:10의 값을 3으로 덮어씀.
객체 초기자
객체에 넣고자 하는 키와 값을 가지고 있는 변수가 존재한다면 해당 값을 간결하게 넣어줄 수 있는 방식이다.
const a = 1
const b = 2
const obj = {
a, b
}
// { a:1, b:2 }
Array 프로토타입의 메서드 : map, filter, reduce, forEach
Array.prototype.map
인수로 전달받은 배열과 똑같은 길이의 새로운 배열을 반환하는 메서드
배열의 각 아이템을 순회하면서 각 아이템을 콜백으로 연산한 결과로 구성된 새로운 배열을 만들 수 있다.
const arr = [1, 2, 3, 4, 5]
const dbArr = arr.map((item) => item * 2)
// [2, 4, 6, 8, 10]
Array.prototype.filter
말 그대로 필터링 역할을 하는 메서드, 어떠한 조건을 만족하는 새로운 배열을 반환할 때 주로 사용
인수로 받는 콜백함수에서 truthy 조건을 만족하는 경우에만 해당 원소를 반환한다.
const arr = [1, 2, 3, 4, 5]
const evenArr = arr.filter((item) => item % 2 === 0)
// [2, 4]
Array.prototype.reduce
콜백 함수와 함께 초깃값을 추가로 인수를 받는데, 이 초깃값에 따라 배열이나 객체, 또는 그 외의 다른 무언가를 반환할 수 있는 메서드
콜백 함수를 실행하고, 이를 초깃값에 누적해 결과를 반환
const arr = [1, 2, 3, 4, 5]
const sum = arr.reduce((result, item) => {
return result + item
}, 0)
// 15
0 > 결과를 누적할 초깃값
콜백 함수의
첫 번째 인수 : 앞서 선언한 초깃값의 현재
두 번째 인수 : 현재 배열의 아이템
>> 콜백의 반환값을 계속 초깃값에 누적하면서 새로운 값을 만드는 것.
Array.prototype.forEach
콜백 함수를 받아 배열을 순회하면서 단순히 그 콜백 함수를 실행하는 메서드
const arr = [1, 2, 3]
arr.forEach((item) => console.log(item))
// 1, 2, 3
※ 주의할 점
1. 반환 값이 없다. 단순히 그 콜백 함수를 실행할 뿐이다. 반환 값은 undefined로 의미가 없다.
2. 메서드가 실행되고 에러를 던지거나, 프로세스를 종료하지 않는 이상 이를 멈출 수 없다.
삼항 조건 연산자
3개의 피연산자를 취할 수 있는 문법
조건문 ? 참일 때 값 : 거짓일 때 값
조건부 렌더링 : if 조건문을 간단하게 쓸 수 있다는 점에서 리액트에서 자주 쓰인다.
※ 간단하지만 중첩해서 사용하면 가독성이 떨어지기 때문에 가급적이면 중첩해서 쓰지는 말자
