4. 배열, 객체, 함수 advanced

4-1. 함수 표현식과 화살표 함수

함수 표현식

• 함수를 나타낼 수 있는 건 2가지가 있다. 둘의 차이를 알아보자.

1. 함수 선언문(정의문)

• 아래와 같은 형식으로 함수를 정의하면 함수 선언문
• 호이스팅 O (나중에 선언가능)

function add(n1, n2) {
  return n1 + n2;
}

2. 함수 표현식

• 아래처럼 익명함수를 이용해서 함수를 마치 변수의 형태처럼 만들어서 사용하는 것이 함수 표현식
• 값이므로 끝에 ; 세미콜론을 붙임
• 호이스팅 X (나중에 선언불가)

// 익명 함수 : 함수를 값(리터럴)으로 본 경우
const multiply = function(n1 ,n2) {
  return n1 * n2;
};

함수

• 함수도 하나의 데이터이고 값이다.
• 함수를 변수에 넣어서 그 변수의 이름으로도 함수 사용가능

function add(n1, n2) {
  return n1 + n2;
}

const r1 = add(10, 30);
console.log(`r1: ${r1}`);

const plus = add; // plus라는 변수에 함수를 저장해서 plus로 함수 사용가능

// 함수도 하나의 데이터이고 값이다.
console.log(typeof plus); // function

const r2 = plus(5, 8);
console.log(`r2: ${r2}`);

• 배열, 객체에서도 뽑아서 사용가능
  -> array[6](7, 9); 이런 형태도 가능
• array[7](); // 함수여서 ()로 함수 호출!!

const array = [
  10, 'zzz', true, [],
  {}, add, multiply, function() {console.log('zzz');}
];

const r4 = array[6](7, 9);
console.log(r4);

array[7](); // 함수여서 ()로 함수 호출!!
array[7]();
array[7]();

console.log('===========================');

const dog = {
  name: '초코',
  age: 3,
  favorite: ['산책', '낮잠'],
  // 메서드: 객체의 전용함수 (객체의 기능을 표현)
  play: function (tool) {
    console.log(`${this.name} 강아지는 ${tool} 장난감으로 놀아요~`);
  }
};

const cat = {
  name: '야옹이',
  sleep: function() {
    console.log('쿨쿨쿨~~~');
  }
}

dog.play('개껌');

const arr = {
  0: 'zzz',
  1: 'fgsdf',
  2: 'dfsdf',
  length: 3,
  indexOf: function() {},
  slice: function () {},
  push: function () {},
};

const arr2 = [];
console.log(typeof arr2);

화살표 함수

• ES6부터는 더 간편한 방법으로 함수를 만드는 화살표 함수 문법이 되었다.

// 함수 선언문 방식
function add(n1, n2) {
	return n1 + n2;
}

// 함수 표현식 방식
const add = function(n1, n2) {
	return n1 + n2;
};

// 화살표 함수 방식
const add = (n1, n2) => {
	return n1 + n2;
};

• 화살표 함수의 특징
  • 코드가 한 줄이면 중괄호{} 생략 가능, return 생략 가능
  • 파라미터가 1개면 소괄호 생략 가능! 단, 파라미터가 없거나 2개 이상일 경우는 소괄호가 필요

// 동일
const pow = (n) => {
  return n**2;
}
// 중괄호, return, 소괄호 생략
const pow = n => n**2;

콜백 함수 (Call back)

• 함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수를 콜백 함수
• 주로 필터링, 매핑에 많이 쓰임 (filter, map 메서드는 이미 있기 때문에 원리는 콜백함수이지만 실제로는 filter, map 메서드만 잘 사용할 줄 알면됨)
• 콜백 기초

// 2. param에 이름이 없는 함수가 들어감
function operate(param) { 
  // console.log(`param: ${param}`);

  // console.log('계산기 작동!!');
  // 3. param에 들어간 이름이 없는 함수의 파라미터들을 활용하여 대입
  const result = param(10, 20);
  return result;
}

// 1. operate 호출 -> 이름이 없는 함수 전달
const result = operate(function(n1, n2) {
  return n1 - n2; // 내 입맛대로 커스텀 가능
}
  );

  console.log(`result: ${result}`);

콜백함수 문제1

const userList = [
  {
    account: "abc1234",
    userName: "대길이",
    job: "추노",
    address: "서울",
    hobbys: ["수영", "축구", "테니스"],
    salary: 5400000,
    age: 35,
  },
  {
    account: "banana",
    userName: "빠나나",
    job: "과일",
    address: "서울",
    hobbys: ["푸드파이팅", "테니스"],
    salary: 2700000,
    age: 18,
  },
  {
    account: "park1234",
    userName: "주차왕",
    job: "발렛파킹",
    address: "경기",
    hobbys: ["족구", "축구", "테니스", "영화감상"],
    salary: 3900000,
    age: 56,
  },
  {
    account: "fire",
    userName: "불꽃남자카리스마",
    job: "게이머",
    address: "서울",
    hobbys: ["독서", "테니스"],
    salary: 7900000,
    age: 42,
  },
];

