JavaScript 기초(function)

Sujeong K·2022년 6월 28일

JavaScript_basic

목록 보기

5/17

function(함수)

반복해서 사용할 수 있는 코드 조각

function sayHello(){
console.log("Hello");
} // function 선언

sayHello(); // function 실행

*first-class function : To have First-class functions means functions are treated like other variables. So the functions can be assigned to any other variable or passed as an argument or can be returned by another function.

function에서 argument 받기

argument(인수) : fuction을 실행하면서 fuction에게 정보를 전달하는 방법

function sayHello(nameOfPerson, age){
console.log("Hello my name is " + nameOfPerson + " and I am " + age);
} 

sayHello("Bob",10); // Hello my name is Bob and I am 10

전역변수와 지역변수

전역변수(Global variable) : 함수 밖에서 만들어져 프로그램 전체에서 사용하는 변수

지역변수(Local variable) : 함수 내에서 만들어진 변수
let name = 'Mike';
function sayHello(name){
    console.log(name);
}
sayHello(); // undefined
sayHello(name); // 'Mike'
sayHello('Tom'); // 'Tom'
매개변수로 받은 값('Tom')은 복사된 후 함수의 지역변수가 됨
📌 함수에 특화된 지역변수를 기본으로 사용하는 습관 들이는 게 좋음

default 값 설정하기

1. OR 사용하기
function sayHello(name){
    let newName = name || 'stranger';  
    let msg = `Hello, ${newName}`;
    console.log(msg);
}

sayHello(); // 'Hello, stranger'
sayHello('Tom'); // 'Hello, Tom'
📌 || 는 첫 번째로 만난 true인 피연산자를 반환함
=> name 값이 있을 때는 완성된 msg 출력, name값이 없을 때는 false가 되므로 'stranger' 출력)

2. 매개변수 괄호 안에서 기본값 설정해주기
function sayHello(name = 'stranger'){
    let msg = `Hello, ${name}`;
    console.log(msg);
}

sayHello(); // 'Hello, stranger'
sayHello('Tom'); // 'Hello, Tom'
name값이 없을 때만 기본값으로 출력

function과 return

📌 function에서 return을 사용하면 계산된 결과를 받아서 다른 작업을 할 수 있음

function add(num1, num2){
    return num1 + num2;
} 
add라는 function은 return 오른쪽에 있는 값(num1 + num2)을 반환함

return 활용의 차이

const calculator = {
    add: function(a, b){
        console.log(a + b);
    }
};
const result = calculator.add(3, 5); // 8
console.log(result); // undefined
calculator.add(3, 5)는 add라는 function으로 계산만 할 뿐 결과를 저장하거나 반환하지 않기 때문에 아무 value가 없음
*함수 안에 return이 없으면 return undefined;가 생략된 것과 마찬가지

return을 사용했을 때

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

const result = calculator.add(3, 5);
console.log(result); // 8

calculate.plus(a, b)의 값이 function의 return value인 (a + b)로 대체됨

📌 return문이 있을 때는 return 오른쪽의 값을 반환하고 바로 동작을 멈추기 때문에 함수를 종료하는 목적으로도 사용함

함수 선언문 vs 함수 표현식

함수 표현식
let sayHello = function(){
    console.log('Hello');
}
이름이 없는 함수(anonymous function)로 만들고 변수를 선언해서 함수를 할당해주는 모양

📌 함수 선언문은 어디서든 호출이 가능하지만 함수 표현식은 실행 흐름이 함수에 도달했을 때 생성되기 때문에 그 이후에야 호출 가능함.

sayHello();

function sayHello(){
    console.log("Hello");
}
sayHello();는 함수 선언문 전에 호출해도 동작함
JS는 실행 전 초기화 단계에서 코드의 모든 함수 선언문을 찾아서 생성해놓음(hoisting)

콜백 함수

함수의 매개변수로 전달되어 그 함수의 특정한 시점에 호출되는 함수

const printYes = function(){
    console.log('yes');
}

const printNo = function() 
{
    console.log('no');
}

function randomQuiz(answer, printYes, printNo){
    if (answer === 'love you'){
        printYes();
    
    } else {
        printNo();
    }
}

randomQuiz('love you', printYes, printNo); // 'yes'