2022.10.14 TIL( 내장함수 정리)

코드를 작성할 때 팁 : 유저플로우대로 생각을 해나가면서 시작을 해봐라, console은 return문 전에 찍어야 값이 보인다. 원하는 값 위에 찍으면 안보인다. 값이 넘겨지면 넘겨진 곳에 리턴문 전에 찍어야한다. map같은 함수 안에 콘솔을 찍으려면 중괄호랑 리턴이 있는 형태로 만들어야 하고 리턴 전에 설정한 인자 값을 콘솔에 찍으면 된다.

//index.js

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);
//store를 전역에서 사용할 수 있게 만들어줌

// configStore.js

import { createStore } from "redux";
import { combineReducers } from "redux";
import todos from "../modules/todos.js";

const rootReducer = combineReducers({
  todos,
});
const store = createStore(rootReducer);

export default store;

store에 todos라는 리듀서 값을 저장시켜 전역으로 사용할 수 있게 만들어줌

  const todos = useSelector((state) => state);
  // state에 저장한 모든 값을 가져옴. useSelector을 쓸때는 어떤 값을 가져오는지 눈으로 확인해가면서 쓰는게 좋음. 그래서 어떤 값이 들어오는지 console을 통해 계속 확인해가면서 쓰면 이해하기 쉽다. =>
  const todos = useSelector((state) => state.todos);

// action creator함수는 액션을 만들어서 reducer의 액션에 들어가게됨
export const deleteTodo = (payload) => {
  console.log(payload)
  return {
    type: DELETE_TODO,
    payload,
  };
};

//actoin creator의 payload 라는 인자값은 onOOO같은 함수의 인자값이 넘어오는 것

onClick={() => onToggleStatusTodo(todo.id)
//버튼을 누를때만 함수가 실행
onClick={onToggleStatusTodo)
// 온클릭이 그냥 실행

// 화살표 함수

const a = () => 
// 값을 바로 리턴시키겠다
const a = () => {return}
//뒤에 중괄호가 들어오면 리턴을 따로 써줘야한다

배열 내장함수

forEach

for문을 대체할 수 있다.

const arr = ['a','b','c']

arr.forEach(alph => {
	console.log(alhp)
});

map

배열 안의 각 원소를 변환할 때 사용되며 이 과정에서 새로운 배열이 만들어진다.

const arr1 = [1, 2, 3, 4, 5, 6, 7, 8];

const arr2 = [];
for (let i = 0; i < arr1.length; i++) {
  arr2.push(arr1[i] * arr1[i]);
}

console.log(arr2); // [1, 4, 9, 16, 25, 36, 49, 64];

이런 형태의 for문을

const arr1 = [1, 2, 3, 4, 5, 6, 7, 8];

const arr2= arr1.map(n => n * n);
console.log(arr2); //[1, 4, 9, 16, 25, 36, 49, 64];

이렇게 바꿔줄 수 있다.

filter

배열에서 특정 조건을 만족하는 값들만 따로 추출해서 새로운 배열을 생성

const todos = [
  {
    id: 1,
    text: '자바스크립트 입문',
    done: true
  },
  {
    id: 2,
    text: '함수 배우기',
    done: true
  },
  {
    id: 3,
    text: '객체와 배열 배우기',
    done: true
  },
  {
    id: 4,
    text: '배열 내장함수 배우기',
    done: false
  }
];
const NotDone = todos.filter(todo => !todo.done);
console.log(NotDone); 

//[{id: 4,text: '배열 내장 함수 배우기',done: false}];

indexOf

배열 안의 값이 숫자, 문자열, 불리언이라면 찾고자 하는 항목이 몇 번째 원소인지 찾아주는 함수

const alph = ['a', 'b', 'c', 'd']
const i = alph.indexOf('a')
console.log(i); //0

findIndex

배열 안에 있는 값이 객체이거나 배열이라면 indexOf로 찾을 수 없다. 이때 사용

const todos = [
  {
    id: 1,
    text: '자바스크립트 입문',
    done: true
  },
  {
    id: 2,
    text: '함수 배우기',
    done: true
  },
  {
    id: 3,
    text: '객체와 배열 배우기',
    done: true
  },
  {
    id: 4,
    text: '배열 내장함수 배우기',
    done: false
  }
];

const index = todos.findIndex(todo => todo.id === 3);
console.log(index); //2

find

찾아낸 값 자체를 반환

const todos = [
  {
    id: 1,
    text: '자바스크립트 입문',
    done: true
  },
  {
    id: 2,
    text: '함수 배우기',
    done: true
  },
  {
    id: 3,
    text: '객체와 배열 배우기',
    done: true
  },
  {
    id: 4,
    text: '배열 내장함수 배우기',
    done: false
  }
];

const todo = todos.find(todo => todo.id === 3);
console.log(todo); //{id: 3, text: "객체와 배열 배우기", done: true}

splice

배열에서 특정 항목을 제거하거나 새 요소를 추가할 때 사용

const num = [1,2,3,4]
const spliceNum = num.splice(1,0,5)
console.log(num) = [1,5,2,3,4]
const deleteNum = num.splice(4,1,6)
console.log(num) = [1,5,2,3,6]

slice

배열을 잘라낼 때 사용하는데 기존의 배열은 건들지 않는다.

const num = [10, 20, 30, 40];
const sliceNum = num.slice(0, 2);
console.log(sliceNum); // [10, 20]

concat

여러개의 배열을 하나로 합쳐준다

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const concatArr = arr1.concat(arr2);

console.log(concatArr); //[1, 2, 3, 4, 5, 6];

join

배열 안의 값들을 문자열 형태로 합친다.

const array = [1, 2, 3, 4, 5];
console.log(array.join()); // 1,2,3,4,5
console.log(array.join(' ')); // 1 2 3 4 5
console.log(array.join(', ')); // 1, 2, 3, 4, 5

reduce

배열의 각 요소에 대해 callback을 실행하며 단 1개의 출력 결과를 만든다. 배열 원소들의 전체 합을 구하거나 최대값을 구할 수도 있고 배열을 펼치거나 배열 원소들의 개수를 셀 수도 있다.

array.reduce(callback(accumulator, currentValue[, index[, array]] )[, initialValue])

shift와 pop

shift는 첫번째 원소를 배열에서 추출

const num = [10, 20, 30, 40];
const value = num.shift();
console.log(value); //[20, 30, 40]

pop은 마지막 원소를 배열에서 추출

const num = [10, 20, 30, 40];
const value = num.pop();
console.log(value); //[10, 20, 30]

unshift와 push

unshift는 맨 앞에 새 원소 추가

push는 맨 뒤에 새 원소 추가