2024.01.08 TIL - 배열 메소드, prettier 설치

📘 오늘의 공부

• 배열 메소드 정리

배열

• 여러 값을 하나의 변수에 지정할 수 있게 해줌
• 목록 관리할때 유용함(ex. todo list, 상품목록)

배열 메소드

• const arr2 = new Array(1,2,3); 와
  const arr = [1,2,3]; 는 같음

• 기존 배열의 마지막에 요소 추가 : 배열이름.push(‘요소이름’);

• 기존 배열에서 요소 빼기 : 배열이름.pop(); -> 마지막 요소가 제거됨

• 기존 배열 첫번째에 요소 넣기 : 배열이름.unshift(‘요소이름’);

• 기존 배열 첫번째 요소 빼기 : 배열이름.shift();

• 기존 배열의 가운데 요소 제거 + 새로운 요소 추가
  : 배열이름.splice(몇번째, 몇개, ’새 요소’);

• 배열의 각 요소에 2를 곱한 배열 만들기
  : 배열이름.map(콜백함수(요소) {
  return 요소 *2;
  });

• 짝수만 냅두고 없애기
  : 배열이름.filter(function(요소) {
  return 요소 % 2 === 0
  });

• 중간 일부 요소만 자르기
  : 배열이름.slice(시작부분, 끝부분+1);
  (선택한 영역의 마지막 index는 포함하지 않음!)

• 2개 배열을 합쳐서 연결하기
  : 배열이름.concat([‘요소’, ‘요소2’]);

• 배열의 요소 모두 더하기
  : 배열이름.reduce(); ???

• 배열에서 짝수 첫번째 요소 구하기
  : 배열이름.find((요소) => {
  return 요소 % 2 === 0;
  }

• 배열 짝수 요소 있으면 true, 없으면 false 반환
  (하나라도 짝수 있으면 true)
  : 배열이름.some((요소) => 요소 % 2 === 0);

• 모든 요소가 짝수이면 true
  : 배열이름.every((요소) => 요소 % 2===0);

• 바나나 요소 있으면 true, 없으면 false
  : 배열이름.include(‘찾는 요소’);

• 특정 요소의 index 구하기
  : 배열이름.indexOf(‘찾는 요소’);

• 중복되는 요소의 마지막 요소 index 구하기
  : 배열이름.lastIndexOf(‘찾는 요소’);

• 각 요소 출력하기
  : 배열.forEach((요소) => console.log(요소));

** query selector(‘#’)와 getElementById(‘’)는 구별없이 사용 가능!

prettier 설치

• vscode 확장 프로그램에서 prettier 설치
• prettier - code formatter
• 설치 단계
  1) cmd + ,(콤마)
  2) Setting.json 파일 접근(1번의 단축키 + 오른쪽 위 첫번째 버튼)
  3) 해당 코드 붙여 넣기
  (기존에 있던 코드의 {} 안에 넣어주면 됨)

// settings.json 에 아래 코드 삽입 시 html 파일에서도 프리티어 동작
"editor.formatOnSave": true,
"[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
"[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
"[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }