JavaScript204 [JavaScript]배열의 특정 값을 찾는 find, findIndex 함수 JavaScript에서 find 함수와 findIndex 함수는 조건을 만족하는 배열 요소의 값 또는 인덱스를 찾기 위해 사용하는 함수입니다. find 함수는 배열의 요소를 순차적으로 순회하면서 조건에 일치하는 요소의 값을 즉시 반환합니다. 조건을 일치하는 경우가 없다면, undefined를 반환합니다. findIndex 함수는 배열의 요소를 순차적으로 순회하면서 조건에 일치하는 요소의 인덱스를 반환합니다. 조건을 일치하는 경우가 없다면, -1을 반환합니다. find 함수 arr.find(callback(element, index, array), thisArg) findIndex 함수 arr.findIndex(callback(element, index, array), thisArg) 매개변수는 find .. JavaScript/배열 2021. 8. 10. [JavaScript]콜백(Callback) 함수 JavaScript에서 콜백(Callback) 함수는 함수의 인수로서 다른 함수로 전달되는 함수입니다. 콜백 함수는 주로 배열에서 사용 가능한 foreach, map, filter, reduce 함수에서 사용됩니다. 대부분의 개발자들은 foreach문에 콜백 함수를 전달하고 있다는 것도 모른 채 foreach문을 사용하고 있을 수 있습니다. 물론, 저도 콜백 함수를 자세하게 몰라서 이번 기회에 공부 후 포스팅을 작성하였습니다. 사용 방법 1. 콜백 함수 사용 2. 콜백 함수 화살표 함수로 사용 3. 동기 콜백 함수 4. 비동기 콜백 함수 콜백 함수 사용 아래 코드는 배열 arr에서 홀수인 요소만 filter 하여 새로운 배열을 생성하는 코드입니다. ☞ filter 메서드 사용 방법 보러 가기 var ar.. JavaScript/JavaScript 문법 2021. 8. 10. [JavaScript]filter함수 사용 방법 JavaScript에서 filter 함수는 배열의 요소를 순차적으로 순회하면서 조건에 일치하는 요소를 모아 새로운 배열을 반환합니다. arr.filter(callback(element, index, array), thisArg) arr - 순회하고자 하는 배열 element - 현재 배열의 요소 index(생략 가능) - 현재 배열 요소의 index array(생략 가능) - filter 함수를 호출한 배열 thisArg(생략 가능) - callback을 실행할 때 this로 사용되는 값(= map 함수에서 사용될 this값) filter 함수의 특징 값이 존재하는 인덱스에 대해서만 호출됩니다. 삭제 또는 값이 없는 배열은 filter 함수가 실행되지 않습니다. 기존 배열의 값을 변경하지 않습니다. 처리.. JavaScript/배열 2021. 8. 9. [JavaScript]reduce함수 사용 방법 JavaScript에서 reduce 함수는 배열의 요소를 순차적으로 순회하면서 리듀서(reducer) 함수를 실행하고 하나의 결과값을 반환합니다. 배열 요소의 순회는 initialValue에 설정 유무에 따라 순회를 시작하는 index 0부터 시작할수도 있고 index 1부터 시작할수도 있습니다. 주로 배열 요소의 합계를 계산하는데 사용 되며, 배열 또는 객체로 반환할 수도 있습니다. arr.reduce(callback(accumulator, currentValue, index, array), initialValue) arr - 순회하고자 하는 배열 accumulator - 누적되는 값 - callback 함수의 반환값을 누적 - initialValue를 설정한 경우 callback의 최초 호출시 ini.. JavaScript/배열 2021. 8. 9. [JavaScript]map함수로 새로운 배열(Array) 생성하기 JavaScript에서 map 함수를 사용하여 새로운 배열을 생성할 수 있습니다. arr.map(callback(currentValue, index, array), thisArg) arr - 순회하고자 하는 배열 currentValue - 배열의 요소 index(생략 가능) - 현재 배열 요소의 index array(생략 가능) - map 함수를 호출한 배열 thisArg(생략 가능) - callback을 실행할 때 this로 사용되는 값(= map 함수에서 사용될 this값) 이번 포스팅에서는 map 함수의 사용 방법과 응용한 코드를 정리하였습니다. 사용 방법 1. 배열 요소의 * 2를 계산한 새로운 배열을 반환 2. 배열 요소의 index와 map 함수를 호출한 배열을 확인 3. this 사용 방법 .. JavaScript/배열 2021. 8. 9. [JavaScript]Window 객체와 Document 객체 Window 객체와 Document 객체 window는 브라우저의 창이고 document는 브라우저 창의 HTML 문서 객체입니다. 즉, window객체 안에 document객체가 존재합니다. window 객체 브라우저 탭의 전역 객체입니다. window로 접근 가능합니다. Chrome Console에서 window 입력 document 객체 window객체의 속성(property)입니다. document는 앞에 window가 생략되어 있으므로 window.document와 document는 동일합니다. document 또는 window.document로 접근 가능합니다. Chrome Console에서 document 입력 Console에서 document의 출력 결과는 크롬 개발자 도구(F12)에서 E.. JavaScript/JavaScript 문법 2021. 7. 28. [JavaScript]널 병합 연산자(??) JavaScript에서 사용되는 널 병합 연산자(Nullish coalescing operator) ?? 연산자에 대해 설명합니다. ※ IE와 Opera에서는 호환되지 않습니다. ?? 연산자 왼쪽 피연산자가 null 또는 undefined일 경우 오른쪽 피연산자를 반환하고 그렇지 않을 경우 왼쪽 피연산자를 반환합니다. 아래 코드에서 왼쪽 피연산자가 null 이므로 오른쪽 피연산자인 'Hello'를 반환합니다. var A = null ?? 'Hello'; || 연산자와 다른 점 ?? 연산자는 오직 null과 undefined를 체크합니다. || 연산자는 참(true)인 값을 체크합니다. ?? 연산자에서 왼쪽 피연산자가 0 또는 false일 경우 왼쪽 피연산자를 반환합니다. || 연산자에서 왼쪽 피연산자가 .. JavaScript/JavaScript 문법 2021. 7. 24. [JavaScript]배열 size()와 length의 차이 JavaScript에서 배열(Array)의 size()와 length의 차이를 정리합니다. 특정 브라우저에서만 호환되는 size() .size() 메서드는 jQuery 1.8부터 사용되지 않습니다. jQuery 1.8부터 .size() 메소드가 삭제되었으므로 .length property를 사용할 것을 권고하고 있습니다. 특정 브라우저에서 .size() 메서드가 동작하는 이유는 jQuery 버전이 1.8 미만이기 때문입니다. 참조 : https://api.jquery.com/size/ size() 메서드는 순수 배열의 메서드가 아닙니다. size() 메서드는 jQuery에서 지원하는 라이브러리입니다. 순수한 자바스크립트 방식이 아닙니다. size()는 길이를 구하는데 적합하지 않습니다. 다른 프로그래밍 .. JavaScript/JavaScript 문법 2021. 7. 22. [JavaScript]배열에서 특정 값의 개수 JavaScript에서 배열 내부에 특정 값의 개수를 구하는 방법을 정리합니다. 데이터 1. 배열(Array) 2. 배열의 객체(Object of Array) 3. 다차원 배열(Multidimensional Array) 방법 1. for문 2. map() 2. filter() 4. reduce() 배열(Array) 1. for문 가장 기본적인 방법으로 배열의 모든 요소를 순회하면서 특정 값이 있을 경우 count를 증가합니다. var arr = ['A', 'B', 'B', 'C', 'D' ]; var count = 0; for(let loop = 0; loop < arr.length; loop++) { if(arr[loop] === 'A') { count++; } } console.log(`count :.. JavaScript/JavaScript 문법 2021. 7. 22. [JavaScript]함수형 프로그래밍, 순수 함수 함수형 프로그래밍의 핵심 개념 중 하나인 순수 함수에 대해 설명을 합니다. 순수 함수(Pure Function) 아래 요건을 충족하면 순수 함수라고 할 수 있습니다. 1. 파라미터를 최소 하나 이상 받으며 파라미터에 의해서만 반환 값이 결정됩니다. 2. 값이나 다른 함수를 반환합니다. 3. 부수 효과가 없어야 합니다. 4. 입출력을 수행해서는 안 됩니다. EX) 함수 내부에서 콘솔에 로그를 남김, 파일입출력 부수 효과(side effect) 함수 내부에 전역 변수를 사용 함수 내부나 애플리케이션에 있는 다른 상태를 변경 함수 내부에서 다른 함수를 호출(순수 함수는 제외) 순수하지 않은 함수 var globalAge = 50; var userInfo = { name: "JaeSeong", age: 29 }.. JavaScript/함수형 프로그래밍 2021. 7. 18. [JavaScript]함수형 프로그래밍 - 불변성(immutable) 함수형 프로그래밍의 핵심 개념 중 하나인 불변성에 대해 설명을 합니다. 불변성(immutable) 이력서에서 본인의 사진을 숨기는 작업을 진행할 경우 싶은 경우 가능한 방법은 두 가지입니다. (더 창의적이고 다양한 방법이 있겠지만 2가지라고 가정합시다.) 첫 번째 방법은 원본 이력서에서 사진을 빗금 처리하던지 사진을 가립니다. 두 번째 방법은 원본 이력서의 복사본을 만들어 복사본을 수정하는 방법입니다. 두 가지 방법 중에서 사진을 숨기는 작업을 취소해야 하는 경우가 있을 수도 있으므로 안전한 방법은 두 번째 방법입니다. JavaScript와 불변성 자바스크립트에서 데이터가 변경되었을 경우 변하는지 불변하는지 예제 코드를 통해 알아보도록 합니다. 예제코드 변수 변수의 경우에는 원본 변수인 myAge의 값이.. JavaScript/함수형 프로그래밍 2021. 7. 18. [JavaScript]명령형 프로그래밍, 선언적 프로그래밍 프로그래밍 패러다임은 프로그램 개발 방법론을 의미합니다. 그림에서 확인할 수 있듯이 현재까지 수많은 프로그래밍 패러다임이 탄생했으며, 지금도 다양한 연구를 통해 새로운 패러다임을 만들어 나가고 있습니다. 개발자는 본인이 사용하는 프로그래밍 언어와 해당 언어의 패러다임을 이해하여 올바른 프로그램을 개발하는 자세를 갖추어야 합니다. 수많은 패러다임이 존재하지만, 이번 포스팅에서는 선언적 프로그래밍(declarative programming)과 명령형 프로그래밍(imperative programming)에 대해 설명을 합니다. 선언적 프로그래밍 목표를 달성하기 위해 과정보다는 필요한 기술을 우선 중점으로 프로그래밍을 하는 스타일입니다. 함수형 프로그래밍은 선언적 프로그래밍에 포함됩니다. 즉, 선언적 프로그래밍.. JavaScript/함수형 프로그래밍 2021. 7. 17. 이전 1 ··· 13 14 15 16 17 다음