[JS 문법] 함수, 배열 메서드(filter, find, map, forEach)

Habin Lee·2023년 10월 26일
3

요약

  • 함수 사용법과 배열 메서드를 사용할 수 있다.

함수

  • 함수는 input과 output을 가지고 있다.
  • 함수의 기본 골격은 무조건 외우자.
  • 함수는 호출(사용)해야 실행이 된다.

함수 선언문

function 함수이름(인풋값) {
  return 아웃풋
    };

function add(x, y) {
  return x + y;
};

함수 표현식

let 함수이름 = function(인풋값) {
  return 아웃풋
};

let add = function (x, y) {
  return x + y;
};

함수 호출

함수이름(인풋값에 들어가는 입력 값)
	// ex
	add(2, 3);
	// console.log로 찍기
	console.log(add(2, 3));

let result = 함수이름(인풋값에 들어가는 입력 값)
	// ex
	let result = add(2, 3);
	// console.log로 찍기
	console.log(result);

화살표 함수

기본 화살표 함수

let 함수이름 = (입력값) => {
  return 아웃풋
	// ex
 	let add = (x, y) => {
    return x + y;
    }

한 줄로 된 화살표 함수

  • return문이 한 줄일 경우에 {return} 생략 가능
let 함수이름 = (입력값) => 아웃풋;
	// ex
	let add = (x, y) => x + y

매개변수가 하나인 화살표 함수

let 함수이름 = 입력값(1) => 아웃풋;
	// ex
	let square = x => x * x;

배열(Array)

  • 배열을 사용하여 여러 개의 값을 저장하고 관리할 수 있다.
  • 배열은 [ ] 대괄호 안에 들어간다.
let fruits = ["딸기", "포도", "키위"];

배열 메서드

  • 배열 메서드는 배열에서만 사용할 수 있다.
  • 배열 뒤에 .을 붙여서 사용할 수 있다.
  • 함수와 달리 배열이라는 호출 주체가 있다.
  • 배열 메서드에는 콜백함수가 꼭 들어가야한다.

filter

  • 주어진 배열 일부에 대한 얕은 복사본을 생성하고 필터링해서 배열로 나온다.
  • filter로 걸러진 값이 없을 경우 빈 배열로 나온다.
fruits.filter(function(이름-요소를 뜻하는 element를 많이 사용함,index-생략가능){
  // 조건문을 많이 사용함
  if (조건) return 이름 // -> 이 조건에 해당하는 x를 반환하고
  else if (조건) return 이름 // -> 그렇지 않다면 이 조건에 해당하는 x를 반환하라
  );
// 화살표 함수 ex
arr = [1, 2, 3, 4];
arr.filter((x) => {
  if ( x < 3 ) return x
  else if (x === 4) return x
})
  // [1, 2, 4]

find

  • filter처럼 특정 조건에 맞는 값이 걸러지지만 그 걸러진 값 중 가장 첫번째 값을 반환한다.
  • 특정 조건에 맞는 요소가 없으면 undefined가 반환된다.
  • 특정 조건에 맞는 요소 하나만 반환되기 때문에 find 결과값에는 배열 메서드를 사용할 수 없다.
  • 그러나 find 메서드를 [ ] 대괄호로 묶으면 배열로 인식하여 배열 메서드가 사용 가능하다.
fruits.filter(function(이름-요소를 뜻하는 element를 많이 사용함,index-생략가능){
  // 조건문을 많이 사용함 ex
  if (조건) return x

map

  • 배열 내의 모든 요소 하나하나에 접근해서 주어진 함수를 호출한 결과를 모아 새로운 배열로 반환한다.
  • 걸러진 값이 없을 경우 배열의 인덱스 갯수만큼 undefined가 배열로 찍혀나온다.
arr.map(function(x) {
  return x * 2
};

// 화살표 함수 ex
arr = [1, 2, 3, 4];
const map1 = arr.map((x) => x * 2);
console.log(map1);
// map1 = [2, 4, 6, 8]

forEach

  • 각 배열이 요소에 대해 제공된 함수를 한 번씩 실행한다.
  • filter, find, map 과 다르게 반환값이 없다.
  • 반환값이 없기 때문에 체이닝할 수 없다.
arr.forEach(function (element) {
  console.log(element);
});
// 화살표 함수 ex
arr.forEach((element) => console.log(element));

느낀 점

JavaScript를 공부하면서도 함수나 배열 메서드를 어떻게 사용하는지 못해서 답답했는데, 특강을 들으면서 함수와 배열 메서드를 어떻게 사용하는지 알게 됐다. 사실 이 함수와 메서드를 어떻게 활용해야 할지는 아직 생각나는게 없지만 함수 사용을 자유롭게 하고, 적재적소에 사용할 수 있도록 많이 적는 연습을 해야할 필요성을 느꼈다.

2개의 댓글

comment-user-thumbnail
2023년 10월 26일

벌써부터 체이닝에대해서 아시다니.... 정말 실력이 대단하세요..!!! 화이팅 입니다

1개의 답글