티스토리 뷰
JavaScript 1주차
Reduce, For
JavaScript 1주차 강의를 다보고 문제를 푸는데 어려워 답안지를 보았다.
문제는 아래와 같다.
absolutes | signs | result |
[4,7,12] | [true,false,true] | 9 |
[1,2,3] | [false,false,true] | 0 |
여기서 답안지를 보았을 때 사람들이 2가지 의견으로 나뉘었다.
Reduce를 쓰는게 나은지 For문을 사용하는게 나은지
첫번째 답안지(reduce)
function solution(absolutes, signs) {
return absolutes.reduce((acc, val, i) => acc + (val * (signs[i] ? 1 : -1)), 0);
}
두번째 답안지(for)
function solution(absolutes, signs) {
let answer = 0;
for(let i = 0; i < absolutes.length; i++) {
signs[i] ? answer += absolutes[i] : answer -= absolutes[i]
}
return answer
}
REDUCE
reducer
= 배열의 각 요소에 대해 주어진 콜백 함수를 순차적으로 실행하면서 누적된 값을 구하는 배열 매소드이며,
4개의 인자를 받는다.
array.reduce(callback(accumulator, currentValue, currentIndex, array) {
}, initialValue);
- accumulator = 누적된 값
- currentValue = 현재 처리 중인 배열 요소
- currentIndex(선택) = 현재 처리 중인 배열의 인덱스
- array(선택) = reduce가 호출된 배열
- initiaValue = accumulatordml의 초기 값. 만약 제공되지 않으면 배열의 첫 번째 요소를 초기값으로 사용한다.
그렇다면 내가 알아본 답안지에 값을 넣어 차근차근 생각해보자.
- acc = accumulator
- val = currentValue
- i = currentIndex
풀어보면
return absolutes.reduce(callabck(0, 4, 0 =>)0+( 4 * (signs[true] ? 1: -1 )),0)
acc의 초기값은 0으로 시작
val에 들어가는 값은 4
i는 4의 인덱스 값은 0
acc = 0 + (4 * 1) = 4
acc의 초기값은 4으로 시작
val에 들어가는 값은 7
i는 7의 인덱스 값은 1
acc = 4 + (7 * -1) = -3
acc의 초기값은 -3으로 시작
val에 들어가는 값은 12
i 0의 인덱스 값은 2
acc = -3 + (12 * 1) = 9
조금 더 쉬 예시와 함께 살펴보자
const numbers = [1,2,3,4,5]
function solution(numbers) {
var answer = numbers.reduce((a,b) => a+b, 0) / numbers.length;
return answer;
}
const numbers = [1,2,3,4,5]
function solution(numbers) {
}
function solution( 1,2,3,4,5 ) { }
var answer = numbers.reduce((a,b) => a+b, 0) / numbers.length;
return answer;
}
var answer = numbers.reduce((a,b) => a+b, 0) / numbers.length;
return answer;
a는 누적 값
b는 순차적으로 배열을 돌 것이다.
=>
a와 b를 더하고
a의 초기값은 0이다.
(( 0 , 1 ) => 0 + 1 ) // = 1
(( 1 , 2 ) => 1 + 2 ) // = 3
(( 3 , 3 ) => 3 + 3 ) // = 6
(( 6 , 4 ) => 6 + 4 ) // = 10
(( 10 , 5 ) => 10 + 5 ) // = 15
15 / 5 ( 5 = 배열의 길이 )
return = 3
처음 사용하기에는 어려울 것 같지만 코드를 줄이기에는 for보다 reduce가 더 좋아보인다.
FOR
FOR문은 (초기값; 조건식; 증강식) {} 의 형태로 작성된다.
for(let i = 0; i < 4; i++) {signs[true] ? answer += absolutes[4] : answer -= absolutes[i]
answer = 4
for(let i = 0; i < 7; i++) {signs[false] ? answer += absolutes[-7] : answer -= absolutes[i]
answer = -7
for(let i = 0; i < 12; i++) {signs[true] ? answer += absolutes[12] : answer -= absolutes[i]
answer = 12
4+(-7)+12 = 9
for문의 경우 숫자로만 값을 찾아내기에 Reduce 보다 성능이 좋다고 한다.
사람이 느낄 수 있는 정도의 성능차이는 아니라고 했지만 사용하는 곳이 많아진다면 for를 그렇지 않다면 reduce를 사용해야겠다.
JavaScript 2주차
2주차에서는 아래와 같은 문제를 풀었다.
strings | n | return |
["sun", "bed", "car"] | 1 | ["car", "bed", "sun"] |
["abce", "abcd", "cdx"] | 2 | ["abcd", "abce", "cdx"] |
const strings = ["sun", "bed", "car"];
const n = 1;
const text = (strings, n) => {
const result = [];
for (let s = 0; s < strings.length; s++) {
strings[s] = strings[s][n] + strings[s];
}
strings.sort();
for (let i = 0; i < strings.length; i++) {
strings[i] = strings[i].replace(strings[i][0], "");
result.push(strings[i]);
}
return result;
};
console.log(text(strings, n));
const result = [ ] ;
구해진 값을 담을 수 있는 빈배열을 준비 해야한다.
strings[sun] = strings[sun][u] + strings[sun];
=usun / ebed / acar
하나의 문자에서 1번째 값을 찾아 각 문자의 맨앞에 추가
sort함수는 배열을 순서대로 정렬해준다.
= strings.sort( acar / ebed / usun );
for (let i = 0; i < strings.length; i++) { strings[i] = strings[i].replace(strings[i][0], ""); result.push(strings[i]);
풀어서 써보면, strings[usun] = strings[usun].replace(strings[usun][u], "sun");
=sun / bed /sun
딱 처음 for문 까지만 작성을 했다.
아무리 구글링을 하더라도 원하는 답을 찾지 못했다
구글링도 부족하다 🥲🤨
용어
**구조분해할당:
=배열을 나눠서 변수에 값을 할당하는 것
'TIL' 카테고리의 다른 글
2024. 01. 07 TMDB API 연동 프로젝트 코드 설명해 보기! (0) | 2024.01.07 |
---|---|
2024.01.06 Callback, Promise (0) | 2024.01.06 |
2024.01.05 TMDB API 연결하기 (0) | 2024.01.05 |
2024. 01. 04 Class & Closures (0) | 2024.01.04 |
2024. 01. 03 This & Sort (0) | 2024.01.03 |
- Total
- Today
- Yesterday
- 유효성검사
- readme 작성 방법
- axios CRUD
- axiosinstance 사용 시 토큰 사용 법
- styled component 사용방법
- styled component 조건부 사용방법
- readme 이미지 추가 방법
- 유효성검사 css
- styled component 설치방법
- 영화 별점
- simple Icon 사용방법
- 별점만들기
- axios 설치하기
- 별점 색채우기
- 영화별점만들기
- Fetch와 Axios 의 장단점
- Warning: validateDOMNesting(...): <li> cannot appear as a descendant of <li>
- readme 작성해야 하는 이유
- 에러모음집
- nextjs 토큰 만료처리하기
- axios instance 작성하기
- git cache
- Warning: A component is changing an uncontrolled input to be controlled.
- readme작성해보기
- styled component GlobalStyle 사용방법
- readme 역할
- axios 사용하기
- Warning: Each child in a list should have a unique "key" prop.
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |