javascript: 자바스크립트 예제로 알아보는 return문과 filter 메소드

요즘 바닐라 자바스크립트로 투두리스트를 만들고 있는데, 역시나 어렵다....

크롬 모멘텀(chrome.google.com/webstore/detail/momentum/laookkfknpbbblfpciffpaejjkokdgca?hl=ko&utm_source)과 같은건데 이 화면 하나 만드는데 뭐이리 힘드냐... 자바스크립트 모듈만 4개 들어감....! 특히나 투두 리스트를 로컬스토리지에 저장하고 삭제하고 하는데 생각보다 함수가 너무 많이 들어가서 지금도 이해하려고 계속 보는중 ㅠ.ㅠ 흐엉. 너무 어렵다.

일단 자바스크립트 기초는 다 땠다고 생각했는데, 역시 언어로 뭐 하나 만들어봐야 그 진면목?을 알 수 있는 것 같다. 기초 강의 들을땐 알겠던데 예제하려니까 완전 멘붕스.... 그래도 어찌저찌해서 만들긴 했는데,,,,

무튼 코딩하다가 그때그때 모르겠는 개념들을 정리해 보려고 한다. 먼저 return문부터 알아보자.

return 문의 경우 함수 실행을 종료하거나 주어진 값을 함수 호출 지점으로 반환할때 사용한다.

예를들면,

여기서 consol.log(Area(4,5)); 를 하면 값은 20으로 반환된다. 그러나 만약 consol.log(Area(-1,5))로 하면 0으로 반환된다. if 구문과 같지 않을 시 0으로 반환하라고 return 0되어 있기 때문이다. 함수에서 return에 도달하게 되면 실행은 그 지점에서 중단이 된다. 그래서 리턴문은 종료역할을 한다고도 볼 수 있다. 

즉 return 뒤에 다른 함수를 실행해도 실행이 되지 않는다는 것이다.

투두리스트 만들면서 쓴 return 문

다음으로 filter 메소드를 알아보자.

배열의 특정 조건을 기준으로 필터링 하는 것을 필터링한다고 하는데, 이 때 filter 메소드를 사용한다. 

변수 arr에 숫자 1~10까지 배열을 할당하고 filter 메소드의 callback 함수를 만들어서 arr 배열 요소가 각 a에 할당된다. 첫번째 console.log의 경우 '현재 위치값은 1(~10) 입니다. 라고 출력된다. 

여기서 a값이 2로 나누었을 때 나머지가 0이면 true, 0이 아니면 false를 반환한다. 즉 2로 나누었을 때 나머지가 0인 수만 배열로 반환된다. 반환되는 값 -> [2,4,6,8,10]

콘솔창에 반환되는 값

 

// TO DO LIST 예제

크롬 모먼텀 예제 : 바닐라자바스크립트로 만든 투두리스트

일단 로딩하면 배경이미지가 F5 누를때마다 바뀌고, 이름을 입력하면 hello,이름으로 바뀌며 저장된다. 한번만 입력하면 다시는 이름을 묻지않음. 그리고 write to do에 할일을 쓰면 리스트로 저장이되고 삭제도 가능하다.

이름과 할일을 입력해본 투두리스트

이제 API로 날씨 불러오고 CSS로 조금만 더 건드려주면 완성! 

쉬운 예제라곤 하는데............. ㅠ.ㅠ 아직 ㄷ ㅏ이해를 못한건 함정. 흐엉.