[JS] 함수 Function

JAVASCRIPT 함수 개념에 대해 알아보겠습니다.

함수 Function

javascript

UNFOLDED

function add(a, b) {
    return a + b;
} //함수 정의
 
add(1, 2); //함수 호출

• function - 함수 정의 키워드
• add - 함수 이름
• (a, b) - parameter 매개 변수, 인자
• return - 결괏값 반환
• add(1, 2) - 함수 호출

중요 Point

• 함수 단위로 작은 단위의 일들을 묶어야 한다.
• 수행하는 일을 잘 나타낼 수 있는 이름을지어야 한다.
• 매개변수 이름도 의미 있게지어야 한다.
• 함수도 객체(object)이기 때문에 메모리 상에 Hip에 주소가 할당되게 된다.

javascript

UNFOLDED

function add(a, b) {
    return a + b;
}
const sum = add;

함수의 이름은 함수를 참조하고 있다.

 

즉, sum이라는 변수는 함수의 객체 주소를 가리키고 있다.

기본

javascript

UNFOLDED

function add(a, b) {
    console.log('함수 출력');
    return a + b;
}
const result = add(1, 2);
console.log(result); // 3
 
// example 2
 
function myName(lastName, firstName) {
    return `${lastName}, ${firstName}`;
}
 
let lastName = '김';
let firstName = '서근';
 
console.log(myName(lastName, firstName));
 
let lastName2 = '김';
let firstName2 = '미진';
 
console.log(myName(lastName2, firstName2));

메모리

javascript

UNFOLDED

function add(a, b) {
    return a + b;
}
const sum = add;
 
//add와 sum의 메모리 주소는 동일하다.
 
console.log('sum:', add(1, 2));
console.log('add:', sum(1, 2));
 
// 인자 값을 전달하지 않으면?
// 함수 인자 값인 a와 b가 undefined이 되고,
// undefined끼리 더해 리턴을 하기 때문에 숫자가 아닌 NaN이 된다.
function someNumber(a, b) {
    console.log(a);
    console.log(b);
    return a + b;
}
 
console.log(someNumber()); //NaN

리턴 undefined

javascript

UNFOLDED

// 함수에서 리턴값을 정해주지 않으면 코드상에서 자동으로 undefined이 반환된다.
 
function add(a, b) {
    // return a + b;
}
 
const result = add(1, 2);
console.log(result); //undefined
 
// 그렇기 때문에 return이 필요없는 경우엔 return 키워드를 작성할 필요가 없다.
function print(text) {
    console.log(text);
}
 
print('안녕하세요'); //안녕하세요
 
// 언제 활용할까?
// 사용예 : 조건이 맞지 않을 때 함수 도입부분에서 함수를 일찍 종료시킴
// return == return undefined
 
// 함수 내에서 조건문을 적용해보자
// num이 12보다 크고 100보다 작거나 같으면 출력하지 않고
// 그 외 값을 출력한다.
// 즉, return을 사용하면 원하는 조건이 아닐때 함수를 일찍 종료시킨다.
 
function printNumber(num) {
    if (num > 12 && num <= 100) {
        return; // undefined
    }
    console.log(num);
}
 
printNumber(101); //101
printNumber(99); //출력 안됨 (조건이 맞지 않아서 함수를 일찍 종료시켰음)

매개변수

javascript

UNFOLDED

// 매개변수의 기본값은 undefined
// 매개변수의 정보는 함수 내부에서 접근이 가능한 arguments 객체에 저장이 된다.
 
function sum(a, b) {
    console.log(a);
    console.log(b);
    console.log(arguments);
    return a + b;
}
 
console.log(sum(1, 2));
console.clear();
 
// 매개변수로 기본값을 넣어줄 수 있다.
function sum2(a = 1, b = 2) {
    return a + b;
}
sum2(); //3
console.clear();
 
// Rest 매개변수
// 몇개의 인자를 받아 올지 모를때 사용한다.
function sum3(...numbers) {
    console.log(numbers);
}
sum3(1, 2, 3, 4, 5);
console.clear();
// ...numbers 앞에 a, b, c와 같이 인자를 넣어주면 이를 제외한 값을 출력한다.
function sum4(a, b, c, ...numbers) {
    console.log(a); //1
    console.log(b); //2
    console.log(c); //3
    console.log(numbers);
    [4, 5];
}
sum4(1, 2, 3, 4, 5); //4, 5

함수 표현식 / 화살표 함수

화살표 함수는 function 키워드를 생략할 수 있고, 함수 이름을 정해주지 않고도 간단하게 함수를 표현할 수 있다.

javascript

UNFOLDED

// 이 함수 표현식을 
function add(x,y) {
  let temp = x + y;
  return temp
}
 
add(1, 3) //4
 
// 화살표 함수로 똑같이 표현 가능
add = (x,y) => {
  let temp = x + y;
  return temp
}
add(1, 3) //4
 
//함수 이름을 정해주지 않고도 표현 가능
//함수 이름이 없을 땐, 앞 뒤에 () 를 추가해준다.
((x,y) => {
  let temp = x + y;
})
(1, 3) //4

javascript

UNFOLDED

