상위 11개(및 그 이상!) 반드시 알아야 할 JavaScript 함수

똑똑한 코딩으로 더욱 효율적이고 만족스러운 자바스크립트 개발자가 되어보세요! 핵심 기능을 숙달하여 개발 속도와 생산성을 향상시킬 수 있습니다.

자바스크립트는 백엔드, 프런트엔드, 심지어 우주선 제어 시스템까지 폭넓게 활용됩니다. 매우 유연한 언어이며, 강력한 함수형 프로그래밍 패턴과 훌륭한 클래스를 제공합니다. C와 유사한 구조 덕분에 다른 언어에서 전환하기도 용이합니다.

자바스크립트 실력 향상을 원하신다면, 다음 핵심 기능들을 배우고 연습하여 완벽하게 익히는 것을 추천합니다. 이러한 기능들이 모든 문제를 해결하는 데 반드시 필요한 것은 아니지만, 코드를 간결하게 만들고 효율성을 높이는 데 도움이 됩니다.

map() 함수

자바스크립트에서 중요한 함수를 논할 때 map()을 빼놓을 수 없습니다! map(), filter(), reduce()는 삼위일체를 이루며 개발 과정에서 계속해서 사용될 핵심 기능입니다. 이제 map()부터 차례대로 살펴보겠습니다.

map() 함수는 자바스크립트 학습자들이 가장 어려워하는 함수 중 하나입니다. 그 이유는 무엇일까요? 복잡해서가 아니라, 함수형 프로그래밍에서 아이디어를 가져왔기 때문입니다. 객체 지향 프로그래밍에 익숙한 우리는 함수형 프로그래밍 개념에 낯설 수 있으며, 이는 map() 함수의 작동 방식을 이해하는 데 어려움을 줄 수 있습니다.

자바스크립트는 객체 지향적인 면모와 함께 함수형 프로그래밍의 특징도 지니고 있습니다. 최신 버전에서는 이러한 특징을 숨기려고 노력하지만, 언젠가 자세히 다뤄볼 주제입니다. 이제 map() 함수에 대해 알아보겠습니다.

map() 함수는 매우 간단합니다. 배열에 연결되어 각 요소를 다른 형태로 변환한 새 배열을 생성하는 데 사용됩니다. 각 항목을 어떻게 변환할지는 익명 함수로 제공됩니다.

이것이 전부입니다! 구문에 익숙해지는 데 시간이 걸릴 수 있지만, map() 함수는 근본적으로 이러한 작업을 수행합니다. map() 함수를 사용하는 이유는 무엇일까요? 이는 달성하려는 목표에 따라 다릅니다. 예를 들어, 지난주 각 요일의 온도를 기록하여 간단한 배열에 저장했다고 가정해 보겠습니다. 그런데, 온도계가 1.5도 낮게 측정되었다는 사실을 알게 되었습니다.

이러한 수정 작업은 다음과 같이 map() 함수를 사용하여 수행할 수 있습니다.

const weeklyReadings = [20, 22, 20.5, 19, 21, 21.5, 23];

const correctedWeeklyReadings = weeklyReadings.map(reading => reading + 1.5);

console.log(correctedWeeklyReadings); // gives [ 21.5, 23.5, 22, 20.5, 22.5, 23, 24.5 ]

실용적인 예로 React 개발에서 배열을 DOM 요소 목록으로 변환하는 경우가 있습니다. 아래와 같은 코드를 자주 볼 수 있습니다:

export default ({ products }) => {
    return products.map(product => {
        return (
            
                {product.name}
                {product.description}
            
        );
    });
};

위 코드는 product 목록을 props로 받아 HTML "div" 목록으로 변환하는 함수형 React 컴포넌트입니다. map() 함수는 기존 제품 객체를 변경하지 않고 HTML로 변환합니다.

