Javascript 주요 팁

 

1. 조건이 필요할 때 => 3항 연산자

score > 5 ? 'Good': 'Bad';
// 조건이 true이면 'Good', false이면 'Bad'

2. 조건이 필요할 때 => nullish coalescing

const message = text ?? 'Nothing to display';
//text가 있으면 text, 없으면(null, undefined) 'Nothing to display'

//함수 default parameter : null 인 경우에는 null을 출력
function printMessage(text = 'Nothing to display'){
	console.log(text);
}

// Logical Or ||
leftExpr ?? right Expr
// falsy(null, undefined, false, 0, -0, NaN, "", '', ``)에 right Expr 실행

/* 함수도 할당 가능 */

 

3. Object destructing

const { name, age } = person;
console.log(name, age)

 

4. Spread syntax :

// 기존 object로부터 새로운 object를 작성하기

const item = {type: 'Y', size: 'M'};
const detail = {price: 20, made: 'Korea', gender: 'M'};

// Good
const shirt0 = Object.assign(item, detail);

// Better (spread syntax: 배열도 적용 가능)
const shirt = {...item, ...detail, price: 40};	// 신규 값 할당 가능

 

5. Optional Chaning

// Bad
if(person.job && person.job.title){
	console.log(person.job.title);
}

// Good (Optional Chinaing)
if(person.job?.title){
	console.log(person.job.title);
}

// Better (Optional Chinaing + Nullish coalescing)
const title = person.job?.title ?? 'No job yet';
console.log(title);

 

6. Template Literals ( ` : 백틱 )

console.log(`Hello ${name}, Your current score is : ${score}`);

 

7. Loop가 필요할 때 (For 대신)

// 짝수만 골라, 4를 곱해, 총 합 구하기
const items = [1, 2, 3, 4, 5, 6];
const result = items
	.filter((num) => num %2 ===0)
	.map((num) => num *4)
	.reduce((a, b) => a + b, 0);
    
console.log(result);

 

8. 비동기 처리 (promise => async/await)

// 기존
function displayUser(){
	fetchUser()
    	.then((user) => {
         fetchProfile(user)
         	.then((profile) => {
            	updateUI(user, profile);
         });
});

// 변경
async function displayUser(){
  const user = await fetchUser();
  const profile = await fetchProfile(user);
  updateUI(user, profile);
}

9. 중복 제거

const array = ['dog','cat','doggy','dog','lamb','cat'];
console.log([...new Set(array)]);