Javascript 보석 같은 한 줄짜리 코드

JavaScript에는 많은 강력한 기능을 수행하는 한 줄의 코드에 대한 많은 예가 있습니다. 개인적으로 항상 사용하는 10가지 JavaScript 한 줄짜리 모음을 살펴보겠습니다.

이 목록에 아직 알지 못하는 몇 가지 단일 라이너가 있기를 바랍니다.

 

1. 객체 배열 정렬

특정 속성을 기반으로 객체 배열을 정렬하는 방법을 아는 것은 데이터를 특정 순서로 렌더링할 때 유용할 수 있습니다. 알파벳 순서에 따라 페이지에 결과를 렌더링하려고 한다고 가정해 보겠습니다.

배열을 정렬하는 코드를 작성할 수 있는 몇 가지 방법이 있지만 JavaScript에서는 이 작업을 매우 쉽게 수행할 수 있습니다.

모든 예제에서 우리는 JavaScript의 정렬 방법을 사용합니다. 첫 번째 예는 화살표 함수를 사용합니다.

const people = [
    { firstName: 'Laura', lastName: 'Smith' },
    { firstName: 'John', lastName: 'Wilson' },
    { firstName: 'Ted', lastName: 'Jonhson' }
]

people.sort((firstEl, secondEl) => {
  const property = 'lastName'

  if (firstEl[property] < secondEl[property]) {
    return -1
  } else if (firstEl[property] > secondEl[property]) {
    return 1
  }
  return 0
})
// [{firstName: 'Ted', lastName: 'Jonhson'},
// {firstName: 'Laura', lastName: 'Smith'},
// {firstName: 'John', lastName: 'Wilson'}]

원한다면 이것을 리팩토링할 수도 있습니다. 여러 위치에서 비교 기능을 사용해야 할 가능성이 있습니다. 이 경우 compareNames 함수 를 재사용할 수 있도록 다음 구현을 권장합니다 .

const people = [
    { firstName: 'Laura', lastName: 'Smith' },
    { firstName: 'John', lastName: 'Wilson' },
    { firstName: 'Ted', lastName: 'Jonhson' }
]

const compareNames = (firstEl, secondEl) => {
  const property = 'lastName'

  if (firstEl[property] < secondEl[property]) {
    return -1
  } else if (firstEl[property] > secondEl[property]) {
    return 1
  }
  return 0
}

people.sort(compareNames)
// [{firstName: 'Ted', lastName: 'Jonhson'},
// {firstName: 'Laura', lastName: 'Smith'},
// {firstName: 'John', lastName: 'Wilson'}]

물론 제목에서 이미 알 수 있듯이 한 줄로 수행할 수도 있습니다. 많은 논리가 포함된 비교 기능이 있는 경우 이것이 매우 빠르게 지저분해질 수 있지만. 비교 기능이 상당히 간단한 경우에만 이 구현을 사용하겠습니다.

const people = [
    { firstName: 'Laura', lastName: 'Smith' },
    { firstName: 'John', lastName: 'Wilson' },
    { firstName: 'Ted', lastName: 'Jonhson' }
]

people.sort((firstEl, secondEl) => (firstEl['lastName'] < secondEl['lastName']) ? -1 : (firstEl['lastName'] > secondEl['lastName']) ? 1 : 0)
// [{firstName: 'Ted', lastName: 'Jonhson'},
// {firstName: 'Laura', lastName: 'Smith'},
// {firstName: 'John', lastName: 'Wilson'}]

 

 

2. 배열의 교집합 구하기

배열의 교차점을 얻는 것은 두통을 유발할 수 있는 프로그래밍 문제 중 하나일 수 있습니다. 그러나 이 한 줄로 모든 작업을 수행할 수 있으므로 그럴 필요가 없습니다. 이는 진정한 두통을 덜어줄 수 있습니다.

이 함수는 한 번에 두 개 이상의 배열의 교집합을 얻을 수 있습니다.

const intersection = (a, ...arr) => [...new Set(a)].filter((v) => arr.every((b) => b.includes(v)))

intersection([1, 2, 3], [2, 3, 4, 7, 8])
// [2, 3]

intersection([1, 2, 3], [2, 3, 4, 7, 8], [1, 3, 9])
// [3]

 

3. 한 달의 일수 구하기

외부 라이브러리의 도움 없이 JavaScript에서 날짜로 작업하는 것은 때때로 정말 고통스러울 수 있습니다. 그러나 한 달의 일수를 계산하는 데 도움이 되는 깨끗하고 쉬운 원 라이너가 있다는 것을 알고 계셨습니까?

const daysInMonth = (month, year) => new Date(year, month, 0).getDate()

daysInMonth(2, 2024)
// 29

daysInMonth(12, 2022)
// 31

 

4. 좋은 방법으로 값 바꾸기

두 변수의 값을 바꾸는 것은 아마도 이전에 많이 했을 것입니다. 이를 수행하는 구식 방법은 다음과 같은 임시 세 번째 변수를 사용하는 것입니다.

let personA = "Laura"
let personB = "John"

let temp = personA
personA = personB
personB = temp

console.log(personA) 
// "John"

console.log(personB) 
// "Laura"

그러나 JavaScript에서 두 변수의 값을 바꾸는 훨씬 쉬운 솔루션이 있다는 것을 알고 계셨습니까? 실제 스와핑이 한 줄에서 발생하는 다음 코드 줄을 살펴보십시오.

let personA = "Laura"
let personB = "John"

[personA, personB] = [personB, personA]

console.log(personA) 
// 'John'

console.log(personB) 
// 'Laura'

이 솔루션이 훨씬 깔끔해 보이지 않나요?

 

5. 배열 평면화

