function

function 함수이름(parameter1, parameter2...) {
    실행코드...
    return 반환값
}

용어

• Parameter(매개변수)
  :함수와 메서드에 입력 변수 이름

• Argument(전달인자, 인자, 인수)
  :함수와 메서드에 실제 입력되는 값

function 안녕() {
  console.log("hello world");
}

함수의 장점

1. 재사용성

for (let i = 0; i < 5; i++) {
  안녕();
}

만줄이어도 재사용이 가능한 간단함

2. 코드 구조 파악에 용이

땅파기()
기반다지기()
기둥세우기()
벽돌쌓기()
지붕올리기()

이렇게 함수를 작성해 두면 수정할때 어디에 뭐가 있는지 알 수 있기때문에 용이
3. 유지보수

함수는 한 동작에 하나만 쓰는 것을 권장 ! 기능 다 막 갖다가 때려박기 금지

지역변수와 전역변수

지역변수

함수 내에서 선언한 변수인 지역 변수(local variable)는 함수 안에서만 접근이 가능

function sumAll(a, b, c) {
  let z = 50;
  return a + b + c + z;
}
console.log(sumAll(10, 20, 30)); //110 
console.log(z); //지역변수라 오류가 나옴

• z값은 함수 내에서 선언해 주었기 때문에 지역변수이다.
• 그래서 밖에서 z 를 불러오려고 하니 오류가 나온다.

전역변수

• 함수 외부에 선언된 변수
• 사용을 지양하자 ..! 나중에 오류나기 십상

//전역변수
var z3 = 50;
function sumAll2(a, b, c) {
  return a + b + c + z3;
}
console.log(sumAll2(10, 20, 30)); //110

var 의 호이스팅 때문에 var 을 변수로 사용하는 것은 ,,,, 정말 지양해야함

화살표 함수

function 함수(x, y) {
  return x + y;
}
console.log(함수(10, 20));

위 함수를 화살표함수를 이용해 아래와 같이 간단하게 작성할 수 있다.

let 함수 = (x, y) => x + y;
console.log(함수(100, 200));

좀 심화한 예시코드

let 함수 = (x, y) => {
  let z = x + y;
  return z;
};
console.log(함수(30, 30));

filter 에 들어가는 => 도 화살표 함수라는 것 !

[10, 20, 30].filter((x) => x >= 20);
function 함수(x) {
  return x >= 20;
}

함수 선언문과 함수 표현식

// 함수 선언문
function sum(x, y){
  return x + y;
}

//함수 표현식
let sumXY = function(x, y){
  return x + y;
};
// let x = 10;
// let y = x;
let sumXYcopy = sumXY;

document.write(sumXYcopy(10, 20), '<br>');

콜백함수

• 나중에 부를게~ 느낌의 함수

//콜백함수
function sum(x, y, c){
  c(x + y);
  return x + y;
}

function documentWrite(s){
  document.write('콜백함수', s);
}

sum(10, 20, documentWrite);

즉시 실행함수

• 메모리 효율적으로 관리하기 위해 바로 실행해야 하는 것들을 즉시 실행함수로 관리
• 휘발성 함수 , 한번쓰면 다음엔 못쓴다

// 익명 즉시 실행 함수
(function () {
  let a = 1;
  let b = 2;
  return a + b;
}());

// 기명 즉시 실행 함수
(function foo() {
  let a = 3;
  let b = 5;
  return a * b;
}());

foo(); // ReferenceError: foo is not defined
// 어차피 실행하지 못해서 의미가 없음.

모든 요소들이 로드된 이후에 실행, 함수는 1개만 실행 가능 - 실무에서 종종사용
window.onload = function(){}
$(document).ready() // 위와 같은 기능을 하는 jquery문법

+

인자값이 몇개 들어올 지 모를 때 쓸 수 있는 함수

function 함수(a, b, ...c) {
  console.log(a, b, c);
}

함수(10, 20, 30, 40, 50); //10 20 [ 30, 40, 50 ]

재귀함수

내가 나를 호출한다 (도르마무 도르마무 ,,,, - 닥터스트레인지)

1. 종료조건(탈출조건)이 꼭 있어야함! 안그러면 무한반복
2. 반복문으로 구현할 수 있는 것은 재귀함수로 모두 구현 가능하다

function factorial(n) {
  if (n <= 1) {
    return n; //탈출조건
  }
  return n * factorial(n - 1);
}

console.log(factorial(5));
/**
 * factorial(5) 5 * factorial(4)  5 * 24 = 120
 * factorial(4) 4 * factorial(3)  4 * 6 = 24
 * factorial(3) 3 * factorial(2)  3 * 2 = 6
 * factorial(2) 2 * factorial(1)  2 * 1 = 2
 * factorial(1) 1 => 1이 되자 거슬러 올라감 
 */

call by value/ reference

javascript는 call by value만 존재한다. 참조타입을 넘기면 주소가 넘어가는 것이 아니라 주소값을 복사한 복사본이 넘어간다

call by value(참조자료형):

• value(값)의 전달

let arr = [10, 20, 30];
function 함수2(value) {
  value[0] = 1000; //0번째 인덱스에 1000전달
}
함수2(arr);
console.log(arr); //[1000,20,30]

call by reference:

• 자스에서는 잘못된 개념!
• 주소값의 전달
• 주소가 복사되어 넘어가기 때문에 (array 나 object 를 넘겼을 때) 함수 내에서 수정이 가능하다.