map() 함수는 for 루프의 단순화된 형태라고 주장할 수도 있습니다. 객체 지향적인 사고방식에서는 그렇게 생각할 수 있지만, 이러한 함수들은 간결하고 우아한 함수형 프로그래밍에서 비롯되었습니다. 😊

filter() 함수

filter() 함수는 다양한 상황에서 반복적으로 사용할 수 있는 매우 유용한 기능입니다. 이름에서 알 수 있듯이, 특정 규칙 또는 로직에 따라 배열을 필터링하고 해당 규칙을 만족하는 요소로 구성된 새 배열을 반환합니다.

날씨 예제를 다시 사용해 보겠습니다. 지난주 각 요일의 최고 기온이 저장된 배열이 있다고 가정합니다. 이제 기온이 20도 미만인 추운 날이 며칠이었는지 확인하고 싶습니다. filter() 함수를 사용하면 다음과 같이 쉽게 해결할 수 있습니다.

const weeklyReadings = [20, 22, 20.5, 19, 21, 21.5, 23];

const colderDays = weeklyReadings.filter(dayTemperature => {
    return dayTemperature < 20;
});

console.log("Total colder days in week were: " + colderDays.length); // 1

filter() 함수에 전달되는 익명 함수는 true 또는 false의 부울 값을 반환해야 합니다. 이 값을 통해 filter() 함수는 필터링된 배열에 해당 요소를 포함할지 여부를 결정합니다. 익명 함수 내에 복잡한 로직을 자유롭게 작성할 수 있습니다. API를 호출하거나 사용자 입력을 읽는 등의 작업을 수행할 수 있지만, 최종적으로 부울 값을 반환해야 합니다.

참고: 자바스크립트 개발 경험에 비추어볼 때, 프로그래머들이 filter() 함수를 사용할 때 미묘한 버그를 자주 만드는 것을 목격했습니다. 아래 예시를 통해 이러한 버그가 어떻게 발생하는지 살펴보겠습니다.

const weeklyReadings = [20, 22, 20.5, 19, 21, 21.5, 23];

const colderDays = weeklyReadings.filter(dayTemperature => {
    return dayTemperature < 20;
});

if(colderDays) {
    console.log("Yes, there were colder days last week");
} else {
    console.log("No, there were no colder days");
}

위 코드에서 if 조건은 배열인 colderDays 자체를 확인하고 있습니다! 마감일에 쫓기거나 서둘러 코드를 작성할 때 이러한 실수를 저지르는 경우가 많습니다. 자바스크립트의 특이하고 일관성 없는 특성 중 하나가 "진실성"입니다. 빈 배열은 if 조건 내에서 true로 평가됩니다. 즉, 위 코드에서는 지난주에 추운 날이 없었음에도 "추운 날이 있었다"는 메시지를 출력할 수 있습니다.

이러한 버그는 colderDays.length를 확인하는 방식으로 간단하게 수정할 수 있습니다. length 속성은 0 이상의 정수 값을 제공하므로 논리적 비교에서 일관되게 작동합니다. filter() 함수는 항상 비어 있거나 비어 있지 않은 배열을 반환하므로, 이 점을 활용하여 안전하게 논리적 비교를 수행할 수 있습니다.

필요 이상으로 길어졌지만, 이러한 종류의 버그는 강조할 가치가 있습니다. 여러분이 이러한 함정에 빠지지 않고 디버깅 시간을 절약할 수 있기를 바랍니다! 😊

reduce() 함수

자바스크립트 표준 라이브러리에서 가장 난해한 함수를 꼽으라면 reduce() 함수를 빼놓을 수 없습니다. reduce() 함수는 매우 강력하고 유용하지만, 많은 자바스크립트 개발자들이 사용하는 것을 꺼리며, 더 장황한 코드를 선호합니다.

솔직히 말해서, reduce() 함수는 개념과 실행 측면에서 이해하기 어렵습니다. 설명을 읽어도 제대로 이해했는지 의심이 들고, 작동 방식을 시각화하려고 하면 머리가 복잡해집니다! 🤭

