[4주차] 보충반 특강1 : 함수, 반복문(for, forEach), 배열메소드(map, filter, find)

함수

// 1. 인자를 3개 받아서, 모든 값을 더해서 출력하는 함수 (출력=>return)
var fun01 = function (a, b, c) {
  return a + b + c;
}

var fun01 = function (a, b, c) {
  const result = a + b + c;
  return result;
}

// 사용방법
fun09(1,1,1); // 출력이 안된다.
console.log(func01(1, 1, 1)); //출력



// 2. 인자를 2개 받아서 모든 값을 곱해서 출력하는 함수
var fun02 = function (d, e) {
  return d * e;
}

// 사용방법
fun02(2, 4); // 8
console.log(fun02(2,4));// 출력


// 3. 인자를 4개 받아서 console.log에 합을 출력하고 아웃풋은 없는 함수
var fun03 = function (f, g, h, i) {
  console.log(f + g + h +i); // 네개를 넣었는데 아무것도 안줌.
}

fun03(1, 1, 1, 1); //

// 일반함수 ->화살표함수
var fun01 = function (a,b){
  return a + b;
}

var fun02 = (a, b) => {
  return a + b;
}  // function 키워드가 화살표로 전환됨 


fetch("https://www~")
.then(res => res.json())
.then(res2 => console.log(res2));

// 위에 식을 풀어보면 아래처럼
.then(function(res2){
    console.log(res2);
})

// 숫자 두개를 입력 받아서 콘솔로그로 두수의 합을 출력(console)해주고 두수의 곱을 리턴해주는 함수, 함수이름은 testFunc

const testFunc = function (a, b) {
  console.log(a + b);
  return a * b ;
}

var result = testFunc(2, 3);
console.log(result); // 5가 아닌 6이다!!!!

---

반복문 for

// 반복문
for(let a=0; a<5; a){ // 무한루프이다. 

}

// 다음예제
for(let a=0; a<5; a=6){ // 총 1번 돈다. 

}

// 다음예제
for(let a=5; a<5; a){ // 총 0번 돈다. 

}

// 배열 요소를 하나씩 다 출력해라.

const arr = [1, 2, 3, 4, 5];

for(let i=0; i<5; i++){
  console.log(arr[i]);
}

// 위 반복문을 더 재사용성을 생각한다면?
// 5 이후에 더 데이터가 쌓이면 코드를 수정해야하기때문에..아래 arr.length를 더 많이 쓴다.

for(let i=0; i<arr.length; i++){
  console.log(arr[i]);
}

---

반복문 forEach

// 배열 메소드
const arr01 = [1, 4, 2, 3, 10, 15, 0];

//console.log로 모든 요소 출력
// For문 사용 금지


// foreach는 콜백함수를 인자로 받는다.
arr01.forEach(function(value, index){
  console.log(`value => ${value}`);
  console.log(`index => ${index}`);
  console.log(`=================`);
});

// value는 값, index는 index 번호
// 보통은 index 인자를 생략하고 코드를 쓴다.


arr01.forEach(function(item){

});

arr01.forEach((item) => {
  
})

// forEach 사용해서 값과 Index출력하라
const arr01 = [1, 4, 2, 3, 10, 15, 0];

arr01.forEach(function(item, index){
  console.log(item, index);
})

---

반복문 - 배열 메소드 filter

const arr01 = [1, 4, 2, 3, 10, 15, 0];

//arr01 에 요소중 5이상인 값을 이용해서 새로운 배열만들기

//filter 원본배열 요소에서 조건에 맞는 것만 뽑아서 새배열로 만드는 것

// arr01.filter(function(value, index){
//   //filter는 리턴값이 있다. 배열로 리턴한다.
//   console.log(value);
//   console.log(index);
// });




// const result = arr01.filter(function(value, index){
//   //filter는 리턴값이 있다. 배열로 리턴한다.
// });

// console.log("result", result); // result []





// const result = arr01.filter(function(value, index){
//   return true;
// });

// console.log("result", result); // result [
//    1,  4, 2, 3,
//   10, 15, 0
// ]





// const result = arr01.filter(function(value, index){
//   if (value >= 5) {
//     return true;
//   } else {
//     return false;
//   }
// });

// console.log("result", result); //result [ 10, 15 ]




// 가장 간단한 식으로는...

const result = arr01.filter(function(value, index){
  return value >= 5;
});

console.log("result", result); //result [ 10, 15 ]



// return이 한줄이면 화살표함수로 쓸수있다.

const result = arr01.filter((value) => value >=5){
  ...AbortController.
}

---

반복문 - 배열 메소드 find

// 홍길이 들어간 요소만 빼서 새배열로 만들기
const arr01 = ["홍길동", "홍길순", "옹길순"];

const result = arr01.filter(function(val, idx){
  if (val.includes("홍길")){
    return true;
  } else {
    return false;
  }
})

console.log(result);
// [ '홍길동', '홍길순' ]



//// 홍길을 포함하는 첫번째 요소를 출력해줘

const result2 = arr01.find(function(val){
  if (val.includes("홍길")){
    return true;
  } else {
    return false;
  }
})

console.log(result2);
// 홍길동

---

반복문 - 배열 메소드 map

// map
//

const arr01 = [1, 2, 5, 10, 4];

// const result = arr01.map(function(value, index){
//   console.log(value);
//   console.log(index);
//   return 1;
// });

// // filter와 map 의 공통점은 새로운 배열을 출력한다.
// console.log(result); //[ undefined, undefined, undefined, undefined, undefined ]
// // 배열의 개수만큼 어떤것이라도 일단 할당이되어 있다.



// const result = arr01.map(function(value, index){
//   console.log(value);
//   console.log(index);
//   return 1;
// });

// console.log(result); //[ 1, 1, 1, 1, 1 ]
// // map은 배열의 요소의 개수만큼 그 값에 가공하여 새배열에 내뱉는다.



const result = arr01.map(function(value, index){
  return {
    key : index,
    value: value *2
  };
});

console.log(result);

// [
//   { key: 0, value: 2 },
//   { key: 1, value: 4 },
//   { key: 2, value: 10 },
//   { key: 3, value: 20 },
//   { key: 4, value: 8 }
// ]

const arr = [1, 2, 5, 10, 4];

// arr안에 있는 요소를 2배씩 한 당므에
// 5이상인 애들만 필터링 해서 새로운 배열로 만들기

const result = arr.map(function(value){
  return value *2;
});

const result2 = result.filter(function(value){
  return value >= 5;
})

//위 두개의 식을 아래처럼 하기

const result = arr.map(function(value){
  return value *2;
}).filter(function(value){
  return value >=5;
});


// forEach는 결과가 없음

const result = arr.map(function(value){
  return value *2;
}).filter(function(value){
  return value >=5;
}).forEach(function(value){
  console.log(value);
})

// 10 
// 20
// 8

---

 

[4주차] 보충반 특강2 : 비동기, 동기 (fetch~then, async~await, try~catch~finally)