초보 개발자가 프로처럼 보일 수 있는 자바스크립트 원라이너 10가지

2024-06-11

Coding, JavaScript, Javascript Development, Javascript Tips, Programming, Web Development

다른 사람이 자바스크립트 한 줄로 문제를 해결했을 때 코딩에 푹 빠져본 적이 있나요? 마치 코딩 마술과도 같습니다. 이것이 바로 한 줄의 힘입니다. 이 짧은 코드 스니펫은 매우 효과적이어서 마치 자바스크립트 전문가가 된 듯한 기분을 느낄 수 있습니다.

원라이너(one-liner)는 기능을 한 줄로 압축한 짧은 자바스크립트 코드 조각입니다. 원라이너를 사용하면 보다 간결한 코드를 작성할 수 있고 때로는 가독성을 향상시킬 수도 있습니다.

어떤 이점이 있을까요? 시간을 절약하고, 더 깔끔한 코드를 작성하며, 다른 개발자에게 깊은 인상을 줄 수도 있습니다(약간은). 이제 초보자도 쉽게 따라 할 수 있는 실용적인 원라이너에 초점을 맞추고 있습니다.

1. Array Filtering

시험 점수의 배열이 있고 점수 중에 짝수를 찾아야 한다고 가정해 봅시다. 한 줄로 해결하세요!

1
2
3

const scores = [85, 92, 73, 98, 80];
const evenScores = scores.filter((num) => num % 2 === 0);
// 결과: [92, 98, 80]

이 코드는 filter 메서드를 사용하여 테스트를 통과한 요소만 포함하는 새 배열을 만듭니다. 화살표 함수(num => num % 2 === 0)는 각 숫자가 짝수인지 확인합니다.

배열에서 원하지 않는 요소를 제거하는 필터링은 일반적인 작업입니다. 이 한 줄짜리 함수는 데이터를 깔끔하게 유지하는 데 유용합니다.

2. Array Mapping

변 길이의 배열이 있고 각 사각형의 면적을 파악하려는 경우. 이 한 줄로 배열의 각 요소를 해당 정사각형으로 매핑(변환)할 수 있습니다.

1
2
3

const sideLengths = [5, 3, 7];
const areas = sideLengths.map((num) => num * num);
// 결과: [25, 9, 49]

map 메서드는 원래 배열의 모든 요소에 대해 제공된 함수를 호출한 결과로 새 배열을 만듭니다. 여기서 함수는 각 숫자를 제곱합니다. 이 함수는 배열의 각 요소에 수학적 연산을 수행할 때 유용합니다.

3. Flattening Arrays

식료품점 제품 목록과 같이 각 이형 상품에 대한 하위 항목이 있는 중첩 배열을 접할 때가 있습니다. 한 줄짜리 코드를 사용하면 이러한 구조를 평평하게 만들 수 있습니다.

const nestedGroceries = [
  ['Apples', ['Red', 'Green']],
  ['Milk', ['Whole', '2%']],
];
const flatGroceries = nestedGroceries.flat();
// 결과: ["Apples", "Red", "Green", "Milk", "Whole", "2%"]

flat 메서드(ES6 이상에서 사용 가능)는 모든 하위 배열 요소가 연결된 새 배열을 생성합니다. 이를 통해 데이터 조작 작업을 간소화할 수 있습니다.

중첩 배열을 플랫화하면 단일 차원의 데이터로 작업하기가 더 쉬워집니다.

4. 고유 요소(중복 허용되지 않음!)

게스트 목록에 안타깝게도 중복 항목이 있는 경우가 있을 수 있습니다. 한 줄짜리 코드를 사용하면 모든 사람에게 고유한 초대장을 보낼 수 있습니다.

const guestList = ['Alice', 'Bob', 'Charlie', 'Alice'];
// 중복입니다!
const uniqueGuests = [...new Set(guestList)];
// 결과: ["Alice", "Bob", "Charlie"]

데이터 정리는 종종 배열에서 중복을 제거하는 것을 의미합니다. 이 코드로 데이터를 깨끗하고 깔끔하게 유지합니다.

5. 조건문