// 조건을 콜백함수해서 필터링하는 함수
function filter(array, condition) {
  const filteredArray = []; // 필터링된 회원들을 다시 담을 배열
  for (const user of array) {
    if (condition(user)) {
      filteredArray.push(user);
    }
  }
  return filteredArray;
}

// 배열에 push되는 요소들을 콜백함수해서 원하는 것을 매핑하는 함수
function map(array, callback) {
  const mappedArray = [];
  for (const user of array) {
    mappedArray.push(callback(user));
  }
  return mappedArray;
}

console.log('=========================');


// 회원정보에서 회원의 이름들만 다 추출해서
// 배열에 담아줘
const nameList = map(userList, user => user.userName);
console.log(nameList);

// 회원정보에서 회원의 주소들만 다 추출해서
// 배열에 담아줘
const addressList = map(userList, user => user.address);
console.log(addressList);

// 회원의 첫번째 취미들만 다 추출해줘
const firstHobbyList = map(userList, user => user.hobbys[0]);
console.log(firstHobbyList);

// 모든 회원의 이름과 계정을 연결해서 배열에 담아줘
// [ 대길이(abc1234), 빠나나(banana), ... ]
const myCustomList = map(userList, user => `${user.userName}(${user.account})`);
console.log(myCustomList);

console.log('==================================');

// 서울에 사는 급여가 400만원보다 높은 사람의 이름과 주소만 추출해줘
// 서울에 사는 급여가 400만원보다 높은 사람 - filter
// 이름과 주소만 - mapping
const filtered = filter(userList, user => user.address === '서울' && user.salary > 4000000);
console.log(filtered);

const mapped = map(filtered, user => {
  return {
    name: user.userName,
    addr: user.address
  }
});
console.log(mapped);

콜백함수 문제2

const userList = [
  {
    account: 'abc1234',
    userName: '대길이',
    job: '추노',
    address: '서울',
    hobbys: ['수영', '축구', '테니스'],
    salary: 5400000,
    age: 35,
  },
  {
    account: 'banana',
    userName: '빠나나',
    job: '과일',
    address: '서울',
    hobbys: ['푸드파이팅', '테니스'],
    salary: 9700000,
    age: 18,
  },
  {
    account: 'park1234',
    userName: '주차왕',
    job: '발렛파킹',
    address: '경기',
    hobbys: ['족구', '축구', '테니스', '영화감상'],
    salary: 3900000,
    age: 56,
  },
  {
    account: 'fire',
    userName: '불꽃남자카리스마',
    job: '게이머',
    address: '서울',
    hobbys: ['독서', '테니스'],
    salary: 7900000,
    age: 42,
  },
];

function min(userList, key) {
  let minNumIndex  = 0;
  for(let i = 0; i < userList.length; i++) {
    let minimum = userList[0][key]; // 기준
    if(minimum > userList[i][key]) {
      minimum = userList[i][key];
      minNumIndex = i;
    }
  }
  return userList[minNumIndex];
}

// '' 안에 들어있으므로 []안에 key를 넣어야함
console.log('최소 salary를 가진 사용자:', min(userList, 'salary'));
console.log('최소 age를 가진 사용자:', min(userList, 'age'));


function find(condition) {
  for (var user of userList) {
    if (condition(user)) {
      return user;
    }
  }
  return null;
}

function some(condition) {
  for (var user of userList) {
    if (condition(user)) {
      return true;
    }
  }
  return false;
}

function every(condition) {
  for (var user of userList) {
    if (!condition(user)) {
      return false;
    }
  }
  return true;
}

// '서울'에 사는 첫 번째 사용자를 찾는 예시
const firstUserInSeoul = find((user) => user.address === '서울');
console.log('서울에 사는 첫 번째 사용자:', firstUserInSeoul);

// 급여 5,000,000 이상인 사용자가 하나라도 있는지 확인하는 예시
const hasHighEarningUser = some((user) => user.salary >= 5000000);
console.log('연봉이 5,000,000 이상인 사용자가 있는가?:', hasHighEarningUser);

// 모든 사용자가 '서울'에 사는지 확인하는 예시
const allUsersInSeoul = every((user) => user.address === '서울');
console.log('모든 사용자가 서울에 사는가?:', allUsersInSeoul);