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 순서도 링크

 안녕하세요. 알렉스 입니다. 이번에는 For문 안에 있는 if문 구조에 대해 순서도를 그려보도록 하겠습니다. 그림1) 전체 구조 프로그램 그림2) 순서도에 대응하는 코드 위치 위 그림1,2를 보시면 전체 코드에 대해서 구조를 확인할수 있습니다. 그림2에서는 각 순서도 기호에 대응하는 코드를 숫자로 연결해 놨습니다. 공간 부족으로 인해 '메인For루프'는 그림 3,4에 그려놨습니다. 그림3) 메인For루프 세부구조 그림4)메인For루프 - 순서도에 대응하는 코드 위치 메인For루프 내부의 순서도는 그림3,4에 그려져 있습니다. 순서도의 화살표를 따라 진행하면 전체적으로 프로그램이 어떻게 구성되어 있는지 알수 있습니다.  링크 : if문 관련 자료         For, While문 관련 자료

안녕하세요. 알렉스 입니다. 이번에는 간단히 if문에 대해서 순서도를 이용하여 알려드리도록 하겠습니다. 일단 간단히 if문의 조건이 참이나 거짓인지를 확인후 Yes 또는 No에 따라 프로그램을 수행합니다. 그림1) if구조   그림2) 그림1을 구동시 그림 1에서 if 와 else를 사용해도 되지만 조건을 추가하기 위하여 else if를 넣었습니다. 물론 수학적으로 num >= 3이면 거짓의 경우는 num<3이 자동으로 맞습니다. 하지만 사용자가 num값을 입력한다면 꼭 숫자만 들어온다는 보장이 없습니다.  그림3) num에 다른값을 넣을때 동작 그림4) 초기 num값이 4일때 구동시 그림 4까지 하고 if문에 대한 순서도는 마무리 짓도록 하겠습니다.

 안녕하세요. 알렉스 입니다. For,While루프를 JavaScript로 구현을 할때 이해하기 쉽도록 순서도를 만들어서 정리를 해 봤습니다. 일단 For Loop를 먼저 보도록 하겠습니다. 그림1) For Loop 구성  For루프를 이해할때 가장 단순한 형태부더 이해하는게 좋을것 같아서 그림1과 같이 간단한 순서도를 만들어 봤습니다.   For루프의 1,2,3,4번은 진행 순서를 나타냅니다. 1~4번은 모두 For Loop안에 들어가며 'Hello'가 출력되는 과정을 순차적으로 나타내도록 하겠습니다. 그림2) For Loop 진행 While Loop는 For Loop에서 초기값을 바깥으로 뺐다고 생각하시면 됩니다.  그림3) While Loop 구성 그림4) While Loop 진행  사실 For Loop나 While Loop사이에 큰 차이는 없어 보입니다. 유일한 차이는 While루프에 진입할때 초기값과 증감식이 빠져 있는 것입니다. 이는 For Loop에서도 While Loop와 동일하게 사용할수 있지만 그럴거면 While Loop를 쓰겠죠.