[JS] 자바스크립트 문법 TIP

본 포스팅은 YouTube 드림코딩 - 자바스크립트 프로처럼 쓰는 팁을 보고 정리한 글입니다.

1. Ternary Operator

function getResult(score) {
  return score > 5 ? '👍🏻' : '👎🏻';
}

---

2. Nullish Coalescing Operator - ??

leftExpr이 null이거나 undefined인 경우에 값이 할당됨

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 😜

🚨 Default Parameter

Default Parameter는 undefined 경우에만 값이 할당됨

funtion printMessage(text = 'Nothing to display 😜') {
  	console.log(text);
}
printMessage('Hello'); // Hello
printMessage(undefined); // Nothing to display 😜
printMessage(null); // null

🚨 Logical Operator - ||

leftExpr이 falsy (false, 0, -0, NaN, undefined, null, '', "", ``)일 때 rightExpr이 실행됨

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 😜

👉🏻 Nullish Coalescing Operator와 Logical Operator 차이점

leftExpr(null, undefined) `??` rightExpr
leftExpr(falsy) `||` rightExpr

---

3. Object Destructuring

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

---

4. Spread Syntax

4-1. object

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

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

// ❌ Bad Code 💩
const newObject = new Object();
newObject['type'] = item.type;
newObject['size'] = item.size;
newObject['price'] = detail.price;
newObject['made'] = dettail.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 };

4-2. Array

let fruits = ['🍉', '🍊', '🍌'];

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

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

const fruits2 = ['🍈', '🍑', '🍍'];
let combined = fruits.concat(fruits2);
combined = [...fruits, '🍒', ...fruits2];

---

5. Optional Chaining

const bob = {
  name: 'Julia',
  age: 20,
};
const anna = {
  name: 'Julia',
  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);
}

---

6. Template Literals

const person = {
  name: 'Julia',
  score: 4,
}

// ❌ Bad Code 💩
console.log(
  'Hello ' + person.name + ', Your current score is: ', + person.score
);

// ✅ Good Code ✨
console.log(
  `Hello ${person.name}, Your current score is: ${person.score}`
);

// ✅ Good Code ✨
const { name, score } = person;
console.log(`Hello ${name}, Your current score is: ${score}`);

// ✅ Good Code ✨ 함수로 만들어두면 확장성, 유지보수성도 좋음
function greetings(person) {
  const { name, score } = person;
  console.log(`Hello ${name}, Your current score is: ${score}`);
}

---

7. Looping

const items = [1, 2, 3, 4, 5<, 6];

// ❌ Bad Code 💩
function getAllEvens(items) {
  return items.filter((num) => num % 2 === 0);
}

function multiplyByFour(items) {
  return items.map((num) => num * 4);
}

function sumArray(items) {
  items.reduce((a, b) => a + b, 0);
}


// ❌ Bad Code 💩
const event = getAllEvens(item);
const multiple = multiplyByFour(evens);
const sum = sumArray(multiple);
console.log(sum);

// ✅ Good Code ✨
const evens = items.filter((num) => num % 2 === 0);
const multiple = evens.map((num) => num * 4);
const sum = multiple.reduce((a, b) => a + b, 0);
console.log(sum);

// ✅ Good Code ✨
const result = items
  .filter((num) => num % 2 === 0)
  .map((num) => num * 4)
  .reduce((a, b) => a + b, 0);
console.log(result);

---

8. 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);
}

---

🧐 Quiz Time

Remove Duplicates!

const array = ['🐶', '🐱', '🐈', '🐶', '🐕', '🐱'];
console.log(array); // ['🐶', '🐱', '🐈', '🐶', '🐕', '🐱']

console.log([...new Set(array)]); // ['🐶', '🐱', '🐈', '🐕']