4회차 스터디 후 src/refactoring 리팩터링하기

src/refactoring/example-1.js

@@ -1,3 +1,11 @@
+function setValueByName(cart, name, key, value) {
+  var item = cart[name];
+  var newItem = objectSet(item, key, value);
+  var newCart = objectSet(cart, name, newItem);
+  return newCart;
+}
+
+// setValueByName (cart, name, 'price', price)
 function setPriceByName(cart, name, price) {
   var item = cart[name];
   var newItem = objectSet(item, 'price', price);

src/refactoring/example-2.js

@@ -1,3 +1,10 @@
+function forEachExecutor(arr, callbacks) {
+  for (var i = 0; i < arr.length; i++) {
+    var el = arr[i];
+    callbacks[i](el);
+  }
+}
+
 for (var i = 0; i < foods.length; i++) {
   var food = foods[i];
   cook(food);

src/refactoring/example-3.js

@@ -3,13 +3,29 @@ var user = {
 };
 
 async function getUserData({ id }) {
-  const response = await fetch(`https://jsonplaceholder.typicode.com/users?id=${id}`);
+  const response = await fetch(
+    `https://jsonplaceholder.typicode.com/users?id=${id}`
+  );
 }
 
-var logToSnapErrors = error => console.log(`🚫 에러가 발생했어요: ${error.message}`);
+var logToSnapErrors = (error) =>
+  console.log(`🚫 에러가 발생했어요: ${error.message}`);
 
 try {
   getUserData(user);
 } catch (error) {
   logToSnapErrors(error);
 }
+
+function WithLogToSnapErros(callback) {
+  return function (arg) {
+    try {
+      callback(arg);
+    } catch (error) {
+      logToSnapErrors(error);
+    }
+  };
+}
+
+const getUserDataWithLog = WithLogToSnapErros(getUserData);
+getUserDataWithLog({ id });

src/refactoring/수정전-01_조건부_복잡성.js

@@ -1,60 +1,54 @@
-const getAnimalEmoji = animal => {
-  if (animal === 'dog') {
-    return '🐶';
-  } else if (animal === 'cat') {
-    return '🐱';
-  } else if (animal === 'frog') {
-    return '🐸';
-  } else if (animal === 'panda') {
-    return '🐼';
-  } else if (animal === 'giraffe') {
-    return '🦒';
-  } else if (animal === 'monkey') {
-    return '🐵';
-  } else if (animal === 'unicorn') {
-    return '🦄';
-  } else if (animal === 'dragon') {
-    return '🐲';
-  }
+// 01. mapping
+const AnimalEmojiMap = {
+  dog: '🐶',
+  cat: '🐱',
+  frog: '🐸',
+  panda: '🐼',
+  giraffe: '🦒',
+  monkey: '🐵',
+  unicorn: '🦄',
+  dragon: '🐲',
+};
+
+const getAnimalEmoji = (animal) => {
+  return AnimalEmojiMap[animal];
 };
 console.log(getAnimalEmoji('dragon'));
 
-const printMyAnimal = animal => {
-  if (animal === 'dog' || animal === 'cat') {
-    console.log(`I have a ${animal}`);
-  }
+// 02. includes
+const MY_ANIMAL = ['dog', 'cat'];
+const printMyAnimal = (animal) => {
+  MY_ANIMAL.includes(animal) && console.log(`I have a ${animal}`);
 };
+
 console.log(printMyAnimal('dog'));
 
-const getAnimalDetails = animal => {
-  let result;
-
-  if (animal) {
-    if (animal.type) {
-      if (animal.name) {
-        if (animal.gender) {
-          result = `${animal.name} is a ${animal.gender} ${animal.type}`;
-        } else {
-          result = 'No animal gender';
-        }
-      } else {
-        result = 'No animal name';
-      }
-    } else {
-      result = 'No animal type';
-    }
-  } else {
-    result = 'No animal';
+//03. find
+const ANIMAL_PROPERTIES = ['type', 'name', 'gender'];
+
+const hasProperty = (obj, key) => Object.keys(obj).includes(key);
+
+const getAnimalDetails = (animal) => {
+  if (typeof animal !== 'object') {
+    return 'No animal';
   }
 
-  return result;
+  const missingProperty = ANIMAL_PROPERTIES.find(
+    (property) => !hasProperty(animal, property)
+  );
+
+  return missingProperty
+    ? `No animal ${missingProperty}`
+    : `${animal.name} is a ${animal.gender} ${animal.type}`;
 };
+
 console.log(getAnimalDetails());
 console.log(getAnimalDetails({ type: 'dog', gender: 'female' }));
 console.log(getAnimalDetails({ type: 'dog', name: 'Lucy' }));
 console.log(getAnimalDetails({ type: 'dog', name: 'Lucy', gender: 'female' }));
 
-const printFruits = color => {
+//04. 01처럼 mapping 하면 안되나...?
+const printFruits = (color) => {
   switch (color) {
     case 'red':
       return ['apple', 'strawberry'];
@@ -69,12 +63,10 @@ const printFruits = color => {
 console.log(printFruits(null));
 console.log(printFruits('yellow'));
 
-const printVegetableName = vegetable => {
-  if (vegetable && vegetable.name) {
-    console.log(vegetable.name);
-  } else {
-    console.log('unknown');
-  }
+//05. 논리 연산자
+const printVegetableName = (vegetable) => {
+  const vegetableName = (vegetable && vegetable.name) || 'unknown';
+  console.log(vegetableName);
 };
 printVegetableName(undefined);
 printVegetableName({});
@@ -95,15 +87,29 @@ const car = {
 const model = (car && car.model) || 'default model';
 
 const street =
-  (car && car.manufacturer && car.manufacturer.address && car.manufacturer.address.street) || 'default street';
+  (car &&
+    car.manufacturer &&
+    car.manufacturer.address &&
+    car.manufacturer.address.street) ||
+  'default street';
+
+const phoneNumber =
+  car &&
+  car.manufacturer &&
+  car.manufacturer.address &&
+  car.manufacturer.phoneNumber;
 
-const phoneNumber = car && car.manufacturer && car.manufacturer.address && car.manufacturer.phoneNumber;
 console.log(model);
 console.log(street);
 console.log(phoneNumber);
 
 const isManufacturerFromUSA = () => {
-  if (car && car.manufacturer && car.manufacturer.address && car.manufacturer.address.state === 'USA') {
+  if (
+    car &&
+    car.manufacturer &&
+    car.manufacturer.address &&
+    car.manufacturer.address.state === 'USA'
+  ) {
     console.log('true');
   }
 };

src/refactoring/수정전-03_부적절한_평가.js

@@ -12,7 +12,8 @@ const Client = ({ name, type, location }) => {
   getName = () => this.name;
   getType = () => this.name;
   getLocation = () => this.location;
-  getPriceByProduct = product => product.value - per2Int(product.value, this.offers[this.type]);
+  getPriceByProduct = (product) =>
+    product.value - per2Int(product.value, this.offers[this.type]);
 
   return {
     getName,
@@ -52,7 +53,7 @@ const Order = ({ id, value, client, product }) => {
   getValue = () => this.value;
   getClient = () => this.client;
   getProduct = () => this.product;
-  getTaxes = loc => this.getTaxes(this.taxes[loc]);
+  getTaxes = (loc) => this.getTaxes(this.taxes[loc]);
 
   return {
     getId,
@@ -72,7 +73,10 @@ const Summary = ({ order }) => {
     return `Order: ${order.getId()}
                 Client: ${client.getName()}
                 Product: ${product.getProductName()}
-                TotalAmount: ${client.getPriceByProduct(product) + this.order.getTaxes(client.getLocation())}
+                TotalAmount: ${
+                  client.getPriceByProduct(product) +
+                  this.order.getTaxes(client.getLocation())
+                }
 
 
                 Arrival in: ${this.order.product.getShipping()} days.`;