라벨이 배열인 게시물 표시

[JavaScript] immutable array

이미지
객체의 경우 값의 메모리 주소를 참조하기 때문에 객체에 특정한 값을 추가하거나 삭제 할 경우 원본 데이터가 변경되는 일이 발생한다. 객체를 변경하지 않고 원본 상태를 유지하면서 기존의 데이터를 그대로 갖고있으면서 새로운 값을 추가한 새로운 객체를 생성할 수 있다. list 배열 객체 원본 데이터는 변경하지 않으면서 mango를 추가한 새로은 list2 배열을 만들었다. list 배열과 list2 배열을 비교연산자로 비교해보면 false값을 반환한다. 즉, 기존의 list 배열을 참조하지않고 복제한것이다. concat 메서드를 이용해서도 가능하고 Array.from() aptjemfheh immutable array를 생성할 수 있다. 객체의 경우 Object.assign()을 사용하여 불변 객체를 생성할 수 있다. 이외에도 전개연산자를 사용하거나 immer 라는 라이브러리를 사용하여 불변 객체를 생성할 수 있다. 리액트를 공부하면서 불변성에 대해서 공부해 보았다. 

[JavaScript] reduce : 값을 축약하는 함수

reduce :  값을 축약하는 함수 arr.reduce( callback(accumulator, item, index, array), [initialValue] ) array.reduce((누적값, 현잿값, 인덱스, 요소) => { return 결과 }, [초깃값]); - 콜백 함수의 인수 - accumulator - 이전 함수 호출에 대한 결과 item - 현재 배열의 요소 index - 요소의 위치 array - 배열 initialValue - 옵션값이며 함수 최초 호출시 사용되는 초깃값이다. 옵션이지만 필수적으로 적는것이 좋다. 배열에 요소가 하나도 없는 빈배열이 존재할 경우 오류를 반환하게 되므로 초깃값을 설정하는것이 좋다. (권장) 콜백함수에서 다른것은 생략가능하지만 누적값과 현재값은 필수이다. //초깃값 설정X let result = a . reduce (( acc , cur ) => { return acc + cur }); console . log ( result ); // 15 //초깃값 1000 설정 const a = [ 1 , 2 , 3 , 4 , 5 ]; let result = a . reduce (( acc , cur ) => { return acc + cur ; }, 1000 ); console . log ( result ); // 1050 덧셈, 뺄셈 이외에도 아래와 같이 초깃값을 빈 배열로 주고 기존 배열을 가지고 순차적으로 값을 평가하여 빈 배열에 하나씩 넣어서 평가된 값을 담은 새로운 배열을 반환하는등의 역할을 할 수 있도록 코드를 작성하는것도 가능하다. const a = [ 1 , 2 , 3 , 4 , 5 ]; let makeArr = a . reduce (( acc , cur ) => { acc . push ( cur % 2 === 0 ? "짝수" : "홀수" ); return acc ; }, []...