Engineering_S/W & H/W

 안녕하세요. 알렉스 입니다. 이번에는 forEach()함수에 대해서 사용할려고 합니다.  forEach()함수를 보면 제가 예전에 작성한 '.map/.filter/.reducer 순서도(JavaScript)' 와 비슷하다는 것을 알수있습니다. 정확히 말하자면 '.map'함수와 상당히 유사합니다. 위 그림에 나온 코드를 콘솔창에서 작동 시키면 'arr' 각 원소에 2를 더한 값을 'log'로 보여준다는 것을 알수 있습니다. 하지만 더 자세하게 설명 드리기 위해 다음 그림으로 넘어가도록 하겠습니다.  이전 사진과 동일한 'forEach'이지만 함수안에 3개의 전달인자(ele, idx, arrAll)가 있습니다.  ele : 배열의 원소 idx : ele 배열의 인덱스 arrAll : arr의 배열(전체) 위와 같이 3개의 전달인자가 무엇인지 확인하기 위해서 콘솔창으로 출력해 보았습니다. 하지만 Return값이 없다는 것을 알수 있습니다.  '.map'과 '.forEach'의 결정적인 차이점은 Return값의 유무입니다. '.forEach'값은 해당 배열에 변화를 가하지 않습니다. 물론 프로그래머가 변화를 가할수가 있습니다. 위 사진에서 'arr[idx] = ele +2;'를 추가하였습니다. 'console.log'에 출력되는 값들이 루프가 진행될수록 바뀌는 것을 알수 있습니다. 마지막에 Return값은 없지만 'arr'를 출력하면 모든 원소가 +2씩 된것을 알수 있습니다. 이는 '.forEach'문에서 직접 'arr'의 원소에 수정을 가했기 때문입니다.  '.forEach'와 비슷한 '.map'과 비교하고 싶다면 해당 링크 를 확인해 주시기 바랍니다. 

 안녕하세요. 알렉스입니다. 이번 순서도는 '.map, .filter, .reducer'입니다. 일단 '.map'먼저 보도록 하겠습니다. 그림1) .map 순서도 위 사진은 '.map'을 사용할시 진행되는 순서도 입니다. 그런데 순서도를 그리고 보니깐 'for 루프'와 상당히 유사하다는 것을 알게 되었습니다. 'for 루프'순서도는 링크 로 들어가서 확인하시면 됩니다. 그림2) .filter 순서도(전체) 위 사진은 '.filter'순서도를 나타냈습니다. 그림1의 '.map'과 매우 유사하지만 3번(처리)에서 조건이 들어가게 됩니다. 그림2의 경우는 'a>3'(a가 3보다 클경우)인 경우에만 a 원소를 리턴합니다. 3번에 대한 더 자세한 순서도는 아래(그림3)에서 확인할수 있습니다. 그림3) .filter의 조건 순서도 그림3에서 3번(처리)부분을 보면 조건을 확인하고 참이면 a원소를 리턴, 거짓이면 아무것도 리턴하지 않습니다.  그림4) .reducer 순서도(초기값 존재) 그림5) .reducer 순서도(초기값 없음) 그림4는 '.reducer'를 사용할때 초기값 0을 입력을했을때 동작되는 순서도 입니다. 중요한 사실은 이전의 '.map, .filter'처럼 배열을 반환하는 것이 아니라 누적 계산을 하여 최종적으로 a를 리턴합니다.  .reducer의 function(a,b,c); a(필요) : 누적 계산값을 입력한다. (초기값이 있을시 대입하고 없으면 배열의 0번째 인덱스를 넣는다.) b(필요) : 인덱스 0 ~ 마지막까지 순차적으로 출력한다. (a에 초기값이 있으면 b는 인덱스 0부터 시작하고 초기값이 없으면 인덱스 1부터 시작한다) c(선택) : b에 해당하는 인덱스를 출력한다. For,While Loop 순서도 링크 If Statement 순서도 링크