본문 바로가기
반응형

javascript58

filter() 함수 배열에서 원하는 값만 추출하려면 아래와 같이 할 수 있습니다. var numbers = [1,2,3,4,5]; var arr = []; for(var i = 0; i < numbers.length; i++){ if(numbers[i] % 2 === 0) arr.push(numbers[i]); } console.log(arr); // 2,4 filter() 함수를 사용하면 훨씬 더 깔끔하게 코드를 작성할 수 있습니다. var numbers = [1,2,3,4,5]; var arr = numbers.filter(function(n){ return n % 2 === 0; }); console.log(arr); // 2,4 2019. 11. 1.
map() 함수 var numbers = [1,2,3,4,5]; for( var i = 0; i < numbers.length; i++ ){ numbers[i]++; } console.log(numbers); // 2,3,4,5,6 위 코드는 숫자들을 1씩 증가시켜 주는 로직입니다. 이 코드를 함수형 프로그래밍을 적용해서 다시 구현해보겠습니다. 자바스크립트 배열에 기본으로 제공되는 map()함수를 사용합니다. var numbers = [1,2,3,4,5]; numbers = numbers.map(function(n){ return n + 1; }) console.log(numbers); // 2,3,4,5,6 map() 함수는 인자로 함수를 입력받아 배열 안에 있는 요소에 그 함수를 적용시키고, 그 결과를 새로운 배열에.. 2019. 10. 28.
화살표 함수 // ES5의 함수 표현식 var es = function(){ console.log('hello'); } es(); // 'hello' // ES6의 화살표 함수 표현식 let es = () => { console.log('hello'); } es(); // 'hello' 함수내의 처리문이 하나면 중괄호를 생략할 수 있습니다. let es = () => console.log('hello'); es(); // 'hello' 매개변수를 전달받아 리턴하는 과정도 간단해집니다. // ES5의 매개변수 전달, 리턴 var add = function(a,b){ return a + b; } console.log( add(1,4) ); // 5 // ES6의 매개변수 전달, 리턴 let add = (a,b) => {.. 2019. 10. 24.
로컬스토리지 예제 로컬스트리지를 이용해 글상자의 background-color, color 값을 저장하고 다시 불러오는 예제입니다. change text color change bg color set color get color $('#txt').val('글상자 영역의 색상 값을 저장합니다.'); $('#textcolor').change(function() { var color = $(this).val(); $('#txt').css('color', color); }); $('#bgcolor').change(function() { var color = $(this).val(); $('#txt').css('backgroundColor', color); }); $('#set_color').click(function() { va.. 2019. 10. 21.
퀴즈 만들기 자바스크립트 프로젝트 북을 보며 공부한 내용입니다. https://book.naver.com/bookdb/book_detail.nhn?bid=12285042 자바스크립트 프로젝트북 실무 개발자를 위한 웹 프로그래밍 레시피!프로그래밍 언어를 공부할 때는 실무에서 많이 사용하는 코드를 조금씩 구현해보면서 익히는 것이 좋다. 이 책에서는 실무와 밀접한 내용을 다양한 유형의 웹 애플리케이션이나 UI 요소로 익힐 수 있도록 9가지 프로젝트를 구성했다. 프로젝트 주요 부분에 자바스크립트와 제이쿼리 소스를 함께 수록하여, 자바스크립트와 제이쿼리를 함께 이해하고 실무 능력을 키울 수 있게 했다. book.naver.com 퀴즈 진행 정보 body { font-size: 18px; } .grid { padding: 10.. 2019. 10. 18.
ES6의 클래스 자바스크립트 프로젝트 북을 보며 공부한 내용입니다. https://book.naver.com/bookdb/book_detail.nhn?bid=12285042 자바스크립트 프로젝트북 실무 개발자를 위한 웹 프로그래밍 레시피!프로그래밍 언어를 공부할 때는 실무에서 많이 사용하는 코드를 조금씩 구현해보면서 익히는 것이 좋다. 이 책에서는 실무와 밀접한 내용을 다양한 유형의 웹 애플리케이션이나 UI 요소로 익힐 수 있도록 9가지 프로젝트를 구성했다. 프로젝트 주요 부분에 자바스크립트와 제이쿼리 소스를 함께 수록하여, 자바스크립트와 제이쿼리를 함께 이해하고 실무 능력을 키울 수 있게 했다. book.naver.com ECMAScript 6 Class 기존의 자바스크립트에 없던 클래스가 ES6에서부턴 선언할 수 있.. 2019. 10. 17.
반응형