Javascript - 함수 관련 기초

자바스크립 함수 기초

익명 함수와 선언적 함수

익명함수

const f = function (매개변수, 매개변수) {
  return 리턴값
}

선언적 함수

function f (매개변수, 매개변수) {
  return 리턴값
}

const f 가 변수 이름이 있으니까 익명이 아니지 않나! 라는 무식한 생각을 했지만
변수 이름은 있고 함수 이름은 없으니 익명 함수 맞음 ^^ ( 이렇게 기억하고있자 ㅠ )

초기에는 선언적 함수를 더 많이 사용했는데

자바스크립트가 프로그래밍 본질을 발전시켜나가면서 익명 함수를 더 많이 쓰게 되었다고 한다.

왜냐하면 ...

함수() // → 선언적함수입니다.
함수 = function(){                // (2) 얘가 나중에 실행됨
  console.log('익명함수입니다.')
}
function 함수(){                  // (1) 얘가 먼저 만들어지고
  console.log('선언적함수입니다.')
}
함수() // → 익명함수입니다.

 

 

선언적함수는 무조건 전체코드를 실행하기 전에,

익명함수는 코드를 하나하나 실행하면서 만들어짐
 자바스크립트에서 선언적함수때문에 흐름이 깨져서 잘 안씀

 

진짜 개헷갈리겠네

 

---

가독성

개발의 기본적인 관점
성능(더적은cpu, 메모리자원) vs 가독성(쉽게 읽고, 안전하게)

여기서 가독성이 win

가독성이 중요하게 된 이유
(1) 비용절감 : 개발자 몸값 오르고 컴퓨터는 저렴해짐 .. 그래서 저렴한 개발자 데려와서 바로 쓸 수 있게 ㅠ
(2) 프로그램이 너무 복잡해져서
(3) 지원 도구의 발전 및 활용

그래서 현대적인 개발에서는 "단위테스트(unit test)"가 중요해짐
* 단위테스트 : 코드를 작성하고 빠르게 문제가 있는지 없는지 테스트해주는 과정을 자동화한 것

클린코드, 클린아키텍처, 이펙티브자바 등 .. 이런 명서들이 개발의 관점을 크게 바꿨다고함
(깨끗하고 더 효율적이고 안정적인지 알려주는 가독성에 관한 책들)
아무튼 가독성이 졸라 중요하다 ^^
언젠가 읽어보자 ... 언젠가

기본 매개변수

가독성이랑 관련이 있나? 암튼 매개변수가 필요한 함수를 만들었는데

다른 누군가가 그걸 알 턱이 없으니 기본 매개변수를 세팅해둔다

내 작업을 맡을 다음 사람을 위한 배려같은 건가? 좀 스윗하긴 하네

---

콜백함수

콜백함수 : 매개변수로 전달하는 함수

const 테스트 = function(a){
  a()
}

const 함수 = function(){
  console.log("안녕");
}

 

테스트(함수) 를 실행하면 "안녕" 이 출력됨

매개변수를 실행하는 함수와 "안녕"을 출력하는 함수
"안녕"을 출력하는 함수를 매개변수를 실행하는 함수의 매개변수로 넣었기 때문에
매개변수를 실행하는 함수는 매개변수를 실행하여
안녕이 출력된 것

아웅 말장난같애

참고로 여기서 ...
테스트(123) 을 실행하면 123은 함수가 아니니까 에러남
그니까 무조건 함수만 매개변수로 넣어야함.
여기서 매개변수인 a를 콜백함수라고함

---

자바스크립트에서 내부적으로 사용하는 콜백함수

배열의 콜백함수를 사용하는 메서드
forEach()	filter()	map()

 

forEach() : 콜백함수로 매개변수를 value, index, array를 가지는 녀석을 받음
array는 현재 반복을 돌고있는 배열을 의미, 근데 잘 안써서 주로 value, index만 씀

const 배열 = [1, 2, 3, 4, 5]
배열.forEach(function (value, index){
  console.log(`${index}번째의 값은 ${value}`)
});

→ 0번째의 값은 1, 1번재의 값은 2, 2번째의 값은 3 ... 이렇게 value와 index가 출력

 

filter() : 얘도 콜백함수로 매개변수를 value, index, array를 가지는 녀석을 받음.
얘는 콜백함수로 true, false를 리턴해서 함수가 올 것을 예상함. 즉, 필터링한 배열을 리턴함

let 배열 = [1, 2, 3, 4, 5]
배열 = 배열.filter(function(value, index){
  return value % 2 === 0
})
console.log(배열)

→ [2, 4] 즉, 2로 나눈 나머지가 0인 애들만 필터링됨
또한 얘는 비파괴적 함수라서 원래 배열을 변경하는 게 아님!
그래서 const가 안된다 (힙에 저장된 새로운 배열의 주소를 재할당해야하니까)

 

map() : 기존의 배열을 기반으로 새로운 배열로 리턴함

let 배열 = ["킹", "왕", "짱"]
배열.map(function (value, index){
  return "테이" + value
});
console.log(배열)

→ ["테이킹", "테이왕", "테이짱"]

 

forEach, filter, map 정도는 필수로 알아두자