해당 코드는 서적 “ 모던 자바스크립트 입문 기초 문법부터 ES6, 정규 표현식, 객체 지향 및 함수형 프로그래밍, HTTP, MVC, API 활용까지 “ 에서 기록됐으며, 개인적 정리 목적으로 사용해 재 가공했습니다.

해당코드는 "순열알고리즘 reduce splice 자바스크립트 입문" 라는 키워드 입력 후 검색합니다.

[여기서 잠깐!]

두 편의 글로 분할해 작성했습니다.
이번 글에서는 어떻게 순열이 구성이 됐고, 사용된 함수가 무엇인지 설명했습니다.

다음편 "[순열 알고리즘_코드_2/2] splice, reduce, forEach 함수를 이용한 순열 알고리즘 만들기"에서 실제적으로 코드와 코드 주석으로 작성과정을 설명하겠습니다.

목 차

  • 글을 작성하게 된 계기
  • 글을 통해 달성하는 목표
  • "결론" _순열 알고리즘 만드는 핵심
  • "결론" _순열 알고리즘 만드는 이해포인트
  • 순열 이란
  • 순열 알고리즘에서 함수 reduce와 forEach
    • (1) reduce와 forEach가 작동하는 원리
    • (2) reduce의 단일값(single value)
    • (3) reduce와 forEach의 관계

글을 작성하게 된 계기

순열 알고리즘을 작성하는 다양한 접근법이 있지만,
함수 spilice와 reduce, forEach을 통해 순열 알고리즘을 구현했다는 점이 ‘다르고’ 각 “함수특성을 정리” 할 수 있어 작성하게 됐습니다.

글을 통해 달성하는 목표

순열을 만드는 splice 함수를 이해하고 이를 돕는 splice, reduce와 forEach 특성을 이해합니다.

결론_순열 알고리즘을 만드는 핵심

Splice 함수가 새로운 순열을 만드는 핵심적인 역할 입니다
이 함수는 인자 세개를 받는데, 두번째 인자가 “0” 일 경우세번째 인자를 첫번째 인자 값 바로 앞에 넣습니다

[splice 함수는 두번째 인자가 “0”일 경우, 요소를 삽입할 수 있습니다, 삭제 기능도 있습니다.]

예를 들어 배열A는 a,b,c 다음과 같은 경우가 있습니다.

인덱스 0 - 값 a
인덱스 1 - 값 b
인덱스 2 - 값 c

이때, 호출된 splice 함수는 인자 (2,0,3)일 경우,

배열A는 다음처럼 변경이 됩니다.

인덱스 0 - 값 a
인덱스 1 - 값 b
인덱스 2 - 값 3
인덱스 3 - 값 c

기존 인덱스 2 바로 앞에 “3”이 추가가 됐기 때문에, ”c”는 3 때문에 인덱스 4로 밀려납니다.

결론_순열 알고리즘 만드는 이해포인트

splice()함수

splice함수는 세 개의 인자를 받는데, 그 중 두번째 인자가 “0”임으로 세번째 인자를 배열에 추가할 수 있습니다.
새번째 인자가 들어가는 위치는 첫번째 인자로 들어간 숫자, 즉 숫자가 가리키는 인덱스 바로 앞입니다.

forEach()함수

forEach는 splice에 추가 될 인자들을 공급?합니다(각각 순회합니다).
배열의 각각의 요소에 대해 콜백함수를 실행하는 것이 forEach의 역할입니다.

reduce()함수

reduce는 splice-forEach를 통해 만들어진 새로운 순열들을 초기값으로 받아 사용합니다.

splice-forEach를 한 사이클이라고 한다면, 
reduce는 이것을 총 3번의 루프를 돌아 단일값(single value)으로 만듭니다.

reduce의 콜백함수의 연산내용이 forEach이기 때문에, forEach가 반환한 결과값과 배열요소(1,2,3)로 단일값을 갖는 구조 입니다.

newlist=[ ]

newlist 변수가 매번 reduce 콜백함수가 배열요소 1,2,3을 순회할 마다 실행되면서 이전에 newlist를 빈 배열 [ ]로 초기화 합니다.

즉, reduce 콜백함수가 배열 요소 1을 실행한 결과와 배열 요소 2,3 각각의 결과값을 “구별(독립적이게)”되게 만든다.

