[JavaScript] 깔끔한 코드 팁!

요즘 시대에는 정말 좋은 유투버님들이 많다...
많은 유투브 채널을 보곤 하는데 그 중 드림코딩엘리 님의 영상을 많이 보곤 한다.

드림코딩 엘리님은 독학으로는 배우기 쉽지 않은 그런 경험 노하우 및 개념부터하여 양질의 학습을 하게 도와준다.

그래서 그 양질의 지식을 습득하기 위해 기록을 해두려한다.

자바스크립트 프로처럼 쓰는 팁 ✨ (+ 보너스 인터뷰 문제 하나!)

📌 Nullish coalescing operator

null과 undefined 를 체크 할 때 사용한다 !! 🧐

//Bad Code
function printMessage(text){
	let message = text;
    if(text == null || text == undefined){
    	message == "Nothing to display";
    }
    console.log(message);
}

//Good Code 1
function printMessage(text){
	const message = text ?? 'Nothing to display';
    console.log(message);
}

printMessage('Hello');		// Hello
printMessage(undefined);	// Nothing to display
printMessage(null);		// Nothing to display

leftExpr ?? rightExpr
?? 연산자는 text 값이 null이거나 undefined 일때만 🧐 'Nothing to display'를 message에 할당 한다.

✔️ Default Parameter

//Default parameter is only for undefined
function printMessage(text ='Nothing to display'){
	console.log(text);
}

printMessage('Hello');		// Hello
printMessage(undefined);	// Nothing to display
printMessage(null);		// null

Nullish coalescing operator 와 다르게 undefined 일때만 Default Parameter 를 반환한다. null의 경우 null 그대로 출력!

✔️ Logical OR operator ||

// Logical OR operator ||
function printMessage(text){
	const message = text || 'Nothing to display';
    console.log(message);
}

printMessage('Hello');		// Hello
printMessage(undefined)		// Nothing to display
printMessage(null)		// Nothing to display
printMessage(0)			// Nothing to display
printMessage('');		// Nothing to display

leftExpr || rightExpr
leftExpr 이 falsy 일 때 rightExpr 이 실행됨
JavaScript 에서 falsy 란 ?

undefined,null,
false,NaN,
0,-0,
'', "",``

정리

Nullish coalescing operator ??

• null, undefined 모두 체크함

Default Parameter function(text='Nothing to display')

• undefined 일때만 Defualt Parameter 반환 ( null 은 그대로 출력 )

Logical OR operator ||

• falsy 일 경우 rightExpr 이 실행!

3가지의 차이점을 숙지하고 사용하자 !

📌 Object Destructing

> Object Destructuring
const person = { 
	name : 'Han',
    age : 20,
    phone : '010777777',
};

// Bad Code
function displayPerson(person){
	displayAvatar(person.name);
    displayName(person.name);
    displayProfile(person.name, person.age);
}

// Good Code 🤗
function displayPerson(person){
  const {name, age} = person;
  displayAvatar(name);
  displayName(name);
  displayProfile(name, age);
}

📌 Spread Syntax - Object

//Spread Syntax - Object
const item = { type: 'T-shirt', size: 'M' };
const detail = { price: 20, made: 'Korea', gender : 'M'};

// Bad Code
item['price'] = detail.price;

const newObject = new Object();
newObject['type'] = item.type;
newObject['size'] = item.size;
newObject['price'] = detail.price;
newObject['made'] = detail.made;
newObject['gender'] = detail.gender;

// Bad Code
const newObject2 = {
	type: item.type,
    	size: item.size,
	price: detail.price,
	made: detail.made,
	gender: detail.gender,
}

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

// Better Code 😍
const shirt = {...item,...detail, price: 40}; 
//price만 update됨 😱

// Spread Syntax - Array
let fruits = ['Apple', 'Pear', 'Grape'];

//fruits.push('Lemon');
fruits = [...fruits, 'Lemon'];

//fruits.unshift('Lemon');
fruits = ['Lemon', ...fruits];

const fruits2 = ['PineApple', 'Banana'];
let combined = [...fruits, ...fruits2];

정말 놀랍다... 이런게 깔끔한 코드구나 ..😲

📌 Optional Chaining

const bob = {
  name: 'Han',
  age: 20,
};

const john = {
  age: 20,
  job: {
    title: 'Software Engineer',
  },
};

// 어떠한 사람의 직업이 있고 직업이 있다면 직업의 이름이 있으면 그것을 출력 
// Bad Code
function displayJobTitle(person){
  if(person.job && person.job.title){
    console.log(person.job.title);
  }
}

// Good Code 😘
function displayJobTitle(person){
  if(person.job?.title){
     console.log(person.job.title);
  }
}

// Good Code 🤩
function displayJobTitle(person){
  const title = person.job?.title ?? 'No Job Yet';
  console.log(title);
}

놀랍다 놀라워 ...🤣

📌 Async Await

// Promise -> Async/await

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

//Good Code 😘
async function displayUser(){
  const user = await fetchUser();
  const profile = await fetchProfile(user);
  updateUI(user, profile);
}

엘리님 강의에 내용이 조금 더 있는데 궁금하신분들은 상단의 링크로 들어가서 더 배우세요 ~!