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

by

똑똑한 코드! 언어에서 가장 중요하고 반복되는 기능을 마스터하여 더 빠르고 생산적이며 행복한 JavaScript 개발자가 되십시오.

백엔드든 프런트엔드든(또는 우주선), JavaScript는 어디에나 있습니다. 또한 매우 유연한 언어(강력한 기능적 프로그래밍 패턴과 우수한 클래스가 있음을 의미)이며 다른 “C와 유사한” 언어와의 유사성으로 인해 개발자가 다른 언어에서 쉽게 전환할 수 있습니다.

원한다면 JS 게임 레벨 업, 나는 당신이 언어에서 사용할 수 있는 다음 핵심 기능에 대해 배우고, 연습하고, 궁극적으로 마스터할 것을 제안합니다. 이 모든 것이 문제를 해결하는 데 엄격하게 “필요”한 것은 아니지만 어떤 경우에는 많은 작업을 수행할 수 있는 반면 다른 경우에는 작성해야 하는 코드의 양을 줄일 수 있습니다.

지도()

map()을 언급하지 않고 중요한 JavaScript 함수에 대한 기사를 작성하는 것은 이단입니다! 😆😆 filter() 및 reduce()와 함께 map()은 삼위일체를 형성합니다. 이들은 경력에서 계속해서 사용하게 될 기능이므로 살펴볼 가치가 있습니다. map()부터 시작하여 하나씩 다루겠습니다.

map()은 JavaScript를 배우는 사람들에게 가장 많은 어려움을 주는 함수 중 하나입니다. 왜요? 본질적으로 복잡한 것이 있기 때문이 아니라 이 함수가 작동하는 방식이 함수형 프로그래밍이라는 것에서 가져온 아이디어이기 때문입니다. 그리고 우리는 기능적 프로그래밍에 노출되지 않았기 때문에(우리 학교와 업계는 객체 지향 언어로 가득 차 있습니다) 우리의 편향된 두뇌에 작동이 이상하거나 심지어 잘못된 것처럼 보입니다.

JavaScript는 개체 지향보다 훨씬 더 기능적이지만 최신 버전은 이 사실을 숨기기 위해 최선을 다하고 있습니다. 그러나 그것은 아마도 다른 날에 열 수 있는 벌레 통조림입니다. 🤣 자, 그럼 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 ]

매우 실용적인 또 다른 예는 배열에서 DOM 요소 목록을 만드는 것이 일반적인 패턴인 React의 세계에서 나옵니다. 따라서 다음과 같은 것이 일반적입니다.

export default ({ products }) => {
    return products.map(product => {
        return (
            <div className="product" key={product.id}>
                <div className="p-name">{product.name}</div>
                <div className="p-desc">{product.description}</div>
            </div>
        );
    });
};

여기에 제품 목록을 소품으로 받는 기능적 React 구성 요소가 있습니다. 이 목록(배열)에서 HTML “div” 목록을 작성하여 기본적으로 모든 제품 개체를 HTML로 변환합니다. 원래 제품 개체는 그대로 유지됩니다.

당신은 map()이 미화된 for 루프일 뿐이며 당신이 완전히 옳다고 주장할 수 있습니다. 그러나 이러한 주장을 하자마자 말하고 있는 것은 객체 지향 훈련된 마음이지만 이러한 기능과 그 근거는 균일성, 간결함 및 우아함이 매우 존경받는 기능적 프로그래밍에서 나옵니다. 🙂

필터()

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를 호출하고 사용자 입력을 읽는 등의 작업을 수행할 수 있습니다. 단, 결국에는 부울 값을 반환해야 합니다.