다시 말해 다음의 3단계를 거치게 됩니다.

(A) 
배열 요소 1일 때, 
splice-forEach 가 돌고, (splice-forEach의) 결과 A를 반환합니다.

(B)
반환된 결과 A가 reduce 함수의 초깃값으로 설정됩니다.
배열 요소 2일 때,
splice-forEach 가 돌고 결과 B를 반환합니다.

(C)
반환된 결과 B가 reduce 함수의 초깃값으로 설정됩니다.
배열 요소 3일 때,
splice-forEach 가 돌고 결과 c를 반환합니다

reduce는 더 이상 순회할 배열 요소가 없다는 것을 알고 결과 c를 반환합니다.
우리가 얻는 최종 결괏값은 C 입니다.

순열 이란

(https://ko.wikipedia.org/wiki/%EC%88%98%ED%95%99)에서, 순열(順列, 문화어: 차례무이, 영어: permutation 퍼뮤테이션[*]) 또는 치환(置換)은 순서가 부여된 임의의 집합을 다른 순서로 뒤섞는 연산이다…중략…임의의 집합을 어떤 순열에 따라 뒤섞은 뒤 다른 어떤 순열에 따라 뒤섞은 결과는 새로운 어떤 순열에 따라 뒤섞은 결과와 같다. -위키백과 중-

Print_all_permutations_of_a_given_string_–_E_B_Software.png
출처 : http://www.eandbsoftware.org/print-all-permutations-of-a-given-string/

간략히 말해 ,해당 요소를 가지고 배열을 만드는데, 이때, 요소의 순서를 뒤섞어 만들어진 총 조합을 말합니다.

순열 알고리즘에서 함수 reduce와 forEach

(1) reduce와 forEach가 작동하는 원리

splice의 작동원리는 이미 위에서 다뤘습니다.

배열 A가 있고 그 안에 요소는 a,b,c,가 있다고 가정합니다.

reduce는 배열 A의 요소 a,b,c 각각에, reduce 함수 인자로 들어가는 콜백함수와 처리한 결과값을 초기값으로 단일값(single value)로 만들어주는 특성의 함수입니다.

(reduce 함수 인자로 들어가는) 콜백함수는 몇개의 인자를 받는데,

1) 초기값 x - 배열의 첫번째 요소를 초기값으로 하고 배열 두번째 요소를 실행 할 첫번째 요소라고 간주합니다.
2) 초기값 o -주어진 초기값이 초기값으로 결정되고, 배열 첫번째 요소를 첫번째 요소라고 간주합니다.

초기값이 있는 경우가 가장 자연스러운 패턴입니다.

forEach 함수는 배열의 요소 각각에 forEach 함수가 인자로 갖는 콜백함수에 요소 하나 하나씩 처리가 “됩니다”

요소가 2개(예: a,b) 라면 요소 하나하나씩 콜백함수가 처리합니다.

배열요소 a에 대해 콜백함수 실행, 배열요소 b에 대해 콜백함수 실행

(2) reduce의 단일값(single value)

순열 알고리즘을 만드는 reduce의 단일값은 빈 배열 [[ ]] 안에서 단일 값으로 귀결됩니다.

배열 요소 1,2,3이 차곡차곡 쌓여 [1,2,3]형태와 같은 것로 귀결된다는 의미 입니다.

reduce함수를 사용하는 목적은 배열의 요소들이 하나로 귀결된다는 이유입니다.

하나로 귀결된다는 것은 배열요소의 첫번째 부터 마지막이 하나의 값으로 결정된다는 것입니다.

요소 첫번째 부터 나중까지 각각 더해져 총 합의 값(여기서 총 합이 단일 값임을 말함)이 될 수 있고 곱으로 하나로 귀결될 수 있다.

이와 같이, 배열 요소들이 서로 합쳐 질 수 있고, 서로 곱해질 수 있는 등등의 연산은 reduce 함수 인자에 들어간, 콜백함수가 실행하는 조건에 따라 달라집니다.

즉. 콜백함수 안에 조건(연산 식)에 따라 연산이 정의됩니다.

(3) reduce와 forEach의 관계

forEach는 새로운 배열을 만들고, 그 배열을 reduce 콜백함수가 받아서 하나의 값으로 만듭니다. reduce 함수의 연산내용은 forEach 입니다.