타강의 2-1) 자바스크립트

3. 함수

 

    3-1) basic

function add(num1, num2) {
  console.log("function");
  return num1 + num2;
}
const result = add(200, 100);
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));

 

    3-2) memory

function add(a, b) {
  console.log(a);
  console.log(b);
  return a + b;
}
const sum = add;
// sum이라는 새로운 변수가 add가 가리키고 있는 레퍼런스를 똑같이 가리킴
// sum과 add는 동일한 함수 정의를 가짐

// console.log(sum(1, 2));
console.log(sum(1, 2));
console.log(sum());

 

    3-3) return

// return을 명시적으로 하지 않으면 자동으로 undefined이 변환됨!
// return은 함수를 종료
function add(a, b) {
  // return a + b;
  return a + b;
}

const result = add(1, 2);
console.log(result);

// 특정한 일을 수행하고 아무것도 반환하지 않는 함수라면 return을 사용할 필요 X
// return을 함수 중간에 하게 되면 함수가 종료됨
// 사용예 : 조건이 맞지 않는 경우 도입부분에서 함수를 일찍이 종료함
function print(num) {
  if (num < 0) {
    return;
  }
  console.log(num);
}
print(-1);

 

    3-4) parameters

// return을 명시적으로 하지 않으면 자동으로 undefined이 변환됨!
// return은 함수를 종료
function add(a, b) {
  // return a + b;
  return a + b;
}

const result = add(1, 2);
console.log(result);

// 특정한 일을 수행하고 아무것도 반환하지 않는 함수라면 return을 사용할 필요 X
// return을 함수 중간에 하게 되면 함수가 종료됨
// 사용예 : 조건이 맞지 않는 경우 도입부분에서 함수를 일찍이 종료함
function print(num) {
  if (num < 0) {
    return;
  }
  console.log(num);
}
print(-1);

 

    3-5) expression

// 함수 선언문 function name() { }
// 함수 표현식 const name = function () { }
// 함수도 객체이기 때문에 객체를 다른 변수에 할당하거나 재할당이 가능한 것과 같음

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

// 좀 더 간결하게 표현할 수 있는 화살표 함수 const name = () => { }
// 코드 안에서 특별한 일을 하지 않고 어떤 값을 바로 return하는 경우라면
// 이런 { } 괄호도 생략이 가능, return도 생략이 가능

//add = (a, b) => {
//  return a + b;
//};

add = (a, b) => a + b;

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

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

// 함수를 () 괄호로 묶으면 함수가 값으로 변환이 됨. 거기에 ()를 붙여주면 바로 실행이 됨
// IIFE (Immedicately-Invoked Function Expressions) :
// 함수를 정의하면서 바로 호출하고 싶을 때 사용하는 방법
// 자바스크립트에서 잘 쓰이지 않음
(function run() {
  console.log("🥵");
})();

 

    3-6) callback

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

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

culculator(-3, -4, add);
culculator(1, 2, multiply);

 

    3-7) callback quiz

// 주어진 숫자 만큼 0부터 순회하는 함수
// 수행하면서 주어진 특정한 일을 수행해야 함
// 5, 순회하는 숫자를 다 출력하고 싶음
// 5, 순회하는 숫자의 두배값을 다 출력하고 싶음
// function iterate(max,action)
function iterate(max, action) {
  for (let i = 0; i < max; i++) {
    action(i);
  }
}

function log(num) {
  console.log(num);
}

function doubleAndLog(num) {
  console.log(num * 2);
}

// iterate(3, log);
iterate(3, (num) => console.log(num));
//iterate(3, doubleAndLog);
iterate(3, (num) => console.log(num * 2));

// setTimeout(callback, 1000);
setTimeout(() => {
  console.log("1초 뒤 이 함수가 실행될 거예요");
}, 1000);

 

    3-8) 중요한 불변성에 대해

function display(num) {
  // 인자란, 함수 내부에서 사용하고 있는 변수와 비슷함
  // let num = 4;
  // 함수 내부에서 전달받아오는 인자의 값을 변경하면?
  // 5가 할당이 되었기 때문에 console.log(num)에는 5가 출력이 될 것
  // but, value의 변수에는 4가 그대로 들어있어 console.log(value);에서는 4가 출력
  // 함수 내부에서 외부로부터 주어진 인자의 값을 변경하는 것은 XXX
  // 상태변경이 필요한 경우에는, 새로운 상태를 (오브젝트, 값) 만들어서 반환해야 함
  // 원시값 - 값에 의한 복사가 이뤄지기 때문에 큰 문제는 X
  // 객체값 - 참조에 의한 복사 ( 메모리 주소 )가 이뤄져 동일한 오브젝트를 가리킴
  num = 5; // 정말 좋지 않음
  console.log(num);
}
const value = 4;
display(value);
console.log(value);

function displayObj(obj) {
  obj.name = "Bob"; // XXX 외부로부터 주어진 인자(오브젝트)를 내부에서 변경 X
  console.log(obj);
}
const ellie = { name: " Ellie" };
displayObj(ellie);
console.log(ellie);
// ellie라는 object를 외부에서 만든 후 함수에 전달할 때는 값이 전달되는 것이
// 아니라 레퍼런스(참초값)가 전달됨 => obj.name을 변경하는 순간 메모리 주소가 가리키고 있는
// 실제 오브젝트의 이름을 변경하게 됨

// 부득이하게 외부로부터 주어진 인자(오브젝트)를 내부에서 변경해야 할 때
// 무엇을 변경할 것인지 명확하게 표시해줘야 함
// 함수 내부에서 무언가를 바꿔야 한다면 우선 이름부터 변경 (호출하는 사람이 헷갈리지 않도록)
// 반환할 때는 새로운 오브잭트 만들기
function changeName(obj) {
  return { ...obj, name: "Bob" };
  // 기존에 주어진 object를 그대로 유지하면서 변경하고자 하는게 있다면 옆에 표시
  // 이렇게 하면 새로운 object가 만들어짐
}