- Arrow Function '=>' : 값 전달, 리턴 가능(함수이름 따로 정의하지 않음)
const a= function(){ //함수표현식
console.log("hello world")
}
a();
const b=() =>{
alert("good morning")
}
b();
const c = () => console.log("good evening")
c()
//함수선언식 function f() { ~~
- forEach
: Array.forEach(Callback함수)
//각 요소에서 양수와 음수 구분해서 넣기
const array = [-5,3,4,2,-7,-2,7];
const mminus = [];
const pplus = new Array();
array.forEach(element => {
if(element>0) pplus.push(element);
else mminus.push(element);
})
console.log(pplus);
console.log(mminus);
- find
: 배열을 순회하면서 조건에 해당되는 "첫번째 값"을 찾는다
- find index
: 배열을 순회하면서 조건에 해당되는 "첫번째 인덱스"을 찾는다
const chicken = [
{ name: "머리", quantity: 1 },
{ name: "날개", quantity: 2},
{ name: "닭다리", quantity: 2},
{ name: "닭가슴살", quantity: 1},
{ name: "닭발", quantity: 2},
]
console.log(chicken.find(element => element.name==="닭다리"));
console.log(chicken.findIndex(element => element.name==="닭발"))
//배열의 정의 = "같은 자료형들의 연속된"
//객체의 정의 = "키:값으로 이루어진 다양한 자료형들의 집합" (일반 자료형, 객체형)
//->배열안의 객체
- map((요소, index))
: 배열의 요소를 하나씩 탐색하며 Callback함수의 return값을 Array로 새롭게 만든다
-> forEach는 값반환, map은 배열반환
const array = [1,2,3,4,5];
const result =array.map(e => e*e);
console.log(result);
const array2 = ['a','bcd','ef','g'];
const length = array2.map(e => e.length);
console.log(length);
- filter((요소, index))
: 배열에서 특정 조건을 만족하는 값들만 따로 추출(map이랑 동시사용 가능)
const bucketlist=[
{ id:1, text: "여행", done: false},
{ id:2, text: "치킨먹기", done: true},
{ id:3, text: "알고리즘", done: true},
{ id:4, text: "운동하기", done: false}
];
const Array=bucketlist.filter( element => element.done==true);
const Array2=bucketlist.filter( element => !element.done);
console.log(Array);
console.log(Array2);
- reduce
: 첫번째 인자는 결과값/ 두번째 인자는 현재값
js에서 "함수 호출 방식"에 따라 this 바인딩이 결정된다
화살표함수와 일반함수의 this바인딩은 다르다
1. (일반)함수 호출 -> 전역객체(브라우저 = widow node => global에 바인딩 )
2. 메서드 호출 -> 메서드를 소유한 객체
forEach/ map 구분점
- 단순 작업만 할경우 forEach
- 작업에 이어서 배열을 원하면 map
map filter / reduce
'WEB > Javascript' 카테고리의 다른 글
[21.08.11] 비동기 프로그래밍2 (0) | 2021.08.11 |
---|---|
[21.07.22]Google페이지 만들기 (0) | 2021.07.22 |
[21.07.21] Javascript 실습 - 영화 정보 수집 (0) | 2021.07.21 |
[21.07.20] Javascript기본 (0) | 2021.07.21 |