리액트에서 자주 사용하는 자바스크립트 문법

1.6.1 구조 분해 할당

 

구조 분해 할당

• 배열 또는 객체의 값을 말 그대로 문해해 개별 변수에 즉시 할당하는 것이다.
• 어떠한 객체나 배열에서 선언문 없이 즉시 분해해 변수를 선언하고 할당하고 싶을 때 사용한다.

 

배열 구조 분해 할당

 

배열의 구조분해 할당은 ,의 위치에 따라 값이 결정된다.

const array = [1, 2, 3, 4, 5]

const [first,second, third ...arrayRest] = array 
//first 1
//second 2
//third 3
//arrayRest[4,5]

 

이 예제에서 중간 인덱스에 대한 할당을 생략하고 싶다면

const array = [1, 2, 3, 4, 5]
const [first, , , , fifth] = array 

first // 1
fifth // 5

이렇게 선언하면 된다.

 

배열 분해 할당에는 기본값을 선언할 수도 있다.

주의할 점은 반드시 undefined일 때만 기본값을 사용한다.

 

뒤에 ...을 사용하면 나머지 모든 값을 해당 변수에 배열로 넣게 된다.

 

객체 구조 분해 할당

 

말 그대로 객체에서 값을 꺼내온 뒤 할당하는 것을 의미한다.

배열 구조 분해 할당과는 달리, 객체는 객체 내부 이름으로 꺼내온다는 차이가 있다.

 

const object = {
 a: 1,
 b: 2,
 c: 3,
 d: 4,
 e: 5,
}

const { a, b, c, ...objectRest } = object
//a 1
//b 2
//c 3
//objectRest = {d:4, e:5}

 

이를 새로운 이름으로 다시 할당하는 것도 가능하다.

 

const object = {
 a: 1,
 b: 2,
}

const { a: first, b: second } = object
//first 1
//second 2

 

배열과 마찬가지로 기본값을 주는 것도 가능하다

 

const object = {
 a: 1,
 b: 2,
}

const { a = 10, b = 10, c = 10 } = object

//a 1
//b 1
//c 10

 

변수에 있는 값으로 꺼내오는 이른바 계산된 속성 이름 방식도 가능하다.

 

const key = 'a'
const object = {
 a: 1,
 b: 1,
}

const { [key]: a } = object

//a = 1

 

전개연산자 ...를 사용하면 나머지 값을 모두 가져올 수 있다.

 

 

1.6.2 전개 구문

 

구조 분해 할당과는 다르게 배열이나 객체, 문자열과 같이 순회할 수 있는 값에 대해 말 그대로 간결하게 사용할 수 있는 구문이다.

 

배열의 전개 구문

 

전개 구문을 활용하면 매우 쉽게 배열을 합성할 수 있다.

const arr1 = ['a', 'b']
const arr2 = [...arr1, 'c', 'd', 'e'] // ['a', 'b', 'c', 'd', 'e']

 

배열 내부에서 ...배열을 사용하면 해당 배열을 마치 전개하는 것 처럼 선언하고,

이를 내부 배열에서 사용할 수 있다.

또한 기존 배열에 영향을 미치지 않고 배열을 복사하는 것도 가능하다.

 

const arr1 = ['a', 'b']
const arr2 = arr1

arr1 === arr2 //true. 내용이 아닌 참조를 복사하기 때문에 true가 반환된다.

const arr1 = ['a', 'b']
const arr2 = [...arr1]

arr1 === arr2 //false. 실제로 값만 복사됐을 뿐, 참조는 다르므로 false가 반환된다.

 

 

객체의 전개 구문

 

객체에서도 배열과 비슷하게 사용이 가능하다.

객체를 새로 만들 때 이 전개 구문을 사용할 수 있고, 객체를 합성하는 데 편리함을 가져다 준다.

const obj1 = {
 a: 1,
 b: 2,
}

const obj2 = {
 c: 3,
 d: 4,
}

const newObj = { ...obj1, ...obj2 }
//{ "a" : 1, "b" : 2, "c" : 3, "d" : 4 }

 

객체 전개 구문에 있어서는 순서가 중요하다.

위에 있을 때와 아래에 있을 때의 작동의 순서 차이로 인해 전혀 다른 객체가 생성될 수 있다.

 

