본문 바로가기
728x90
반응형

STUDY/JavaScript19

Javascript에서 배열을 필터링하는 filter메서드 filter 메서드는 배열의 각 요소를 평가하여 조건을 만족하는 요소들로 이루어진 새로운 배열을 반환하는 메서드이다. 주어진 조건에 따라 배열을 필터링하므로, 데이터의 조건부 추출이나 변형에 자주 활용된다. const newArray = array.filter(callback(currentValue, index, array)); callback : 각 요소에 대해 실행할 함수로, 참/거짓을 반환하는 조건을 포함한다. currentValue : 현재 배열의 요소. index : 현재 배열의 인덱스. array : 메서드가 호출된 배열. const numbers = [1, 2, 3, 4, 5]; // 짝수만 필터링 const evenNumbers = numbers.filter((num) => num % 2 .. 2023. 11. 21.
Javascript에서 배열 합성과 가공을 하는 reduce 메서드 reduce는 배열의 각 요소에 대해 주어진 콜백 함수를 실행하면서 하나의 값을 누적하는 메서드이다. 이를 통해 배열의 요소들을 단일 값으로 축소할 수 있다. array.reduce(callback(accumulator, currentValue, currentIndex, array), initialValue); callback : 각 요소에 대해 실행할 함수로, 네 개의 인자를 받는다. accumulator : 누적된 값. currentValue : 현재 배열의 요소. currentIndex : 현재 배열의 인덱스. array : 메서드가 호출된 배열. initialValue : 누적 값의 초기값으로, 생략할 수 있다. const numbers = [1, 2, 3, 4, 5]; // 배열의 모든 요소를 .. 2023. 11. 21.
Javascript 배열 처리를 위한 메서드들 1. map 배열의 각 요소에 대해 주어진 함수를 호출하고 그 결과로 새로운 배열을 생성한다. 원본 배열은 변경되지 않으며, 새로운 배열이 반환된다. JavaScript에서 배열을 변형하거나 수정할 때 자주 사용되는 고차 함수 중 하나이다. const numbers = [1, 2, 3]; const squaredNumbers = numbers.map(num => num ** 2); console.log(squaredNumbers); // 출력: [1, 4, 9] 2. filter 주어진 함수의 조건을 만족하는 배열의 요소만으로 새로운 배열을 생성한다. const numbers = [1, 2, 3, 4, 5]; const evenNumbers = numbers.filter(num => num % 2 ===.. 2023. 11. 20.
JavaScript에서 배열 변형과 데이터 가공을 위한 map메서드 JavaScript에서 배열을 다룰 때 많은 경우에 데이터의 변형이 필요하다. 이때 사용되는 유용한 메서드 중 하나가 map()이다. map()은 기존 배열의 각 요소에 대해 주어진 함수를 실행하고, 그 결과로 새로운 배열을 생성한다. 이를 통해 코드를 간결하게 작성하고 데이터를 가공할 수 있다. const newArray = originalArray.map((currentValue, index, array) => { // 변형 또는 수정할 작업을 수행하고 반환 return transformedValue; }); - currentValue : 현재 처리 중인 요소의 값 - index : 현재 처리 중인 요소의 인덱스 - array : map을 호출한 배열 map() 메서드 활용 1) 데이터 변형 및 가공.. 2023. 11. 17.
JavaScript에서 많이 사용하는 함수들 1. setTimeout setTimeout 함수는 일정 시간이 지난 후에 한 번만 특정 함수를 실행하는 데 사용하고 함수 실행 이후에는 타이머가 해제된다. setTimeout(() => { console.log('After 1 second'); }, 1000); - 비동기 작업 후 일정 시간 동안 대기할 때. - 애니메이션 제어 및 타이밍 조절에 활용. 2. setInterval setInterval 함수는 일정한 간격으로 특정 함수를 반복해서 실행하는 데 사용되고 타이머를 해제하려면 clearInterval 함수를 사용한다. // 1초 간격으로 실행되는 함수 const intervalId = setInterval(function() { console.log('Function executed every.. 2023. 11. 17.
JavaScript에서의 함수 유형 1. 일반 함수 (Function Declarations) 함수 선언문은 function 키워드를 사용하여 정의되는 일반적인 함수이다. 주로 함수 선언문은 전역 스코프나 함수 스코프에서 사용된다. function add(a, b) { return a + b; } 2. 함수 표현식 (Function Expression) 함수가 변수에 할당되는 방식으로, 함수가 값으로 취급된다. 주로 변수에 함수를 할당하는 경우나 익명 함수를 사용할 때 주로 사용된다. 함수 표현식은 익명 함수일 수도 있고, 이름이 있는 함수일 수도 있다. const add = function(x, y) { return x + y; }; 2-1. 익명 함수 (Anonymous Function) 함수 이름이 없는 함수를 익명 함수라고 한다. .. 2023. 11. 17.
변수선언 키워드 var, let, const의 특징과 주의점 var, let, const 키워드는 변수를 선언할 때 사용되는 키워드로, 특징과 사용시의 주의점을 명확히 알고 있어야 한다. 0. 시작하기 전에 | 호이스팅(hoistion) 호이스팅은 변수 선언이 스코프 내에서 최상단으로 끌어올려지는 현상이다. | 스코프(Scope) 스코프는 변수와 함수의 유효 범위를 나타내는 개념으로, 코드 내에서 변수나 함수에 접근할 수 있는 범위를 결정하며, JavaScript에서는 크게 전역 스코프(Global Scope)와 지역 스코프(Local Scope)로 나눌 수 있다. 1. var 'var'는 ES6 이전의 문법이므로 현대적인 JavaScript에서는 let과 const를 주로 사용한다. function example() { if (true) { var y = 10;.. 2023. 11. 16.
this값을 명시적으로 설정하는 메서드 - bind(), call(), apply() bind(), call(), apply()는 JavaScript에서 함수의 this 값을 명시적으로 설정하는 메서드다. 1. bind() bind() 메서드는 함수에 대한 this 값을 영구히 설정하고, 새로운 함수를 반환한다. 원본 함수에 영향을 주지 않고 새로운 함수를 생성하며, 새로운 함수를 호출하면 그 함수 내의 this가 bind()에 전달된 값으로 설정된다. const newFunction = originalFunction.bind(thisArg[, arg1[, arg2[, ...]]]); originalFunction : this를 영구적으로 설정하고자 하는 원본 함수. thisArg : originalFunction 내에서 this로 사용할 값. arg1, arg2, ... : origin.. 2023. 11. 15.
자바스크립트에서 this 동작 this는 현재 실행 중인 함수 내에서 사용되는 특별한 키워드이다. this의 값은 함수가 호출될 때마다 동적으로 결정되며, 호출 방식에 따라 달라진다. 여러 상황에서 this가 가리키는 대상이 다르기 때문에 상황별 this 동작을 알아야 한다. 1. 전역 컨텍스트 (Global Constext) 전역 컨텍스트에서 this는 전역 객체를 가리킨다. 브라우저 환경에서는 window 객체가 전역 객체이다. console.log(this); // {} 2. 함수 내부 (Function Context) 일반적인 함수 내부에서 this는 호출 시점에 따라 결정된다. function exampleFunction() { console.log(this); } exampleFunction(); // Object [glo.. 2023. 11. 15.
728x90
반응형

티스토리툴바