주의: 이것은 JavaScript 개발자로서의 경험을 바탕으로 제공해야 한다고 느끼는 부수적인 참고 사항입니다. 엉성함 때문이든 잘못된 기본 때문이든 많은 프로그래머는 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를 확인합니다! (어떤 이유로든) 기진맥진한 상태에서 마감일을 맞추거나 코드를 작성하기 위해 경쟁하면서 사람들이 얼마나 많이 이런 실수를 하는지 놀라게 될 것입니다. 이 조건의 문제는 JavaScript가 여러 면에서 이상하고 일관성이 없는 언어이며 사물의 “진실성”이 그중 하나라는 것입니다. 하는 동안 [] == true는 false를 반환하므로 위의 코드가 깨지지 않았다고 생각할 수 있습니다. 현실은 if 조건 내부에서 [] 참으로 평가합니다! 즉, 우리가 작성한 코드는 지난 주에 더 추운 날이 없었다고 말하지 않을 것입니다.

  Instagram에서 더 많은 팔로워를 얻는 방법

수정은 위의 코드 앞의 코드에서와 같이 매우 간단합니다. 우리는 colderDays.length를 확인합니다. 이는 정수(0 이상)를 제공하므로 논리적 비교에서 일관되게 작동합니다. filter()는 항상 항상 비어 있거나 비어 있지 않은 배열을 반환하므로 이에 의존하고 자신 있게 논리적 비교를 작성할 수 있습니다.

내가 계획했던 것보다 더 긴 우회길이었지만 이와 같은 버그는 만 단어로 강조할 가치가 있으며 필요한 경우 모두 대문자입니다. 나는 당신이 이것에 물리지 않고 수백 시간의 디버깅 노력을 절약하기를 바랍니다! 🙂

줄이다()

이 글과 표준 자바스크립트 라이브러리에 있는 모든 함수 중에서 reduce()는 “혼란스럽고 기이한” 왕관의 선두주자 중 하나입니다. 이 기능은 매우 중요하고 많은 상황에서 우아한 코드를 생성하지만 대부분의 JavaScript 개발자는 이 기능을 피하며 대신 더 장황한 코드를 작성하는 것을 선호합니다.

그 이유는 – 솔직히 말씀드리겠습니다! — reduce()는 개념과 실행 측면에서 이해하기 어렵습니다. 설명을 읽을 때 여러 번 다시 읽었지만 여전히 잘못 읽었는지 스스로 의심합니다. 실제로 작동하는 것을 보고 작동 방식을 시각화하려고 하면 뇌가 1000개의 매듭으로 꼬이게 됩니다! 🤭

이제 겁먹지 마세요. reduce() 함수는 복잡하고 위협적인 면에서 다음과 같은 것이 아닙니다. B+ 트리 그리고 그들의 알고리즘. 이런 종류의 논리는 일반 프로그래머의 일상 업무 중에 거의 발생하지 않습니다.

그래서 당신을 겁먹게 한 다음 즉시 걱정하지 말라고 말하면서 마침내 이 기능이 무엇인지 그리고 정확히 왜 우리에게 필요한지 보여주고 싶습니다.

이름에서 알 수 있듯이 reduce()는 무언가를 줄이는 데 사용됩니다. 감소시키는 것은 배열이고 주어진 배열을 감소시키는 것은 단일 값(숫자, 문자열, 함수, 객체 등)입니다. 여기에 더 간단한 방법이 있습니다. reduce()는 배열을 단일 값으로 변환합니다. reduce()의 반환 값은 배열이 아니며 map() 및 filter()의 경우입니다. 이 정도만 이해하면 이미 반은 성공한 것입니다. 🙂

이제 배열을 변환(축소)하려면 필요한 논리를 제공해야 합니다. 그리고 JS 개발자로서의 경험을 바탕으로 우리가 함수를 사용하여 그렇게 한다는 것을 이미 짐작했을 것입니다. 이 함수는 reduce()의 첫 번째 인수를 구성하는 reducer 함수라고 합니다. 두 번째 인수는 숫자, 문자열 등과 같은 시작 값입니다(이 “시작 값”이 무엇인지 잠시 후에 설명하겠습니다).