하지만 너무 걱정하지 마세요. reduce() 함수는 B+ 트리와 같은 복잡한 알고리즘이 아닙니다. 이러한 종류의 논리는 일반적인 프로그래머의 업무에서는 거의 발생하지 않습니다.

이제 여러분을 겁주려다가 곧바로 걱정하지 말라고 말하는 이 상황이 어색하지만, reduce() 함수의 역할과 필요성을 설명해 드리겠습니다.

이름에서 알 수 있듯이, reduce() 함수는 무언가를 "줄이는" 데 사용됩니다. 여기서 줄이는 대상은 배열이며, 주어진 배열을 단일 값(숫자, 문자열, 함수, 객체 등)으로 변환합니다. 쉽게 말해, reduce() 함수는 배열을 하나의 값으로 압축하는 것입니다. reduce() 함수의 반환 값은 배열이 아니며, map() 또는 filter() 함수와는 다릅니다. 이 점을 이해했다면 이미 반은 성공한 것입니다. 😊

배열을 변환하려면 필요한 로직을 제공해야 합니다. 자바스크립트 개발 경험이 있는 분들은 이미 함수를 사용해서 이 작업을 수행한다는 것을 짐작하셨을 겁니다. 이 함수를 리듀서 함수라고 하며, reduce() 함수의 첫 번째 인수로 사용됩니다. 두 번째 인수는 숫자, 문자열 등의 초기값입니다.

지금까지의 내용을 바탕으로, reduce() 함수 호출은 array.reduce(reducerFunction, startingValue)와 같다고 말할 수 있습니다. 이제 reduce() 함수에서 가장 중요한 역할을 하는 리듀서 함수에 대해 알아보겠습니다. 리듀서 함수는 배열을 단일 값으로 변환하는 방법을 reduce() 함수에 알려주는 역할을 합니다. 리듀서 함수는 누산기(accumulator)와 현재 값(current value)이라는 두 개의 인수를 필요로 합니다.

이해하기 어렵다는 것을 알고 있습니다... reduce() 함수는 자바스크립트에서 선택사항인 함수 중에서도 가장 많은 용어가 사용되는 함수입니다. 😝 이것이 사람들이 reduce() 함수를 꺼리는 이유이기도 합니다. 하지만 단계별로 배우면 이해할 뿐만 아니라 더 나은 개발자가 될 수 있습니다.

이제 원래 주제로 돌아가겠습니다. reduce() 함수에 전달되는 "시작 값"은 계산의 시작 값입니다. 예를 들어 리듀서 함수에서 곱셈을 수행하려는 경우 시작 값으로 1을 사용해야 합니다. 덧셈을 수행하려는 경우 시작 값으로 0을 사용할 수 있습니다.

이제 리듀서 함수의 형태를 살펴보겠습니다. reduce() 함수에 전달되는 리듀서 함수는 reducerFunction(accumulator, currentValue)와 같은 형식을 가집니다. "누산기"는 계산 결과를 수집하고 저장하는 변수입니다. 예를 들어, 배열의 모든 항목을 더하기 위해 total 변수를 사용하는 것과 같습니다. 리듀서 함수는 초기 누산기 값을 사용하여 배열의 요소를 하나씩 방문하고, 계산을 수행하고, 그 결과를 누산기에 저장합니다.

리듀서 함수의 "현재 값"은 무엇일까요? 배열을 반복하는 동안 특정 요소에서 멈추면 해당 요소의 값을 나타내는 변수가 "현재 값"입니다. 쉽게 말해, 현재 처리 중인 배열 항목의 값이라고 생각하면 됩니다.

이제 간단한 예제를 통해 이러한 개념들이 실제 reduce() 함수 호출에서 어떻게 결합되는지 알아보겠습니다. 1부터 n까지의 자연수를 포함하는 배열이 있고, n의 계승을 구하고 싶다고 가정해 봅시다. n의 계승은 모든 숫자를 곱하는 것입니다. 다음과 같이 구현할 수 있습니다.

