TIL - 220916

22.09.16 금요일

📝 javascript-32 : 배열메서드

💬 한마디

이해하는데 오래걸렸다.
생성자함수를 선언해서 함수안에 다시 생성자함수를 호출해서 쓰려고 했던 부분이 잘 이해가 안갔다.
물어보고 이해한대로 주석을 달아봤다.

✏️ .push() : 배열의 끝에 하나 이상의 요소를 추가하고, 배열을 반환

let arr = [1,2,3];
arr.push(4,5,6);

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

✏️ .filter() : 주어진 함수와 일치하는 값만 '새로운 배열' 반환

arr = [1,2,3,4,5,6]
arr2 = arr.filter(element => element > 2);

console.log(arr2) 
// [3,4,5,6]

✏️.forEach() : for문을 대체할 수 있는 고차함수, 자실을 호출한 배열을 순회하면서 요소값, 인덱스, 베열을 순차적으로 전달

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

let arr = [1,2,3];
let arrTwo = [];
for(let i = 0; i< arr.length; i++){
  arrTwo.push(arr[i]);
}
// for 반복문


arr.forEach(function(items){
  arrTwo.push(items);
});
// for 대신 forEach()

console.log(arrTwo);
// [ 1, 2, 3 ]

let arr = [1,2,3];
let arrTwo = [];
arr.forEach(function(items){
  arrTwo.push(items);
});

arr.forEach(items => arrTwo.push(items))
// forEach() 화살표함수

console.log(arrTwo);
// [ 1, 2, 3 ]

📝 javascript-33: 배열

✏️키워드

1.map() 배열메서드의 효용
2.메서드체인
3.화살표함수(arrow function)가 가지고 있는 리턴 결정방식
4.축약형 자바스크립트 작성

✏️ .map() : 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출해 결과를 모아 새로운 배열로 반환

let arr = [1,2,3];
let arr2 = arr.map(item => item+1);
console.log(arr2)
// [ 2, 3, 4 ]

✏️ .forEach() vs .map()

.forEach() - 리턴값이 없어서 따로 리턴값을 주어야한다.
.map() - 새로운 배열로 반환

let arr = [1,2,3];
let arr2 = arr.map(item => item+1);

let arr3 = [];
arr.forEach(item => arr3.push(item+1));
 
console.log(arr2) // [ 2, 3, 4 ]
console.log(arr3) // [ 2, 3, 4 ]

✏️ .join() : 배열의 모든 요소를 연결해 하나의 문자열로 만들어준다. 구분자로 연결을 해서 반환

let arr = [1,2,3];
console.log(arr.join()); // 1,2,3
console.log(arr.join('')); // 123
console.log(arr.join('-')); // 1-2-3

📝 javascript-34: 배열메서드

polifill : 기본적으로 지원하지 않는 이전 브라우저에서 최신 기능을 제공하는데 필요한 코드

아래 코드는 indexOf() 배열메서드의 원형

✏️ indexOf() :

const str = "abcdefg"
console.log(str.indexOf("c")) // 2

📝 javascript-35 : setTimeout() 함수

✏️ setTimeout()

setTimeout(()=>console.log('hi'),1000);
// 1초 후에 콜백 함수 호출 
// 1초 후에 콘솔에 hi가 출력된다.

setTimeout(name => console.log(`hi! ${name}`),1000,'lee')
// 1초후에 hi! + 인자(lee) 가 출력

1000ms --> 1초

✏️ setInterval()

let count = 1;
const timeoutId = setInterval(()=>{console.log(count);
  if (count++ === 5) clearInterval(timeoutId);
},1000);

// * 1초 후 타이머가 만료될 때마다 콜백 함수가 호출
// * setInterval 함수는 생성된 타이머를 식별 할 수있는 고유한 타이머 id를 반환
// * count가 5이면, setInterval 함수가 반홚나 타이머 id를 clearInterval 함수의 인수로 전달하여
// * 타이머를 취소한다. 타이머가 취소되면 setInterval 함수의 콜백 함수가 실행되지 않는다.