본문 바로가기

반응형

JavaScript

(16)
객체에 객체를 병합하는 Object.assign 메서드 객체를 병합하는 메서드인 Object.assign 메서드에 대해서 알아보겠다. Object.assign(target, ...sources) target: 목표 객체, 속성을 복사해 반영한 후 반환 할 객체 sources: 출처 객체, 반영하고자 하는 속성들을 갖고 있는 객체들 Object.assign()은 값을 복사하기 때문에, 깊은 복사를 사용하려면 다른 방법을 사용해야한다. * 얕은 복사 - 해당 객체만 복사하여 새 객체를 생성함 - 복사된 객체의 인스턴스 변수는 원본 객체의 인스턴스 변수와 같은 메모리 주소를 참조함 - 해당 메모리 주소의 값이 변경되면 원본 객체 및 복사 객체의 인스턴스 변수 값은 같이 변경됨 * 깊은 복사 - 해당 객체와 인스턴스 변수까지 복사 - 전부를 복사하여 새 주소를 담기..
reduce() 사용법 reduce * 배열의 각 요소에 대해 주어진 함수(=reducer)를 실행하고, 단 하나의 결과값을 반환함 * map, filter 등의 다양한 메서드를 구현 * 대부분 배열에 있는 인자들을 꺼내서 사용할때 forEach문을 사용한다. 하지만 reduce를 알아두면 다양한 곳에서 사용할 수 있다. arr.reduce((acc,cur,idx,src)->{ return 결과 },초기값); acc : 누적 값 cur : 현재 값 idx : 현재 인덱스(초기값을 제공하면 0, 아니면 1부터 시작) src : reduce()를 호출한 배열 예제. 덧셈 (초기값 설정) input.reduce((acc, cur, idx) => { console.log(acc, cur, idx); return acc + cur; }..
[Javascript] reduce()함수 reduce() reduce메서드는 배열의 각 요소를 순회하며 callback 함수의 실행값을 누적하여 하나의 결과값을 반환한다. 구문 arr.reduce(callback[, initialValue]) arr.reduce((누산값, 현재요소값, 현재요소의 index, 현재배열) => { return 다음 누산값; }, 초기 누산값); 리듀서 함수는 네 개의 인자를 가집니다. 누산기 (acc) 현재 값 (cur) 현재 인덱스 (idx) 원본 배열 (src) 리듀서 함수의 반환 값은 누산기에 할당되고, 누산기는 순회 중 유지되므로 결국 최종 결과는 하나의 값이 된다. var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) { return acc..
[Javascript] 배열에 특정 값 포함여부 확인 includes()함수 includes() include() 함수는 특정값이나 특정 문자가 포함되었는지 확인하기 위한 함수이다. true / false로 있다, 없다를 직관적으로 리턴해준다. 구문 arr.includes(valueToFind[, fromIndex]) [1, 2, 3].includes(2); // true [1, 2, 3].includes(4); // false [1, 2, 3].includes(3, 3); // false [1, 2, 3].includes(3, -1); // true [1, 2, NaN].includes(NaN); // true includes mdn https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Arr..
[Javascript] shift, unshift 함수 shift 배열에서 첫 번째 요소를 제거하고, 제거된 요소를 반환함 -> 배열의 길이를 변하게 함 구문 arr.shift() var myFish = ['angel', 'clown', 'mandarin', 'surgeon']; console.log('myFish before: ' + myFish); // "'myFish before: angel,clown,mandarin,surgeon" var shifted = myFish.shift(); console.log('myFish after: ' + myFish); // "myFish after: clown,mandarin,surgeon" console.log('Removed this eleme..
[Javascript] Array forEach()함수 forEach() map함수와 비슷한 forEach 함수에 대해 알아보겠다. forEach() 메서드는 배열에 사용하는 메서드로, 반복적인 기능을 수행할 때 사용한다. map()메서드와 거의 비슷하지만 차이점은 따로 return 하는 값이 없다는 것이다. 구문 arr.forEach(callback(currentvalue[, index[, array]])[, thisArg]) 매개변수 callback : 실행함수 currentvalue : 처리할 현재 요소 index : 인덱스 반환값 underfined const arr = ["apple", "orange", "grape"] arr.forEach((arr) => console.log(arr)) // apple, orange, grape arr.forEac..
[Javascript] 특정 문자 위치 찾기 indexOf 함수 Javascript에서 특정 문자 위치를 찾는 법이 여러개 있지만 그 중에서 indexOf 함수에 대해 포스팅하겠다. indexOf() Javascript의 문자열에서 특정 문자의 위치를 찾기 위해서 indexOf 함수를 사용한다. 구문 arr.indexOf(searchElement[, fromIndex]) 매개변수 searchElement : 배열에서 찾을 요소 fromIndex Optional : 검색을 시작할 색인 (기본값: 0, 인덱스가 배열의 길이보다 크거나 같은 경우 -1이 반환) 반환값 배열 내의 요소의 최초의 인덱스. 발견되지 않으면 -1. var array = [2, 9, 9]; array.indexOf(2); // 0 array.indexOf(7); // -1 array.indexOf(..
[Javascript] find, findIndex 함수 find, findIndex 함수는 조건을 만족하는 배열 요소의 값 또는 인덱스를 찾기 위해서 사용되는 함수이다. find() 배열의 요소를 순차적으로 순회하면서 조건에 일치하는 요소의 값을 즉시 반환함 만약 일치하는 경우가 없다면, underfined를 반환함 구문 arr.find(callback[, thisArg]) arr.find( 현재값 => 조건 ) 매개변수 callback : 함수 element : 현재값 index : 인덱스 findIndex() 배열의 요소를 순차적으로 순회하면서 조건에 일치하는 요소의 인덱스를 즉시 반환함 만약 일치하는 경우가 없다면, -1를 반환함 const arr1 = [ 10,20,30,40,50] const data = [ {id:1, name:'홍길동'}, {id..

반응형