const numbers = [1, 2, 3, 4, 5];
const factorial = numbers.reduce((acc, item) => acc * item, 1);
console.log(factorial); // 120

이 간단한 세 줄의 코드에는 많은 작업이 숨겨져 있습니다. 지금까지 설명한 내용을 바탕으로 하나씩 살펴보겠습니다. numbers는 곱하려는 모든 숫자를 담고 있는 배열입니다. numbers.reduce() 호출을 보면 acc의 시작 값이 1이어야 함을 알 수 있습니다. (곱셈에 영향을 주지 않기 때문입니다). 리듀서 함수 `(acc, item) => acc * item`을 살펴보면 배열의 각 반복에서 반환되는 값은 누산기 값에 현재 요소를 곱한 값입니다. 곱셈을 반복하고 결과를 누산기에 저장하는 것은 reduce() 함수의 내부에서 발생하며, 이것이 바로 reduce() 함수가 자바스크립트 개발자들에게 어렵게 느껴지는 이유 중 하나입니다.

왜 reduce() 함수를 사용해야 할까요?

좋은 질문입니다. 솔직히 말해서, 명확한 답은 없습니다. reduce() 함수가 하는 모든 작업은 루프, forEach() 등을 사용하여 수행할 수 있습니다. 하지만 이러한 방법들은 코드를 더 길게 만들고, 특히 서두르는 상황에서는 코드를 읽기 어렵게 만들 수 있습니다. 또한 불변성에 대한 고려도 필요합니다. reduce()와 같은 함수를 사용하면 기존 데이터를 변경하지 않고 새 데이터를 만들 수 있으며, 이는 분산 애플리케이션에서 버그를 줄이는 데 도움이 됩니다.

reduce() 함수는 누산기가 객체, 배열, 또는 필요한 경우 함수가 될 수 있다는 점에서 매우 유연합니다. 초기값과 함수 호출의 다른 부분도 마찬가지입니다. 다양한 데이터를 다룰 수 있으므로 재사용 가능한 코드를 설계하는 데 유용합니다.

여전히 reduce() 함수가 어렵게 느껴진다면 괜찮습니다. 자바스크립트 커뮤니티에서도 reduce() 함수의 "간결함", "우아함", "강력함"에 대한 의견이 분분하므로, 사용하지 않아도 괜찮습니다. 😊 하지만 reduce() 함수를 사용하기 전에 몇 가지 예시를 확인해 보세요.

some() 함수

객체 배열이 있고, 각 객체가 사람을 나타낸다고 가정해 보겠습니다. 배열에 35세 이상인 사람이 한 명이라도 있는지 확인하고 싶습니다. 이러한 사람의 수를 계산할 필요는 없습니다. "하나 이상" 또는 "적어도 하나"인지만 확인하면 됩니다.

어떻게 해야 할까요?

다음과 같이 플래그 변수를 만들고 배열을 반복하여 해결할 수 있습니다.

const persons = [
    {
        name: 'Person 1',
        age: 32
    },
    
    {
        name: 'Person 2',
        age: 40
    },
];

let foundOver35 = false;

for (let i = 0; i < persons.length; i ++) {
    if(persons[i].age > 35) {
        foundOver35 = true;
        break;
    }
}

if(foundOver35) {
    console.log("Yup, there are a few people here!")
}

문제가 있을까요? 코드가 C나 Java와 너무 비슷하게 느껴집니다. "장황하다"라는 단어가 떠오릅니다. 숙련된 자바스크립트 개발자라면 "못생겼다"거나 "끔찍하다"고 생각할 수도 있습니다. 😝 그리고 그들의 생각이 옳을 수 있습니다. 이 코드를 개선하는 한 가지 방법은 map() 함수를 사용하는 것이지만, 그 방법도 그다지 좋지는 않습니다.

