26. 함수 작성법

함수의 기본

// 함수 선언
function sum(num1, num2) {
    console.log("sum() 호출!");
    return num1 + num2;
}

// 함수 사용
const result = sum(10, 3);
console.log(result);
// 13
//sum() 호출!

함수와 메모리

// sum() 함수를 add라는 상수에 담음
const add = sum;
console.log(sum(10, 3));
// 13
//sum() 호출!
console.log(add(10, 3));
// 13
//sum() 호출!

함수 작성 팁

- 조건식이 있을 때 조건을 만족하지 않는 경우 함수 도입부분에서 함수를 미리 종료시키는 것이 좋음

function print(num) {
    if (num <= 0) return; // return을 사용하여 함수 도입부분에서 함수를 미리 종료
    console.log(num);
}

print(10); // 10
print(-5); // return으로 인해 함수를 도입 부분에서 종료시킴

매개변수와 기본값

- 매개변수의 기본값: undefined

- undefined와 연산: NaN

-  arguments: 함수의 전달된 인수에 해당하는 Array 형태의 객체

function total(num1=0, num2=0) {
    console.log(num1);
    console.log(num2);
    console.log("arguments:", arguments);
    console.log("arguments:", arguments[1]);
    return num1 + num2;
}

console.log("result:",total());
console.log("result:",total(10, 3));

 

console.log("result:",total()); 출력

console.log("result:",total(10, 3)) 출력

콜백 함수

// 콜백 함수
const clac_add = (a, b) => a + b; // a + b의 결과를 리턴해주는 함수
const clac_multiply = (a, b) => a * b; // a * b의 결과를 리턴해주는 함수 선언
console.log(clac_add(10, 5)); // 15
console.log(clac_multiply(10, 5)); // 50

// 콜백함수를 이용하여 계산기 만들기
function calculater(num1, num2, action) {
    if (num1 < 0 || num2 < 0) return; //num1이나 num2가 0보다 작을 경우, 함수를 미리 종료

    const result = action(num1, num2); // 매개변수로 받은 콜백함수 사용
    console.log(result); // 결과 출력
    return result; // 결과 리턴
}
calculater(4,2, clac_add); // 6
calculater(4,2, clac_multiply); // 8

원시값과 객체값의 비교

- 원시값: 값에 의한 복사

- 객체값: 참조에 의한 복사(메모리 주소)

// 원시값
function display(num) {
    num = 10;
    console.log(num);
}

const value = 5;
display(value); // 10 
console.log(value); // 5

// 참조값
function displayObj(obj) {
    obj.age = 13;
    console.log(obj);
}

const dog = {name:"루시", age: 14};
console.log(dog); // {name: '루시', age: 14}
displayObj(dog);  // 메모리 주소를 참조하고 있으므로, 위의 원시값과는 다르게 age가 14->13으로 변경 {name: '루시', age: 13}
console.log(dog); // {name: '루시', age: 13}

객체  복사

- 위의 코드의 displayObj(obj) 함수에서 obj.age = 13;과 같이 객체의 프로퍼티 값을 직접 변경하는 것은 좋지 못함

- 객체의 함수내에서 프로퍼티 값을 변경하고 싶을때, ...을 이용하여 객체를 복사하여 수정된 값을 리턴하는 방법이 좋음

// ... 복사
function changeAge(obj) {
    return {...obj, age:13}; // ...을 이용하여 객체를 복사해서 수정된 값을 리턴
}

const dog1 = {name:"루시", age: 14};  
const dog2 = changeAge(dog1);
console.log(dog1); // 객체를 복사하여 리턴하였기 때문에, 매개변수에 넣은 객체의 프로퍼티 값은 변경되지 않음 {name: '루시', age: 14} 
console.log(dog2); // 복사된 객체 {name: '루시', age: 13}

---

문제

• 특정 숫자를 입력하면 해당 숫자까지의 출력
  • 예) 5를 입력하면 1,2,3, 4, 5를 출력
• 특정 숫자를 입력하면 해당 숫자의 제곱을 출력
  • 예) 4를 입력하면 16이 출력
• 위 두개의 식을 함수로 만들고 두 함수의 기능을 모두 사용할 수 있는 iterate()를 만들어보자

// 제곱을 출력해주는 함수
const a = num => console.log(num*num);
// 입력받은 숫자까지의 출력을 해주는 함수
const b = function(num) {
    for (let i = 1; i < num+1; i++) {
        console.log(i);
    }
}

// 두 함수 기능을 사용할 수 있는 함수
function iterate(num, action) {
    if(num<0) return; // 입력 받은 값이 0보다 작으면 미리 종료
    action(num); // 콜백함수를 이용
}

iterate(5, a); // 25
iterate(5, b); 
/*
1
2
3
4
5
*/