지금까지의 이해를 바탕으로 reduce() 호출은 다음과 같다고 말할 수 있습니다. array.reduce(reducerFunction, startingValue). 이제 모든 것의 핵심인 감속기 기능을 다루겠습니다. 이미 설정한 대로 reducer 함수는 배열을 단일 값으로 변환하는 방법을 reduce()에 알려주는 것입니다. 두 가지 인수가 필요합니다. 누산기 역할을 하는 변수(걱정하지 마세요. 이 부분도 설명하겠습니다) 및 현재 값을 저장하는 변수입니다.

내가 알지 . . . 그것은 JavaScript에서 필수가 아닌 단일 기능에 대한 많은 용어였습니다. 😝😝 이것이 사람들이 reduce()를 피하는 이유입니다. 하지만 단계별로 배우면 이해할 뿐만 아니라 더 나은 개발자가 되어 감사하게 생각할 것입니다.

자, 당면한 주제로 돌아갑니다. reduce()에 전달되는 “시작 값”은 . . . 사용하려는 계산의 시작 값입니다. 예를 들어 감속기 함수에서 곱셈을 수행하려는 경우 시작 값 1이 의미가 있습니다. 더하기 위해 0으로 시작할 수 있습니다.

이제 reducer 함수의 서명을 살펴보겠습니다. reduce()에 전달되는 감속기 함수는 다음과 같은 형식을 갖습니다: reducerFunction(accumulator, currentValue). “Accumulator”는 계산 결과를 수집하고 보유하는 변수의 멋진 이름입니다. total += arr과 같은 것을 사용하여 배열의 모든 항목을 합산하기 위해 total이라는 변수를 사용하는 것과 정확히 같습니다.[i]. 이것이 바로 reduce()의 리듀서 함수가 적용되는 방식입니다. 누산기는 초기에 사용자가 제공한 시작 값으로 설정되고 배열의 요소를 하나씩 방문하고 계산이 수행되며 결과가 저장됩니다. 누산기 등. . .

그렇다면 감속기 함수에서 이 “현재 값”은 무엇입니까? 배열을 순회하도록 요청하는 경우 정신적으로 상상하는 것과 동일한 아이디어입니다. 변수를 인덱스 0에서 시작하여 한 번에 한 단계씩 앞으로 이동합니다. 이 작업을 수행하는 동안 갑자기 중지하도록 요청하면 배열의 요소 중 하나에 있는 자신을 발견하게 될 것입니다. 이것이 현재 값의 의미입니다. 현재 고려 중인 배열 항목을 나타내는 데 사용되는 변수의 값입니다(도움이 된다면 배열을 반복하는 것을 생각해 보십시오).

이제 간단한 예제를 보고 이 모든 전문 용어가 실제 reduce() 호출에서 어떻게 결합되는지 확인할 때입니다. 처음 n 개의 자연수(1, 2, 3 . . . n)를 포함하는 배열이 있고 n의 계승을 찾는 데 관심이 있다고 가정해 보겠습니다. 우리는 n을 찾는다는 것을 압니다! 우리는 단순히 모든 것을 곱하면 다음과 같이 구현됩니다.

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