이 깔끔한 원 라이너로 어레이를 평평하게 하는 것이 진짜 도전이 될 수 있는 시대는 끝났습니다.

const flatten = (arr) => arr.reduce((a, b) => (Array.isArray(b) ? [...a, ...flatten(b)] : [...a, b]), [])

flatten([[1, 2], [3, 4], [5, 6]])
// [1, 2, 3, 4, 5, 6]

flatten([["some", "text"], "and", ["some", "more"]])
// ['some', 'text', 'and', 'some', 'more']

그러나 이것을 달성하는 더 짧은 방법이 있습니다. 배열 에서 플랫 메서드를 호출 하고 동일한 결과를 얻을 수 있습니다. 그러나 이 기능은 아직 완전히 지원 되지 않습니다 . 특히 여러 브라우저의 이전 버전에서는 이 기능에 대한 지원이 부족합니다.

[[1, 2], [3, 4], [5, 6]].flat()
// [1, 2, 3, 4, 5, 6]

[["some", "text"], "and", ["some", "more"]].flat()
// ['some', 'text', 'and', 'some', 'more']

 

6. 여러 공백을 단일 공백으로 바꾸기

공백을 처리하는 것은 성가실 수 있습니다. 공백의 가장 일반적인 문제 중 하나는 여러 공백을 처리해야 하는 것입니다. 운 좋게도 하나의 공백으로 바꿀 수 있습니다.

const replaceSpaces = (str) => str.replace(/\s\s+/g, ' ')

replaceSpaces('Too   many  spaces')
// 'Too many spaces'

탭 및 새 줄과 같은 다른 공백 문자도 교체하려는 경우가 있을 수 있습니다. 단 한 줄의 공백으로 이를 대체할 수도 있습니다.

const replaceSpaces = (str) => str.replace(/\s\s+/g, ' ')

replaceSpaces('too\n   many     \twhitespaces    \rin here')
// 'too many whitespaces in here'

 

7. 배열의 요소를 무작위 순서로 정렬

배열의 요소를 섞고 싶을 때가 있습니다. 예를 들어 카드 더미를 섞을 때. 이 작업을 수행할 수 있는 표준 JavaScript 기능은 없습니다. 그러나 매우 짧지만 강력한 코드 줄로 수행할 수 있습니다.

배열의 항목이 같은 유형일 필요는 없습니다.

const sortRandom = (arr) => arr.sort(() => Math.random() - 0.5)

sortRandom([1, 2, 3, 4, 5])
// [4, 3, 2, 5, 1]

sortRandom(["Some text", 2, true, 4, 94.12])
// ['Some text', 94.12, 2, true, 4]

 

8. 두 객체가 같은지 확인

객체를 비교하고 동일한지 확인하는 것은 코딩할 때 두 번 이상 우연히 발견할 수 있는 이 목록의 항목 중 하나입니다. objectA === objectB객체를 비교하는 것은 대부분의 시간 을 수행하는 것보다 조금 더 정교 합니다. 그러나 단 한 줄의 코드로 수행할 수 있습니다.

이 기능의 장점은 이 기능이 두 개 이상의 객체를 검사하는 데에도 작동한다는 사실입니다.

const isEqual = (...objects) => objects.every(obj => JSON.stringify(obj) === JSON.stringify(objects[0]))

isEqual({ name: 'Frank', age: 32 }, { name: 'Frank', age: 32 })
// true

isEqual({ name: 'Frank', age: 41 }, { name: 'Frank', age: 32 })
// false

isEqual({ name: 'Frank', age: 32 }, { name: 'Frank', age: 32 }, { name: 'Frank', age: 32 })
// true

isEqual({ name: 'Frank', age: 32 }, { name: 'Frank', age: 32 }, { name: 'Lisa', age: 32 })
// false

 

9. 배열에서 임의의 항목 가져오기

배열에서 임의의 항목을 가져오는 것은 때때로 유용할 수 있는 강력한 단일 라이너 중 하나입니다. 숫자로 채워진 배열에서 임의의 값을 얻으려고 하는지 여부는 중요하지 않습니다. 개체는 이 둘의 조합입니다.

const getRandomItem = arr => arr[Math.floor(Math.random() * arr.length)]

getRandomItem([1, 7, 9, 3, 6]) 
// 6

getRandomItem([{ name: "Ted" }, { name: "Philip" }, { name: "Jack" }]) 
// { name: "Philip" }

getRandomItem([{ name: "Ted" }, 1, "Some text", 4, { name: "Jack" }]) 
// 'Some text'

 

10. 문자열을 슬러그화(Slugify)

사람이 읽을 수 있는 URL을 생성하려면 URL을 slugify하고 싶을 것입니다. 슬러그는 대표 문자열의 정규화된 버전입니다. 대부분의 경우 제목은 슬러그에 사용됩니다.

https://mywebsite.com/my-first-blog-post

이것은 슬러그의 모습입니다. 블로그 제목 "My First Blog Post my-first-blog-post"에서 파생되었습니다.

사람이 읽을 수 있는 URL을 만드는 가장 일반적인 방법이기 때문에 이러한 URL을 항상 볼 수 있습니다. 그러나 문자열을 slugify하는 데 JavaScript에서 단 한 줄의 코드가 필요하다는 것을 알고 계셨습니까?

const slugify = (str) => str.toLowerCase().replace(/\s+/g, '-').replace(/[^\w-]+/g, '')

slugify('The first post: What is going on?') // 'the-first-post-what-is-going-on'

생각보다 훨씬 쉽죠?! 이 함수가 하는 일은 문자열을 소문자로 변환하는 것입니다. 그런 다음 공백을 하이픈으로 바꿉니다. 마지막으로 영숫자가 아닌 모든 문자를 제거합니다.