- 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

+ Recent posts