자바스크립트에는 some()이라는 훌륭한 함수가 있습니다. 이 함수는 배열을 처리하고, 사용자 정의 "필터링" 함수를 사용하여 true 또는 false의 부울 값을 반환합니다. 이는 지난 몇 분 동안 우리가 하려고 했던 작업을 매우 간결하고 우아하게 수행합니다. 사용 방법은 다음과 같습니다:

const persons = [
    {
        name: 'Person 1',
        age: 32
    },
    
    {
        name: 'Person 2',
        age: 40
    },
];

if(persons.some(person => {
    return person.age > 35
})) {
    console.log("Found some people!")
}

이전과 동일한 입력과 결과를 얻었지만 코드의 양이 크게 줄었습니다! 또한 코드를 한 줄씩 분석할 필요가 없어 인지 부담이 줄었습니다. 코드가 거의 자연어처럼 읽힙니다.

every() 함수

some() 함수와 마찬가지로 every()라는 유용한 함수도 있습니다. 이름에서 알 수 있듯이, 이 함수는 배열의 모든 항목이 주어진 조건을 만족하는지 여부에 따라 true 또는 false의 부울 값을 반환합니다. 물론, 조건을 확인하는 함수는 대부분 익명 함수로 제공됩니다. 순진한 코드가 어떻게 생겼는지에 대한 고통을 덜어드리겠습니다. every() 함수는 다음과 같이 사용됩니다.

const entries = [
    {
        id: 1
    },
    
    {
        id: 2
    },
    
    {
        id: 3  
    },
];

if(entries.every(entry => {
    return Number.isInteger(entry.id) && entry.id > 0;
})) {
    console.log("All the entries have a valid id")
}

이 코드는 유효한 id 속성에 대해 배열의 모든 객체를 확인합니다. "유효하다"는 정의는 상황에 따라 다르지만, 위 코드에서는 0보다 큰 정수로 간주했습니다. 다시 한번, 코드가 얼마나 간단하고 우아한지 알 수 있습니다. 이것이 이 함수(및 유사한 함수)의 유일한 목표입니다.

includes() 함수

하위 문자열 또는 배열 요소가 있는지 어떻게 확인할 수 있을까요? 아마도 여러분은 indexOf()를 사용한 다음, 문서에서 가능한 반환 값을 찾아보려고 할 것입니다. 불편하고 반환 값을 기억하기가 어렵습니다. (빠르게, 운영 체제에 2를 반환하는 프로세스는 무엇을 의미합니까?).

다행히 includes()라는 좋은 대안이 있습니다. 사용법은 이름만큼 간단하고 결과 코드는 매우 이해하기 쉽습니다. includes() 함수는 대소문자를 구분한다는 점에 유의해야 하지만, 우리는 직관적으로 그렇게 생각하는 것 같습니다. 이제 코드를 작성할 시간입니다!

const numbers = [1, 2, 3, 4, 5];
console.log(numbers.includes(4));
const name = "Ankush";
console.log(name.includes('ank')); // false, because first letter is in small caps
console.log(name.includes('Ank')); // true, as expected

하지만 이 함수에 너무 많은 것을 기대하지 마세요.

const user = {a: 10, b: 20};
console.log(user.includes('a')); // blows up, as objects don't have a "includes" method

includes() 함수는 객체 내부에 정의되지 않았으므로 객체 내부를 볼 수 없습니다. 하지만 배열에서 작동한다는 것을 알고 있으므로 약간의 속임수를 쓸 수 있습니다. 🤔

const persons = [{name: 'Phil'}, {name: 'Jane'}];
persons.includes({name: 'Phil'});

이 코드를 실행하면 어떻게 될까요? 오류가 발생하지는 않지만, 출력은 실망스럽게도 false입니다. 😫😫 이는 객체, 포인터, 자바스크립트가 메모리를 관리하는 방식과 관련이 있습니다. 더 자세히 알고 싶다면 여기를 참조하세요. 여기서는 더 이상 자세히 다루지 않겠습니다.