// 함수 선언문 : function name() {}
 
/**  함수 표현식 : const name = fun≠≠ction() {} */
let add = function (a, b) {
    return a + b;
};
console.log(add(1, 2)); //3
 
/** 화살표 함수 const name = () => {} */
add = (a, b) => {
    return a + b;
};
console.log(add(1, 2));
 
/**  별다른 일을 하지않고 어떤 값응 바로 리턴하는 경우엔 화살표와 대괄호 모두 생략 가능하다*/
let sum = (a, b) => a + b;
 
console.log(sum(1, 2)); //3
 
/** 생성자 함수 const object = new Function(); **/
 
/** IIFE(Immediately-Invoked Function Expressions) 함수를 정의하면서 바로 호출하고 싶을때 사용한다. */
// 많이 사용 되지는 않음
(function hello() {
    console.log('안녕!');
})();

콜백 함수

일급 객체 first-calss object

함수가 일반 객체처럼 모든 연산이 가능한것. 즉 함수로 아래와 같은 모든 기능일 사용할 수 있다.

• 함수의 매개변수로 전달
• 함수의 반환값
• 할당 명령문
• 동일 비교 대상

고차 함수

• 인자로 함수를 받거나 (콜백 함수),
• 함수를 반환하는 함수를 고차 함수라고 한다.

javascript

UNFOLDED

// 콜백함수
 
const add = (a, b) => a + b;
const multiply = (a, b) => a * b;
const divide = (a, b) => a / b;
 
/** action은 외부로 부터 주어지는 함수 즉 콜백 함수라고 한다. */
function calculator(a, b, action) {
    let result = action(a, b);
    console.log(result);
    return result;
}
 
//즉, a와 b는 num으로 가져오되, action 부분에는 변수 함수로 정해준 이름을 넣어주면 된다.
//이것이 콜백함수의 형태이다. (호출 하지 않고주소만 받아옴)
 
// 전달된 action은 콜백함수라 함.
// 전달될 당시에 함수를 바로 호출해서 반환된 값을 전달하는것이 아닌 함수를 가리키고 있는 함수의 래퍼런스(참조값)가 전달된다.
// 그렇기에 함수는 고차함수 안에서 필요한 순간에 호출이 나중에 된다.
calculator(3, 2, multiply); //6
calculator(1, 3, add); //4
calculator(10, 2, divide); //5
 
// 함수내부에서는 정의하는 시점에 action 즉 콜백함수 부분에 어떤 값이 올지 모른다.
// 함수의 래퍼런스를 받아서 필요한 순간에 호출하기 때문에 조건에 맞지 않는다면 영원히 호출되지 않는다.
function calculator2(a, b, action1) {
    if (a < 0 || b < 0) {
        return;
    }
    let result = action1(a, b);
    console.log(result);
    return result;
}
 
calculator2(-1, -2, add); // 조건에 맞지 않기때문에 콜백함수가 실행되지 않는다.

불변성 Immutability

javascript

UNFOLDED

// 정말 중요한 내용
 
//! ⭐️ Immutability 불변성
//! mutable 변경할 수 있는
 
// 함수 내부에서 외부로부터 주어진 인자값을 변경하는것은 매주 좋지 않다.
// 상태변경이 필요한 경우, 새로운 상태를 만들어 반환해야 한다.
// 원시값 - 값에 의한 복사
// 객체값 - 참조에 의한 복사 인것을 다시 기억하자
 
// function age(num) {
//     console.log(num);
// }
// const myAge = 20;
// console.log(myAge); //20
 
// 그런데 여기서 함수 내부에 외부로 부터 주어진 인자값을 변경한다면?
 
function age(num) {
    num = 12;
    console.log(num);
}
const myAge = 20;
age(myAge); //12
console.log(myAge); //20
//12가 출력되는것을 볼 수 있다. 이유는
/* 
myAge가 age함수로 메모리 주소가 전달이 되고 출력이 시작되면서 num은 12로 재지정 되므로 myAge는 12가 된다.
myAge를 한 번 출력해본다면  20이 나오는것을 확인할 수 있는데, 20을 함수로 전달해서 인자값이 12로 바뀌었기 때문에 이렇게 함수를 짜는것은 매우 좋지 않다 ❌❌❌
*/
 
// 다른 예를 들어보자
 
// function Idcard(string) {
//     console.log(string);
// }
 
// const Seogun = { name: '서근' };
// Idcard(Seogun); //{ name: '서근' }
 
// 하지만 여기서 함수 내부에 인자 값을 바꾼다면?
 
function Idcard(string) {
    string.name = '미진'; //❌❌❌외부로 부터 주어진 인자를 내부에서 변경하지 말자!! ❌❌❌
    console.log(string);
}
 
Seogun = { name: '서근' };
Idcard(Seogun); //{ name: '미진' }
 
// 함수 내무에서 무언가를 바꿔야 한다면 아래와 같이 작성할 수 있다. 배열편에서 다룸
function chageName(obj) {
    // 이름 부터 변경한다는 느낌을 주도록
    return { ...obj, name: '서근' }; // 반환할때는 새로운 오브젝트 만들기
}

---

읽어주셔서 감사합니다🤟