Javascript 함수형 예제

const capitalizeWithoutSpaces = (str) =>
  str
    .split('')
    .filter((char) => char.trim())
    .map((char) => char.toUpperCase())
    .join('');

1. 배열에서 가장 작은 값 구하기

const getSmallest = (arr) => {
  let smallest = Number.POSITIVE_INFINITY;
  for (const num of arr) {
    if (num < smallest) {
      smallest = num;
    }
  }
  return smallest;
};

const getSmallest = (arr) =>
  arr.reduce((smallest, num) => Math.min(smallest, num));

2. 배열에서 가장 큰 값 구하기

const getLargest = (arr) => {
  let largest = Number.NEGATIVE_INFINITY;
  for (const num of arr) {
    if (num > largest) {
      largest = num;
    }
  }
  return largest;
};

const getLargest = (arr) =>
  arr.reduce((largest, num) => Math.max(largest, num));

3. 배열 값 섞기

const shuffleArray = (arr) => {
  for (let i = arr.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    let temp = arr[i];
    arr[i] = arr[j];
    arr[j] = temp;
  }
  return arr;
};

const shuffleArray = (arr) =>
  [...Array(arr.length)]
    .map((_, i) => Math.floor(Math.random() * (i + 1)))
    .reduce(
      (shuffled, r, i) =>
        shuffled.map((num, j) =>
          j === i ? shuffled[r] : j === r ? shuffled[i] : num
        ),
      arr
    );

4. 오브젝트 속성 값으로 그룹 만들기

const groupBy = (arr, groupFn) => {
  const grouped = {};
  for (const obj of arr) {
    const groupName = groupFn(obj);
    if (!grouped[groupName]) {
      grouped[groupName] = [];
    }
    grouped[groupName].push(obj);
  }
  return grouped;
};
const people = [
  { name: 'Matt' },
  { name: 'Sam' },
  { name: 'John' },
  { name: 'Mac' },
];
const groupedByNameLength = groupBy(people, (person) => person.name.length);
/**
{
  '3': [ { name: 'Sam' }, { name: 'Mac' } ],
  '4': [ { name: 'Matt' }, { name: 'John' } ]
}
 */
console.log(groupedByNameLength);

5. 문자 역순으로

We could reverse a string in JavaScript using a reverse for loop like this:

const reverseString = (str) => {
  let reversed = '';
  for (let i = str.length - 1; i >= 0; i--) {
    const ch = str[i];
    reversed += ch;
  }
  return reversed;
};
const reverse = reverseString('javascript');
console.log(reverse); // tpircsavaj

const reverse = reverseString('javascript');
console.log(reverse); // tpircsavaj

6. 랜덤 Hex Color 코드

const randomHexColor = () =>
  `#${Math.random().toString(16).slice(2, 8).padEnd(6, '0')}`;

7. 배열 안의 값들 평균 구하기

const getAverage = (arr) => {
  let sum = 0;
  for (const num of arr) {
    sum += num;
  }
  return sum / arr.length;
};
const average = getAverage(arr);

8. 두개의 배열 안의 값이 같은 지 비교

const areEqual = (arr1, arr2) => {
  if (arr1.length === arr2.length) {
    for (const num of arr1) {
      if (!arr2.includes(num)) {
        return false;
      }
    }
    return true;
  }
  return false;
};const arr1 = [1, 2, 3, 4];
const arr2 = [3, 4, 1, 2];
const arr3 = [1, 2, 3];
console.log(areEqual(arr1, arr2)); // true
console.log(areEqual(arr1, arr3)); // false

const areEqual = (arr1, arr2) =>
  arr1.sort().join(',') === arr2.sort().join(',');

9. 배열내 중복값 제거

We could remove duplicates from an array like this:

const removeDuplicates = (arr) => {
  const result = [];
  for (const num of arr) {
    if (!result.includes(num)) {
      result.push(num);
    }
  }
  return result;
};const distinct = removeDuplicates(arr);console.log(distinct); // [1, 2, 3, 4, 5]

const distinct = removeDuplicates(arr);console.log(distinct); // [1, 2, 3, 4, 5]

10. Map 을 JSON 으로 변경

This short function lets us quickly convert a Map object to a JSON string without losing any information:

const map = new Map([
  ['user1', 'John'],
  ['user2', 'Kate'],
  ['user3', 'Peter'],
]);

const json = JSON.stringify(Object.fromEntries(map));

const map = new Map([
  ['user1', 'John'],
  ['user2', 'Kate'],
  ['user3', 'Peter'],
]);

const obj = Object.fromEntries(map);

11. JSON 을 Map 으로

Another one-liner can reverse the conversion above. The following function will convert a JSON string to a Map object.

const map = new Map([
  ['user1', 'John'],
  ['user2', 'Kate'],
  ['user3', 'Peter'],
]);

const jsonFromMap = JSON.stringify(Object.fromEntries(map));

const obj = JSON.parse(jsonFromMap);
const mapFromObj = new Map(Object.entries(obj));

// Map(3) { 'user1' => 'John', 'user2' => 'Kate', 'user3' => 'Peter' }
console.log(mapFromObj);

12. Snake Case 를 Camel Case 로 변경하기

const snakeToCamelCase = (s) =>
  s.toLowerCase().replace(/(_\w)/g, (w) => w.toUpperCase().substr(1));const str1 = 'learn_javascript';
const str2 = 'coding_beauty';console.log(snakeToCamelCase(str1)); // learnJavaScript
console.log(snakeToCamelCase(str2)); // codingBeauty

13. Random UUID 만들기

const generateRandomUUID = (a) =>
  a
    ? (a ^ ((Math.random() * 16) >> (a / 4))).toString(16)
    : ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(
        /[018]/g,
        generateRandomUUID
      );
console.log(generateRandomUUID()); // f138f635-acbd-4f78-9be5-ca3198c4cf34
console.log(generateRandomUUID()); // 8935bb0d-6503-441f-bb25-7bc685b5b5bc

14. Conditional Flow Control

const getNumWord = (num) => {
  if (num === 1) {
    return 'one';
  } else if (num === 2) {
    return 'two';
  } else if (num === 3) {
    return 'three';
  } else if (num === 4) {
    return 'four';
  } else return 'unknown';
};
console.log(getNumWord(1)); // one
console.log(getNumWord(3)); // three
console.log(getNumWord(7)); // unknown

const getNumWord = (num) => {
  switch (num) {
    case 1:
      return 'one';
    case 2:
      return 'two';
    case 3:
      return 'three';
    case 4:
      return 'four';
    default:
      return 'unknown';
  }
};console.log(getNumWord(1)); // one
console.log(getNumWord(3)); // three
console.log(getNumWord(7)); // unknown

const getNumWord = (num) =>
  num === 1
    ? 'one'
    : num === 2
    ? 'two'
    : num === 3
    ? 'three'
    : num === 4
    ? 'four'
    : 'unknown';
console.log(getNumWord(1)); // one
console.log(getNumWord(3)); // three
console.log(getNumWord(7)); // unknown

참고사이트

Originally published at codingbeautydev.com

Uploaded by N2T