위의 코드를 다음과 같이 다시 작성하면 작동하게 만들 수 있습니다.

const phil = {name: 'Phil'};
const persons = [phil, {name: 'Jane'}];
persons.includes(phil); // true

이렇게 하면 객체에 대해서도 includes() 함수를 사용할 수 있지만, 더 이상 깔끔하지 않습니다. 😄

slice() 함수

문자열이 있고, "r"로 시작하고 "z"로 끝나는 문자열의 일부를 반환해야 한다고 가정해 보겠습니다. 어떻게 접근하시겠습니까? 아마도 새 문자열을 만들고, 필요한 모든 문자를 저장하고, 반환할 수 있을 것입니다. 또는 대부분의 프로그래머처럼 하위 문자열의 시작과 끝을 나타내는 두 개의 배열 인덱스를 제공할 것입니다.

이 두 가지 방법 모두 괜찮지만, 이러한 상황에서 slice()라는 개념이 유용한 해결책을 제공합니다. 다행히 따라야 할 복잡한 이론은 없습니다. slice()는 문자열/배열에서 더 작은 문자열/배열을 만드는 데 사용됩니다. 간단한 예를 통해 살펴보겠습니다.

const headline = "And in tonight's special, the guest we've all been waiting for!";
const startIndex = headline.indexOf('guest');
const endIndex = headline.indexOf('waiting');
const newHeadline = headline.slice(startIndex, endIndex);
console.log(newHeadline); // guest we've all been

slice() 함수에 두 개의 인덱스를 제공합니다. 하나는 슬라이싱을 시작할 인덱스이고, 다른 하나는 슬라이싱을 중지할 인덱스입니다. slice() 함수의 문제점은 최종 결과에 끝 인덱스가 포함되지 않는다는 것입니다. 위의 코드에서 "waiting"이라는 단어가 누락된 이유가 바로 이것입니다.

슬라이싱과 같은 개념은 다른 언어, 특히 파이썬에서 더 두드러집니다. 이 기능을 사용해 본 개발자들은 이 기능 없이 살 수 없다고 말할 것입니다. 슬라이싱에 대한 구문이 깔끔하기 때문입니다.

슬라이싱은 깔끔하고 편리하며, 사용하지 않을 이유가 없습니다. 또한 원래 배열/문자열의 얕은 복사본을 생성하므로 성능 저하가 발생하는 기능도 아닙니다. 자바스크립트 개발자라면 slice() 함수에 익숙해지고, 자주 사용하는 것이 좋습니다!

splice() 함수

splice() 함수는 slice() 함수와 비슷한 기능을 제공하지만, 한 가지 중요한 차이점이 있습니다. splice() 함수는 요소를 제거, 변경 또는 추가할 수 있지만, 원래 배열을 수정합니다. 원래 배열을 수정하면 주의하지 않거나 복사본 및 참조를 이해하지 못할 경우 큰 문제를 일으킬 수 있습니다. 왜 개발자들이 slice() 함수와 동일한 접근 방식을 사용하지 않고 원래 배열을 그대로 두지 않는지 궁금할 수도 있지만, 자바스크립트는 단 10일 만에 만들어진 언어이므로 조금 관대하게 생각할 수도 있습니다.

불만을 뒤로하고, splice() 함수의 작동 방식을 살펴보겠습니다. 배열에서 몇 가지 요소를 제거하는 예제를 보여드리겠습니다. 이것이 splice() 함수에서 가장 많이 사용되는 용도이기 때문입니다. 덧셈 및 삽입 예제는 쉽게 찾아볼 수 있고 간단하므로 생략하겠습니다.

const items = ['eggs', 'milk', 'cheese', 'bread', 'butter'];
items.splice(2, 1);
console.log(items); // [ 'eggs', 'milk', 'bread', 'butter' ]

