목차

• 1. genRandom : min, max 사이에 랜덤한 숫자 반환하는 함수
• 2. create2DArray / create3DArray : 원하는 행과 열, 채워진 숫자로 빈 배열을 생성하는 함수
• 3. flattenObject : 객체를 재귀적으로 평탄화하는 함수
• 4. uniqueValue : 고유한 값을 가진 배열을 반환하는 함수
• 5. countDuplicates : 중복된 개수를 세어 객체로 반환해주는 함수
• 6. toTitleCase : 단어별 시작문자를 대문자로 변환하는 함수
• 7. shuffleArray : 배열을 셔플하는 함수
• 8. average: 평균값 구하는 함수
• 9. isPalindrome : 앞 뒤가 똑같은지 확인하는 함수
• 10. trunCate : 문자열을 원하는 길이로 자르는 함수

What the f*ck JavaScript?

wtfjs는 Javascript의 트리키한 예제들을 모아 놓은 package(https://github.com/denysdovhan/wtfjs)입니다. 35.5k의 star을 받을 정도로 많은 사람들이 Javascript의 독특한 점에 주목하고 있습니다. 이러한 Javascript의 특징을 다르게 생각해보면 어떨까요?

Javascript는 간결합니다. 개발자의 생각을 단순하게 정의하고, 직관적으로 표현할 수 있습니다. short coding에 특화된, 화살표 함수, spread 연산자, 삼항 연산자 등을 잘 활용한다면 짧은 코드에 생각을 표현할 수 있죠.

이번 글에서는 Javascript의 트리키함을 살려 one line으로 구현할 수 있는 유용한 함수를 정리해보려고 합니다. 기능을 구현하거나, Javascript 코딩 테스트에서도 잘 활용할 수 있을 것이라고 생각합니다.

---

one-liner

• one-liner code란, 주요한 기능을 한 문장의 간결한 코드로 정의하는 걸 말합니다.
• 장점으로는 function을 캡슐화해, 간결하게 의도를 전달할 수 있다는 점이 있습니다.

1) 배열 관련

1. genRandom : min, max 사이에 랜덤한 숫자 반환하는 함수

• random함수를 이용해 만든 랜덤값에 범위를 적용해 반환한다.

const genRandom = (min = 0, max = 1000) => {
  return Math.floor(Math.random() * (max - min + 1)) + min;
};
console.log(genRandom());

2. create2DArray / create3DArray : 원하는 행과 열, 채워진 숫자로 빈 배열을 생성하는 함수

• fill로 채워진 cols만큼의 배열을 rows에 다시 넣는 방식으로 구현한다.

const create2DArray = (rows, cols, fill = null) =>
  Array.from({ length: rows }, () => Array(cols).fill(fill));

• 위의 create2DArray함수를 이용해 3차원 배열을 만든다.

const create3DArray = (x, y, z, fill = null) =>
  Array.from({ length: x }, () => create2DArray(y, z, fill));

3. flattenObject : 객체를 재귀적으로 평탄화하는 함수

• reduce를 통해 누적된 acc 객체에 평탄화된 객체를 반환한다.
• 현재 순회 중인 obj가 객체인경우, 다시 재귀적으로 함수를 호출한다.

const flattenObject = (obj, prefix = "") =>
  Object.keys(obj).reduce((acc, k) => {
    const pre = prefix.length ? prefix + "." : "";
    return typeof obj[k] === "object"
      ? { ...acc, ...flattenObject(obj[k], pre + k) }
      : { ...acc, [pre + k]: obj[k] };
  }, {});

const randomArr = [
  [{ name: "kelly" }, { age: 20 }],
  [["01", "02", [100]]],
  [10, 20, 30, 40],
];
console.log(flattenObject(randomArr));

결과값

{
  '0.0.name': 'kelly',
  '0.1.age': 20,
  '1.0.0': '01',
  '1.0.1': '02',
  '1.0.2.0': 100,
  '2.0': 10,
  '2.1': 20,
  '2.2': 30,
  '2.3': 40
}

4. uniqueValue : 고유한 값을 가진 배열을 반환하는 함수

const uniqueValue = (array) => {
  return [...new Set(array)];
};

• 자매품 ) unique: 고유한 값을 가진 객체를 반환한다.

const unique = (array) =>
  Array.from(new Set(array), (item) =>
    typeof item === "object" ? JSON.stringify(item) : item
  );

5. countDuplicates : 중복된 개수를 세어 객체로 반환해주는 함수

• reduce 함수를 통해 acc에 순회하면서 나온 객체값을 저장해준다.
• acc[val] 값이 있다면 (true) 라면 기존값에 +1 한 값을 val의 value 값으로 둔다.
• acc[val] 값이 없다면 (false) 라면 0에 +1 한 값을 val의 value 값으로 둔다.

const countDuplicates = (arr) =>
  arr.reduce((acc, val) => ({ ...acc, [val]: (acc[val] || 0) + 1 }), {});

console.log(countDuplicates([1, 2, 3, 1, 2, 3, 4, 1, 2, 3, 4, 5]));

결과값

{ '1': 3, '2': 3, '3': 3, '4': 2, '5': 1 }

6. toTitleCase : 단어별 시작문자를 대문자로 변환하는 함수

• 단어 단위로 대문자를 만들어준다.
• \b : 단어 경계
• \w : 단어 단위 검색
• g : 전역 검색

const toTitleCase = (string) => {
  return string.replace(/\b\w/g, (char) => char.toUpperCase());
};
console.log(toTitleCase("i want to capitalize this sentence"));

결과값

I Want To Capitalize This Sentence

7. shuffleArray : 배열을 셔플하는 함수

• Math.random()-0.5를 통해 랜덤한 범위를 추출한다.
  • -0.5 ~ 0.5 사이의 범위
  • 양수면 위치를 변경하고, 음수나 0이면 위치를 유지하는 식으로 랜덤하게 정렬한다.

const shuffleArray = (array) => [...array].sort(() => Math.random() - 0.5);
console.log(shuffleArray([1, 2, 3, 4, 5, 6]));

+ Fisher-Yates 알고리즘을 활용한 셔플

• 직접 랜덤한 인덱스와 바꾸면서 셔플을 구현한다.

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

8. 평균값 구하는 함수

• reduce를 이용해 a에 누적합을 두고, length로 나눠준다.

const average = (array) => {
  return array.reduce((a, b) => a + b, 0) / array.length;
};
console.log(average([1, 2, 3, 4, 5, 6, 7, 8, 9]));

---

2) 문자열 관련

1. isPalindrome : 앞 뒤가 똑같은지 확인하는 함수

• 대소문자 구분을 제외하고, 특수문자 및 공백을 제거한 뒤 split → reverse → join을 해도 같은지 확인한다.

const isPalindrome = (str) =>
  str.toLowerCase().replace(/[^a-z0-9]/g, "") ===
  str
    .toLowerCase()
    .replace(/[^a-z0-9]/g, "")
    .split("")
    .reverse()
    .join("");
console.log(isPalindrome("tot")); // true

2. trunCate : 문자열을 원하는 길이로 자르는 함수

• slice 함수를 이용해 원하는 length만큼 자르고, 공백을 제거한다.

const trunCate = (str, length = 30, suffix = "...") =>
  str.length > length ? str.slice(0, length).trim() + suffix : str;
console.log(trunCate("I want to truncate this string.", 5)); // I wan...

참고자료

• https://medium.com/@stanker801/javascript-gems-unleashing-the-power-of-one-liners-e91329e9bed3