조건에 따라 값을 할당하기 위해 여러 줄에 걸쳐 if...else 문을 작성해 본 적이 있나요? 더 간결한 방법이 있습니다.

1 2	const age = 18; const message = age >= 18 ? 'Welcome!' : 'Sorry, not yet.';

이 코드는 삼항 연산자를 사용하는데, 한 줄로 짧은 if-else 문을 작성하는 멋진 방법입니다.

조건(age >= 18)이 확인되면 해당 값("Welcome!" 또는 "Sorry, not still.")이 메시지 변수에 할당됩니다. 삼항 연산자는 좋지만 복잡한 상황에서는 코드를 이해하기 어려울 수 있습니다. 현명하게 사용하세요!

6. 문자열 반전

문자열을 반전시켜서 팰린드롬(앞뒤가 같은 단어, 예를 들어 “racecar” 처럼)인지 확인해보는 것은 어떨까요?

1
2
3

const str = 'Hello, world!';
const reversedStr = str.split('').reverse().join('');
// 결과: "!dlrow ,olleH"

문자열을 문자 배열로 나누고, 요소의 순서를 반전시킨 다음 새로운 문자열로 다시 결합하여 한 줄로 만듭니다. 하위 문자열 반전 또는 추출과 같은 문자열 조작 작업은 한 줄로 간단하게 처리할 수 있습니다.

7. 개체 속성 존재 여부

사용자 프로필 시스템을 만들고 있는데 사용자 개체에 특정 속성(예: ‘email’)이 존재하는지 파악해야 한다고 가정해 보세요. 원라이너가 도움이 될 수 있습니다.

1
2
3

const user = { name: 'Alice', age: 30 };
const hasEmail = 'email' in user;
// 결과: false (이메일 속성이 없음)

in 연산자는 객체 내에 프로퍼티가 존재하는지 확인합니다. 여기서는 user 객체에 'email' 프로퍼티가 있는지 확인합니다.

8. 기본 매개변수 값

사용자에게 인사하는 작업을 만들되 이름이 제공되지 않은 경우를 대비해 백업 값을 제공하는 것은 어떨까요? 원라이너로 이를 관리할 수 있습니다.

const greet = (name = 'Guest') => `Hello, ${name}!`;
console.log(greet());
// 결과: Hello, Guest!
console.log(greet('Bob'));
// 결과: Hello, Bob!

이 예시는 ES6 기본 매개변수를 사용합니다. 여기서 greet 함수를 호출할 때 이름을 지정하지 않으면 기본값인 'Guest'가 사용됩니다.

기본 매개변수는 적절한 인수 없이 함수를 호출할 때 발생하는 오류를 방지하여 코드를 더욱 강력하게 만들어 줍니다.

9. 컴팩트 배열

가끔 빈 값이나 null 요소가 있는 배열이 있을 수 있습니다. 원라이너를 사용하면 이러한 불청객을 제거할 수 있습니다.

1
2
3

const numbers = [1, 0, null, 3];
const compactNumbers = numbers.filter(Boolean);
// 결과: [1, 3]

이 예시는 filter 메서드를 다시 활용합니다. 하지만 이번에는 필터가 Boolean 생성자를 사용하여 null, undefined, 0, "", NaN과 같은 “falsy” 값을 확인합니다. false로 평가되는 모든 요소는 새 배열에서 제외됩니다.

10. 동적 객체 키

원라이너를 사용하여 작업 후에 결정되는 키가 있는 객체를 만들 수도 있습니다. 놀랍죠?

1
2
3

const prop = 'score';
const person = { [prop]: 90 };
// 결과: {score: 90}

이 예시는 계산된 프로퍼티 이름을 사용합니다. prop 변수의 값은 객체를 생성할 때 중괄호 안의 키 이름으로 사용됩니다. 이를 통해 변수나 표현식을 기반으로 동적 키를 생성할 수 있습니다.

마무리

자바스크립트 코드를 개선할 수 있는 몇 가지 훌륭한 원라이너를 배웠기를 바랍니다. 원라이너는 강력한 도구이지만 코드의 명확성과 유지보수성을 보장하기 위해 신중하게 사용해야 한다는 점을 기억하세요.

hgko's IT Blog

ProgrammingLanguageJavaScript