위의 splice() 함수 호출은 배열의 인덱스 2(즉, 세 번째 위치)에서 시작하여 하나의 항목을 제거한다고 말합니다. 주어진 배열에서 'cheese'는 세 번째 항목이므로, 배열에서 제거되고 배열의 길이가 줄어듭니다. 제거된 항목은 splice() 함수에 의해 배열로 반환되므로, 필요한 경우 'cheese'를 변수에 저장할 수 있습니다.

제 경험상 indexOf()와 splice() 함수는 시너지 효과가 뛰어납니다. 항목의 인덱스를 찾은 다음, 지정된 배열에서 해당 항목을 제거할 수 있습니다. 하지만 항상 가장 효율적인 방법은 아니며, 객체(해시 맵에 해당)의 키를 사용하는 것이 더 빠를 때도 있습니다.

shift() 함수

shift() 함수는 배열의 첫 번째 요소를 제거하는 데 사용됩니다. splice() 함수로도 같은 작업을 수행할 수 있지만, shift() 함수는 첫 번째 요소를 잘라내기만 하면 되므로 기억하기 쉽고 직관적입니다.

const items = ['eggs', 'milk', 'cheese', 'bread', 'butter'];
items.shift()
console.log(items); // [ 'milk', 'cheese', 'bread', 'butter' ]

unshift() 함수

shift() 함수가 배열에서 첫 번째 요소를 제거하는 것처럼, unshift() 함수는 배열의 시작 부분에 새 요소를 추가합니다. 사용법은 간단하고 간결합니다.

const items = ['eggs', 'milk'];
items.unshift('bread')
console.log(items); // [ 'bread', 'eggs', 'milk' ]

하지만 push() 및 pop() 함수와 달리 shift() 및 unshift() 함수는 비효율적입니다(기본 알고리즘 작동 방식 때문에). 따라서 대규모 배열(예: 2000개 이상의 항목)을 사용하는 경우, 이러한 함수 호출이 너무 많으면 애플리케이션 속도가 느려질 수 있습니다.

fill() 함수

때로는 여러 항목을 하나의 값으로 변경하거나 전체 배열을 "재설정"해야 할 때가 있습니다. 이러한 상황에서 fill() 함수는 루프 및 off-by-one 오류를 방지합니다. 배열의 일부 또는 전체를 주어진 값으로 대체하는 데 사용할 수 있습니다. 몇 가지 예시를 살펴보겠습니다.

const heights = [1, 2, 4, 5, 6, 7, 1, 1];
heights.fill(0);
console.log(heights); // [0, 0, 0, 0, 0, 0, 0, 0]

const heights2 = [1, 2, 4, 5, 6, 7, 1, 1];
heights2.fill(0, 4);
console.log(heights2); // [1, 2, 4, 5, 0, 0, 0, 0]

기타 유용한 함수

위에서 언급한 함수들은 대부분의 자바스크립트 개발자가 업무에서 자주 접하게 될 함수들이지만, 이 목록이 완전한 것은 아닙니다. 자바스크립트에는 사소하지만 유용한 기능(메서드)이 훨씬 더 많기 때문에, 단 하나의 문서에서 모두 다룰 수는 없습니다. 몇 가지 예시를 소개하자면 다음과 같습니다.

reverse()
sort()
entries()
fill()
find()
flat()

이러한 함수들을 찾아보고, 사용법을 익히는 것이 좋습니다.

결론

자바스크립트는 배워야 할 핵심 개념이 적지만, 크기가 큰 언어입니다. 다양한 기능(메서드)이 많기 때문입니다. 자바스크립트는 대부분의 개발자들에게 보조 언어이기 때문에 자바스크립트의 장점과 유용한 기능을 제대로 활용하지 못하는 경우가 많습니다. 함수형 프로그래밍도 마찬가지인데, 이것은 다음에 다룰 주제입니다! 😅

시간을 내서 핵심 언어(및 Lodash와 같은 유틸리티 라이브러리)를 탐색해 보세요. 이러한 노력을 조금만 투자해도 생산성을 높이고, 깨끗하고 간결한 코드를 작성할 수 있습니다.