JS 유용한 문법들

목차

1. 단축 평가 논리 계산법
2. 비구조화 할당(구조 분해) 문법
3. spread와 concat

 

---

1. 단축 평가 논리 계산법

&&,  || 를 사용하여 논리 평가식을 더 짧고 간단하게 작성할 수 있음

 

A && B - A가 Falsy이면 A, Truthy하면 B가 결과값

A || B - A가 Truthy하면 A, Falsy하면 B가 결과값

 

예시)

 

기존 방식 : 삼항연산자를 이용 -> 참/거짓을 확인할 식 ? True일 경우 실행할 코드 : False일 경우 실행할 코드

{ isSpecial ? <b>*</b> : null }

 

단축 평가 논리 계산법 사용 

{ isSpecial && <b>*</b> }

 

참고

Falsy : null, undefined, 0, ""(공백), NaN

Truthy : Falsy가 아닌 것, !Falsy

 

A ?? B - A가 NULL이거나 undefined가 아니면 A를, 맞으면 B가 결과값

 

---

2. 비구조화 할당(구조 분해) 문법

객체 안에 있는 값을 추출해서 변수 혹은 상수로 바로 선언하는 것

 

 

기존 방식

// 객체
const object = { a:1, b:2 };

// 배열
const fruits = ['APPLE', 'BANANA', 'KIWI'];

const apple = fruits[0];
const banana = fruits[1];
const kiwi = fruits[2];

 

비구조화 할당 문법 적용

// 객체
const { a, b } = object;

// 배열
const [apple, banana, kiwi] = ['APPLE', "BANANA", "KIWI"];

 

---

3. spread와 concat

spread

- 객체 혹은 배열을 펼치는 것

- 리액트에서 배열이나 객체에 값을 추가할 때에도 사용됨

 

예시)

// 배열
const fruits = ['APPLE', 'BANANA'];

const newFruits = [...fruits, 'KIWI'];

// ['APPLE', 'BANANA', 'KIWI']



// 객체
const tire = {
	number: 4
};

const car = {
	...tire,
	type: '트럭'
}

// {number: 4, type: '트럭'}

 

concat

- 기존 배열과 파라미터로 받은 값을 합쳐서 새로운 배열을 만듦

- 파라미터가 배열인 경우 배열 안의 원소를 꺼내서 포함시킴

 

예시)

const alphabets = ['a', 'b', 'c'];
const newAlphabets = alphabets.concat('d', 'e', ['f', 'g']);

// newAlphabets = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];