2022.08.08(월)

기록적인 폭우로 인하여 수도권 및 경기도에 엄청난 폭우가 내렸다.
그론 인해서 많은 곳이 침수 당해 피해를 생겼다.
예전에 태풍으로 인해 루사, 매미… 많은 이재민이 발생 되었다.

동작역은 잠겨도 퇴근시간부터 운행을 못했고, 다음날까지 이어졌다.
강남역도 마찬가지이며, 반포, 강남쪽에는 침수되는 차가 많이 나왔다.
위에 사진들은 그날 실시간으로 올라왔던 사진들이였다.
폭우말고는 특별한게 없었…을거 같았으나 프론트엔드 개발(Vue.js)을 하면서 많은 어려움이 생겼다.

프론트엔드 개발(ES6)

마크업 개발을 하다가 프론트엔드 개발을 하려 많은 어려움이 있다.
나이가 들어서 그런건지 몰라도 이해가 더욱 안되고 있는 부분도 있었다.

자바스크립트 메서드들을 검색을 하게 되었고 … 그 와중에 이번 주에 많이 사용했던 것을 기록하려고 한다.

먼저 금주에 사용한 메서드들은 아래와 같다.

  • Array.prototype.forEach()
  • Array.prototype.filter()
  • Array.prototype.map()
  • Array.prototype.concat()
  • Array.prototype.push()
  • Array.prototype.includes()

많이 쓴 메서드들은 forEach, filter, includes였다.

Array.prototype.forEach()

– 주어진 함수를 배열 요소 각각에 대해 실행한다.

const array1 = ['가', '나', '다', '라'];
array1.forEach(element => console.log(element));

구문

arr.forEach(callback(currentvalue[, index[, array]])[, thisArg])

반환값

undefined

설명

주어진 callback을 배열에 있는 각 요소에 대해 오름차순으로 한번씩 실행한다. 초기화하지 않거나 삭제한 인덱스 속성 대해서는 실행하지 않는다.

for 반복문을 forEach()로 바꾸기

const items = ['item1', 'item2', 'item3'];
const copy = [];

// 이전
for (let i=0; i < items.length; i++) {
  copy.push(items[i]);
}

// 이후
items.forEach(function(item){
  copy.push(item);
});

그 외 자세한 내용은 아래 링크에서 보면 된다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

Array.prototype.filter()

여러 데이터 중에 원하는 데이터만 찾고 싶다면 filter를 사용하면 된다.
주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열을 반환한다.

구문

arr.filter(callback(element[, index[, array]])[, thisArg])

arr: 순회하고자 하는 배열
element: 현재 배열의 요소

  • 값이 존재하는 것에만 인덱스 대해서만 값 호출
  • 기존 배열의 값을 변경하지 않는다.

Array.prototype.includes()

– 배열이 특정 요소를 포함하고 있는지 판별한다.

const array1 = [1, 2, 3];

console.log(array1.includes(2));
// 예상 출력: true

const pets = ['cat', 'dog', 'bat'];

console.log(pets.includes('cat'));
// 예상 출력: true

console.log(pets.includes('at'));
// 예상 출력: false

구문

arr.includes(valueToFind[, fromIndex])

매개변수

valueToFind: 탐색할 요소이며, 문자나 문자열을 비교할 때, 대소문자를 구분 한다.
fromIndex: 기본 값은 0이며, 이 배열에서 검색 요소를 시작할 위치이다. 음의 값은 array.length + fromIndex의 인덱스를 오름차순으로 검색한다.

예제

크롬 브라우저에서 실행해보았다.

지원 브라우저

IE에서는 Edge부터 지원한다.

참고 사이트

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array