[JavaScript_study] 함수(function)에 대해서

* 함수(Function)

  > 특정한 일을 수행하는 코드의 집합
  > 프로그램에서 중복되는 일이 있다면 함수단위로 작은단위의 일들을 묶어야한다.
  > 수행하는 일을 잘 나타낼 수 있는 이름을 지어야한다.
  > 매개변수 이름도 의미있게 지어야 한다.
  > 함수도 결국은 객체(Object)이기 때문에 함수를 정의하면 함수의 Object가 Heap라는 공간에 정의된다.
  > 정보가 가득 담겨야 하므로 메모리 셀이 여러개가 필요하다.
  > 따라서 함수의 이름은 결국 함수 Object가 담긴 메모리 주소를 가르킨다.
  > 함수의 이름은 함수를 참조하고 있다. (Copy by reference)

 

// 사용예제 1
function sum(a, b) {
  console.log('function');
  return a + b;
}
const result = sum(1, 2);
console.log(result);

// 사용예제 2
function fullName(firstName, lastName) {
  return `${firstName} ${lastName} ✋`;
}
let lastName = '김';
let firstName = '지수';
console.log(fullName(firstName, lastName));

let lastName2 = '박';
let firstName2 = '철수';
console.log(fullName(firstName2, lastName2));

 

* return

// return을 명시적으로 하지 않으면 자동으로 undefined이 반환됨!
function add(a, b) {
  //return a + b;
  return undefined;
}
const result = add(1, 2);
console.log(result);

// return을 함수 중간에 하게 되면 함수가 종료됨
// 사용예: 조건이 맞지 않는 경우 함수 도입부분에서 함수를 일찍이 종료함!
function print(num) {
  if (num < 0) {
    return;
  }
  console.log(num);
}
print(12);
print(-12);

* parameters

// 매개변수의 기본값은 무조건 undefined
// 매개변수의 정보는 함수 내부에서 접근이 가능한 arguments 객체에 저장됨
// 매개변수 기본값 설정 가능 (Default Parameters)
function add(a = 1, b = 1) {
  console.log(a);
  console.log(b);
  console.log(arguments);
  console.log(arguments[1]);
  return a + b;
}
add();

// Rest 매개변수 Rest Parameters
function sum(a, b, ...numbers) {
  console.log(a);
  console.log(b);
  console.log(numbers);
}
sum(1, 2, 3, 4, 5, 6, 7, 8);

* 함수 선언문 function name() { } 과 함수 표현식 const name = function () { }

// 함수 선언식과 표현식의 차이점
// 함수 선언식은 호이스팅에 영향을 받지만, 함수 표현식은 호이스팅에 영향을 받지 않는다.
// 함수 선언식은 코드를 구현한 위치와 관계없이 자바스크립트의 특징인 호이스팅에 따라 
// 브라우저가 자바스크립트를 해석할 때 맨 위로 끌어 올려진다.

let add = function (a, b) {
  return a + b;
};
console.log(add(1, 2));

// 화살표 함수 const name = () => { }
// 함수 표현식
add = (a, b) => a + b;

console.log(add(1, 2));

// 생성자 함수 const object = new Function(); // 뒤 객체편에서 다룸

// IIFE (Immediately-Invoked Function Expressions)
(function run() {
  console.log('😍');
})();

* 콜백함수

// 외부로부터 주어지는 함수
const add = (a, b) => a + b;
const multiply = (a, b) => a * b;

// 전달된 action은 콜백함수이다.
// 전달될 당시에 함수를 바로 호출해서 반환된 값을 전달하는 것이 아니라
// 함수를 가리키고 있는 함수의 레퍼런스(참조값)가 전달된다.
// 그래서 함수는 고차함수안에서 필요한 순간에 호출이 나중에 됨
function calculator(a, b, action) {
  if (a < 0 || b < 0) {
    return;
  }
  let result = action(a, b);
  console.log(result);
  return result;
}

calculator(1, 1, add);
calculator(1, 2, multiply);

* 일급객체 (first-class object)

  > 일반 객체처럼 모든 연산이 가능한 것
  > 함수의 매개변수로 전달
  > 함수의 반환값
  > 할당 명령문
  > 동일 비교 대상

* 고차함수 (Higher-order-function)

  > 인자로 함수를 받거나 (콜백함수)
  > 함수를 반환하는 함수를 고차함수

 

* 불변성

* 코딩할때 중요한 컨셉
  > Immutability (불변성) // unchangeable
  > object라는 특정한 상태를 만들때 이 상태를 어딘가에 주고 받아야 한다면 상태를 변경하는것은 좋지 않다.
  > 상태가 변경되지 않도록 불변성을 유지하게 코딩해 나가는게 중요하다.

 

// 함수내부에서 외부로부터 주어진 인자의 값을 변경하는 것은 좋지 않다.
// 상태변경이 필요한 경우에는, 새로운 상태를(오브젝트, 값) 만들어서 반환해야 함 ✨
// 원시값 - 값에 의한 복사
// 객체값 - 참조에 의한 복사 (메모리주소) // 치명적 오류 발생

function display(num) {
  num = 5; // ❌
  console.log(num);
}
const value = 4;
display(value);
console.log(value);

// 참조값이 변환되어서 변수와 인자의 참조값이 모두 변경되므로 치명적인 오류를 발생한다.
function displayObj(obj) {
  // obj.name = 'Bob'; // ❌❌❌❌❌❌ 외부로 부터 주어진 인자(오브젝트)를 내부에서 변경 ❌
  console.log(obj);
}

const latte = { name: 'Latte' };
displayObj(latte);
console.log(latte);

// 이름을 변경한다는 느낌의 함수 이름을 지정해준다.
// 반환할때는 새로운 오브젝트를 지정해준다.
function changeName(obj) {
  return { ...obj , name : 'Bob' }
}

console.log(changeName(latte))