이 단 세 줄의 코드에서 많은 일이 진행되고 있으므로 지금까지 논의한 (매우 긴) 토론의 맥락에서 하나씩 풀어보겠습니다. 명백히 숫자는 우리가 곱하고자 하는 모든 숫자를 담고 있는 배열입니다. 다음으로 acc의 시작 값이 1이어야 한다고 말하는 numbers.reduce() 호출을 살펴보십시오(곱셈에 영향을 주거나 파괴하지 않기 때문입니다). 다음으로, 리듀서 함수 본문 `(acc, item) => acc * item을 확인하세요. 배열에 대한 각 반복의 반환 값은 누산기에 이미 있는 항목을 곱한 항목이어야 합니다. 곱셈을 반복하고 실제로 누산기에 명시적으로 저장하는 것은 배후에서 일어나는 일이며 reduce()가 JavaScript 개발자에게 걸림돌이 되는 가장 큰 이유 중 하나입니다.

reduce()를 사용하는 이유는 무엇입니까?

정말 좋은 질문이고 솔직히 말해서 확실한 답이 없습니다. reduce()가 수행하는 모든 작업은 루프, forEach() 등을 통해 수행할 수 있습니다. 그러나 이러한 기술은 훨씬 더 많은 코드를 생성하므로 특히 서두르는 경우 읽기가 어렵습니다. 그런 다음 불변성에 대한 우려가 있습니다. reduce() 및 유사한 기능을 사용하면 원래 데이터가 변경되지 않았는지 확인할 수 있습니다. 이것은 그 자체로 특히 분산 응용 프로그램에서 전체 종류의 버그를 제거합니다.

  미국 지역 이외의 지역에서 Apple TV 앱을 얻는 방법

마지막으로 reduce()는 누산기가 객체, 배열 또는 필요한 경우 함수가 될 수 있다는 점에서 훨씬 더 유연합니다. 시작 값과 함수 호출의 다른 부분도 마찬가지입니다. 거의 모든 것이 들어갈 수 있고 거의 모든 것이 나올 수 있으므로 재사용 가능한 코드를 설계하는 데 있어 극도의 유연성이 있습니다.

여전히 확신이 서지 않더라도 괜찮습니다. JavaScript 커뮤니티 자체는 reduce()의 “컴팩트함”, “우아함”, “파워”에 대해 첨예하게 나뉘므로 사용하지 않아도 괜찮습니다. 🙂 그러나 몇 가지를 확인하십시오. 깔끔한 예 bin reduce()를 결정하기 전에.

약간()

각 개체가 사람을 나타내는 개체 배열이 있다고 가정해 보겠습니다. 배열에 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와 비슷합니다. “Verbose”는 마음에 오는 또 다른 단어입니다. 숙련된 JS는 “못생긴”, “끔찍한” 등을 생각할 수 있습니다. 😝 그리고 당연히 그렇다고 주장합니다. 이 코드를 개선하는 한 가지 방법은 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!")
}

이전과 동일한 입력, 동일한 결과; 그러나 코드의 엄청난 감소를 주목하십시오! 또한 마치 우리 자신이 통역사인 것처럼 코드를 한 줄씩 파싱할 필요가 없기 때문에 인지 부담이 얼마나 크게 줄어드는지 주목하십시오! 코드는 이제 거의 자연어처럼 읽힙니다.

모든()

some()과 마찬가지로 every()라는 또 다른 유용한 함수가 있습니다. 지금까지 짐작할 수 있듯이 이 역시 배열의 모든 항목이 주어진 테스트를 통과하는지 여부에 따라 부울 값을 반환합니다. 물론 통과할 테스트는 대부분 익명 함수로 제공된다. 코드의 순진한 버전이 어떻게 생겼는지에 대한 고통을 덜어드리겠습니다. 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 속성에 대해 배열의 모든 개체를 확인합니다. “유효”의 정의는 문제 상황에 따라 다르지만 보시다시피 이 코드에서는 음수가 아닌 정수를 고려했습니다. 다시 한 번, 우리는 코드가 얼마나 간단하고 우아한지 알 수 있습니다. 이것이 이(및 유사한) 함수의 유일한 목표입니다.

포함()

하위 문자열과 배열 요소가 있는지 어떻게 확인합니까? 글쎄, 당신이 나와 같다면 indexOf()에 빠르게 도달한 다음 문서를 찾아 가능한 반환 값을 알 수 있습니다. 상당히 불편하고 반환 값을 기억하기 어렵습니다(빨리 — 운영 체제에 2를 반환하는 프로세스는 무엇을 의미합니까?).

하지만 우리가 사용할 수 있는 좋은 대안이 있습니다. 바로 includes()입니다. 사용법은 이름만큼 간단하고 결과 코드는 매우 마음이 따뜻해집니다. include()에 의해 일치가 수행된다는 점을 명심하십시오. 대소문자를 구분하지만 어쨌든 우리 모두 직관적으로 기대하는 것 같습니다. 이제 코드를 작성할 시간입니다!

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

단순히 개체에 대해 정의되지 않았기 때문에 개체 내부를 볼 수 없습니다. 하지만 배열에서 작동한다는 것을 알고 있으므로 여기에서 약간의 속임수를 쓸 수 있습니다. . . 🤔.

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

그렇다면 이 코드를 실행하면 어떻게 될까요? 폭발하지는 않지만 출력도 실망스럽습니다. false입니다. 😫😫 사실 이것은 객체, 포인터, JavaScript가 자체 세계인 메모리를 보고 관리하는 방법과 관련이 있습니다. 더 깊이 잠수하고 싶다면 자유롭게 뛰어드세요(어쩌면 여기), 하지만 여기서 멈추겠습니다.

위의 코드를 다음과 같이 다시 작성하면 동작하도록 만들 수 있지만 이 시점에서 제 생각에는 다소 농담이 됩니다.

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

그래도 객체에 대해 include()가 작동하도록 만들 수 있음을 보여주므로 완전한 재앙은 아니라고 생각합니다. 😄

일부분()

문자열이 있고 “r”로 시작하고 “z”로 끝나는 문자열의 일부를 반환하도록 요청한다고 가정합니다(실제 문자는 중요하지 않음). 어떻게 접근하시겠습니까? 아마도 새 문자열을 만들고 필요한 모든 문자를 저장하고 반환하는 데 사용할 수 있습니다. 또는 대부분의 프로그래머와 같은 경우 두 개의 배열 인덱스를 제공할 것입니다. 하나는 하위 문자열의 시작을 나타내고 다른 하나는 끝을 나타냅니다.

  Android에서 그룹 메시징을 수행하는 방법

이 두 접근 방식 모두 괜찮지만 이러한 상황에서 깔끔한 솔루션을 제공하는 슬라이싱이라는 개념이 있습니다. 고맙게도 따라야 할 난해한 이론은 없습니다. 슬라이싱은 정확하게 소리가 나는 것을 의미합니다. 우리가 과일 조각을 만드는 것처럼 주어진 문자열/배열에서 더 작은 문자열/배열을 만듭니다. 간단한 예를 통해 내가 의미하는 바를 살펴보겠습니다.

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()할 때 JavaScript에 두 개의 인덱스를 제공합니다. 하나는 슬라이싱을 시작하려는 인덱스이고 다른 하나는 슬라이싱을 중지하려는 인덱스입니다. 슬라이스()의 문제는 최종 결과에 끝 인덱스가 포함되지 않는다는 것입니다. 이것이 바로 위 코드의 새 헤드라인에서 “waiting”이라는 단어가 누락된 것을 볼 수 있는 이유입니다.

슬라이싱과 같은 개념은 다른 언어, 특히 Python에서 더 두드러집니다. 개발자에게 물어보면 이 기능이 없는 삶을 상상할 수 없다고 말할 것입니다. 언어가 슬라이싱을 위한 매우 깔끔한 구문을 제공할 때 그렇습니다.

슬라이싱은 깔끔하고 매우 편리하며 사용하지 않을 이유가 없습니다. 또한 원래 배열/문자열의 얕은 복사본을 생성하기 때문에 성능 저하로 가득 찬 구문 설탕이 아닙니다. JavaScript 개발자의 경우, 저는 slice()에 익숙해지고 이를 무기고에 추가할 것을 적극 권장합니다!

접착()

splice() 메서드는 slice()의 사촌처럼 들리며 어떤 면에서는 그렇다고 주장할 수 있습니다. 둘 다 원래 배열에서 새 배열/문자열을 생성하지만 작지만 중요한 한 가지 차이점이 있습니다. splice()는 요소를 제거, 변경 또는 추가하지만 원래 배열을 수정합니다. 원본 어레이의 이러한 “파괴”는 주의를 기울이지 않거나 전체 복사본 및 참조를 이해하지 못하는 경우 큰 문제를 일으킬 수 있습니다. 개발자가 슬라이스()와 동일한 접근 방식을 사용하지 못하게 하고 원래 배열을 그대로 두는 이유가 무엇인지 궁금합니다. 하지만 언어에 대해 더 관대할 수 있을 것 같습니다. 불과 열흘만에 만들어진.

내 불만에도 불구하고 splice()가 어떻게 작동하는지 살펴보겠습니다. 배열에서 몇 가지 요소를 제거하는 예를 보여드리겠습니다. 이것이 이 방법에 대해 찾을 수 있는 가장 일반적인 용도이기 때문입니다. 또한 덧셈과 삽입에 대한 예제는 쉽게 찾아볼 수 있고 간단하기 때문에 생략하겠습니다.

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

위의 splice()에 대한 호출은 배열의 인덱스 2(즉, 세 번째 위치)에서 시작하여 하나의 항목을 제거한다고 말합니다. 주어진 배열에서 ‘cheese’는 세 번째 항목이므로 예상대로 배열에서 제거되고 항목 배열이 짧아집니다. 그건 그렇고, 제거된 항목은 splice()에 의해 폼이나 배열로 반환되므로 원하는 경우 변수에 ‘치즈’를 캡처할 수 있습니다.

내 경험상 indexOf()와 splice()는 큰 시너지 효과가 있습니다. 항목의 인덱스를 찾은 다음 지정된 배열에서 제거합니다. 그러나 이것이 항상 가장 효율적인 방법은 아니며 종종 개체(해시 맵에 해당) 키를 사용하는 것이 훨씬 빠릅니다.

옮기다()

shift()는 편리한 정렬 방법이며 배열의 첫 번째 요소를 제거하는 데 사용됩니다. splice()에서도 같은 작업을 수행할 수 있지만 shift()는 첫 번째 요소를 잘라내기만 하면 되기 때문에 기억하기 쉽고 직관적입니다.

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

언시프트()

shift()가 배열에서 첫 번째 요소를 제거하는 것처럼 unshift()는 배열의 시작 부분에 새 요소를 추가합니다. 그것의 사용은 간단하고 컴팩트합니다:

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

즉, 인기 있는 push() 및 pop() 메서드와 달리 shift() 및 unshift()는 매우 비효율적입니다(기본 알고리즘이 작동하는 방식 때문에). 따라서 대규모 배열(예: 2000개 이상의 항목)에서 작업하는 경우 이러한 함수 호출이 너무 많으면 응용 프로그램이 중단될 수 있습니다.

채우다()

때로는 여러 항목을 단일 값으로 변경하거나 전체 배열을 “재설정”해야 하는 경우가 있습니다. 이러한 상황에서 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]

언급할 가치가 있는 기타 기능

위의 목록은 대부분의 JavaScript 개발자가 자신의 경력에서 접하고 사용하게 되는 목록이지만 완전한 것은 아닙니다. JavaScript에는 사소하지만 유용한 기능(메서드)이 훨씬 더 많기 때문에 단일 문서에서 모두 다룰 수는 없습니다. 즉, 마음에 오는 몇 가지 사항은 다음과 같습니다.

  • 뒤집다()
  • 종류()
  • 항목()
  • 채우다()
  • 찾기()
  • 평평한()

나는 당신이 이와 같은 편의가 존재한다는 것을 알 수 있도록 최소한 이것들을 찾아보기를 권장합니다.

결론

JavaScript는 배워야 할 핵심 개념의 수가 적음에도 불구하고 큰 언어입니다. 우리가 사용할 수 있는 많은 기능(방법)이 이 큰 크기의 대부분을 구성합니다. 그러나 JavaScript는 대부분의 개발자에게 보조 언어이기 때문에 충분히 깊이 파고들지 않고 JavaScript가 제공하는 아름답고 유용한 많은 기능을 놓치고 있습니다. 실제로 함수형 프로그래밍 개념도 마찬가지지만 이는 다른 날의 주제입니다! 😅

가능할 때마다 핵심 언어(및 가능하면 다음과 같은 유명한 유틸리티 라이브러리)를 탐색하는 데 시간을 할애하십시오. 로다시). 이러한 노력을 기울이는 데 몇 분만 투자해도 엄청난 생산성 향상과 훨씬 더 깨끗하고 간결한 코드를 얻을 수 있습니다.