1.6.3 객체 초기자

 

객체 초기자

 

객체를 선언할 때 객체에 넣고자 하는 키와 값을 가지고 있는 변수가 이미 존재한다면

해당 값을 간결하게 넣어줄 수 있는 방식이다.

 

const a = 1
const b = 2

const obj = {
 a,
 b,
}

// {a: 1, b: 2}

 

넣어야 할 키와 값이 각각 a와 1이고, 이미 해당 내용으로 선언된 변수가 있다면 위와 같은 형식으로 축약이 가능해졌다.

 

1.6.4 Array 프로토타입의 메서드: map, filter, reduce, forEach

 

모두 배열과 관련된 메서드로, 기존 배열의 값을 건드리지 않고 새로운 값을 만들어 내기 때문에

기존 값이 변경될 염려 없이 안전하게 사용이 가능하다.

 

Array.prototype.map

• 인수로 전달받은 배열과 똑같은 길이의 새로운 배열을 반환하는 메서드이다.
• 배열의 각 아이템을 순회하면서 각 아이템을 콜백으로 연산한 결과로 구성된 새로운 배열을 만들 수 있다.

const arr = [1, 2, 3, 4, 5]
const doubledArr = arr.map((item) => item * 2)
// [2,4,6,8,10]

 

리액트에서는 주로 특정 배열을 기반으로 어떠한 리액트 요소를 반환하고자 할 때 많이 사용된다.

 

const arr = [1,2,3,4,5]
const Elements = arr.map((item) => {
  return <Fragment key{item}>{item}</Fragment>
})

 

 

Array.prototype.filter

• 콜백 함수를 인수로 받는다.
• 이 콜백 함수에서 truthy 조건을 만족하는 경우에만 해당 원소를 반환한다.
• filter의 결과에 따라 원본 배열의 길이 이하의 새로운 배열이 반환된다.
• 기존 배열에 대해 어떠한 조건을 만족하는 새로운 배열을 반환할 때 쓰인다.

const arr = [1, 2, 3, 4, 5]
const evenArr = arr.filter((item) => item % 2 === 0) 
// [2,4]

 

 

Array.prototype.reduce

• 콜백 함수와 함께 초깃값을 추가로 인수를 받는다.
• 초깃값에 따라 배열이나 객체, 또는 그 이외의 다른 무언가를 반환할 수 있다.
• reducer 콜백 함수를 실행하고, 이를 초깃값에 누적해 결과를 반환한다.

const arr = [1, 2, 3, 4, 5]
const sum = arr.reduce((result, item) => {
 return result + item
}, 0) 
// 15

 

0 : 초깃값

result : 초깃값의 현재값

item : 현재 배열의 아이템

 

콜백의 반환값을 계속해서 초깃값에 누적하면서 새로운 값을 만든다.

 

배열을 원하는 하나의 객체로 변환할 수 있고 다양한 예제에서 사용된다.

filter와 map 의 작동을 reduce 하나로도 구현할 수 있지만 사용법이 복잡해 코드가 직관적이지 않다.

 

 

Array.prototype.forEach

• 콜백 함수를 받아 배열을 순회하면서 단순히 그 콜백 함수를 실행하기만 한다.

const arr = [1, 2, 3]
arr.forEach((item) => console.log(item))
// 1, 2, 3

 

forEach는 아무런 반환값이 없다.

실행되는 순간 에러를 던지거나 프로세스를 종료하지 않는 이상 이를 멈출 수 없다.

>> return 함수의 return이 아닌 콜백 함수의 return으로 간주되기 때문이다.

forEach 내부의 콜백 함수는 무조건0(n)만큼 실행된다.

 

 

1.6.5 삼항 조건 연산자

• 자바스크립트에서 유일하게 3개의 피연산자를 취할 수 있는 문법이다.

const value = 10
const result = value % 2 === 0 ? '짝수' : '홀수'
//짝수

 

맨 앞에 true/false를 판별할 수 있는 조건문이 들어가고 ? 뒤에는 참일 경우 반환할 값 : 뒤에는 거짓일 때 반환할 값을 지정한다.

조건문 ? 참일 때의 값 : 거짓일 때의 값