[JavaScript] JS 함수

Front/JavaScript

[JavaScript] JS 함수

ddo04 2024. 7. 5. 16:30

✏️ 함수

하나의 동작으로 어떤 목적을 달성하거나 원하는 결과를 도출하기 위한 코드 집합 의미
한 번만 사용하고 마는 것이 아닌 반복적인 동작을 처리하기 위해 작성되고 같은 이름으로 계속하여 재사용할 수 있음

✏️ 함수 작성

함수를 작성할 때는 펑션이라는 키워드 사용
뒤에 함수의 사용할 이름을 작성을 함
뒤에 괄호를 넣는데, 괄호는 함수에서 사용하려는 인자를 담는 공간을 의미
인자들을 반드시 정의해야 하는 것은 아님
인자가 필요하지 않은 함수라면 그냥 없이 사용해도 됨
중괄호 부분에는 어떤 처리를 할지를 작성하면 됨
함수를 정의할 때 작성했던 함수 이름을 작성하고 뒤에 괄호를 열어서 필요한 인자를 넣어주면됨
한 번 만든 함수는 언제든지 재사용할 수 있고 어느 위치든 내가 필요한 위치에서 부를 수 있다는 장점이 있음

function bok(main){
    console.log(`${main} 볶음밥`);
}

bok('새우');
bok('제육');

sum 함수는 인자를 두 개 받는 함수
두 개의 값을 받아서 합계 출력
두 개의 인자 필요

function sum(a,b){
    console.log(a + b);
}

sum(10, 20);

✏️ 인자, 매개변수

인자를 더 정확하게 구분하기 위한 용어
인자 = 함수를 호출할 때 전달하는 값 = 함수의 입력값 = Arguments
매개변수 = 함수를 정의할 때 작성하는 필요 인자 = 함수의 입력 변수 = Parmeter

✏️ 지역변수, 전역변수

function a(){
    const b = 10;
    console.log(b);
}

a();
console.log(b);

함수 내부에서 선언된 변수를 지역 변수
변수가 존재하는 변수를 사용할 수 있는 유효범위가 함수로 제한
변수를 사용할 수 있는 범위(Scope)가 중괄호로 감싸진 블록 안으로 제한 <함수뿐만 아니라 조건문, 반복문에서도 마찬가지>
함수 내부에서 선언된 변수는 함수 내부에서만 사용 가능

const b = 10;

function a(){
    console.log(b);
}

a();
console.log(b);

전역 변수는 함수 내부에서 접근하는 것이 가능해서 함수 내부의 비가 존재하지 않지만 외부에 존재하는 전역변수 출력 가능
함수에서 재선언되면 함수 내부에 선언된 지역변수만 접근할 수 있음

const b = 10;

function a(){
    const b = 20;
    console.log(b);
}

a();
console.log(b);

✏️ 함수와 인자 / 호출된 인자의 개수가 부족

함수를 작성할 때는 사용할 인자를 명시하고 함수를 호출할 때 명시된 인자의 개수에 맞춰서 인자를 전달하는 방식으로 사용
함수를 호출할 때 실수로 더 많은 인자를 전달하거나 개수가 부족하게 인자를 전달하면
sum 함수는 인자가 두 개 필요
문서상에서 어떤 에러도 발생하지 않음
자바스크립트에서는 값이 할당되지 않은 친구들한테는 기본적으로 undefined가 할당
우리가 두 개의 인자를 필요로 하는 함수 sum을 작성하였을 때 해당 인자들에는 undefined 값을 가지고 있음
하나의 값만 전달하는 경우에는 a에는 우리가 전달한 인자가 들어가고 b는 전달 받는 것이 없기에 그냥 기본값 그대로 undefined 들어감

function sum(a, b){
    console.log(a + b);
}

sum(10, undefined);

NaN은 Not a Number로 숫자가 아니라는 의미

✏️ 매개변수 기본 값

필요한 인자의 개수보다 적은 인자가 전달되는 경우에도 nudefined로 지정되지 않게 하기 위해 매개변수들의 기본값 Default Parameter을 지정하면 됨
디폴트 파라미터를 사용하려면 ()안에 있는 인자에 등호를 붙이고 원하는 값을 지정
지정을 해놓으면 인자를 2개 제대로 전달 받으면 전달받은 값이 들어가게 됨
인자 b에 들어갈 값을 전달받지 못한 경우에는 b가 기본값으로 지정된 0으로 할당되게 됨

function sum(a, b = 0){
    console.log(a + b);
}

sum(10);
sum(10, 20);

✏️ arguments 객체

필요한 인자의 개수보다 더 많은 인자를 전달하면 생기는 상황
많은 인자를 작성하여도 오류가 나지 않는 이유는 Arguments 임
Arguments가 우리가 전달한 인자들이 몇 개가 되었든지 전부 받아서 배열처럼 저장되고 배열처럼 접근할 수 있도록 만들어 줌
Arguments는 인자가 몇개가 되었든 주는 건 다 거절하지 않고 받는 친구
우리가 인자를 초과해서 보내도 초과된 인수는 무시당할 뿐이지 오류를 발생하지는 않는다

function sum(a,b){
    console.log(arguments[0])
    console.log(arguments[1])
    console.log(arguments[2])
}

sum(10, 20,30);

✏️ 나머지 매개변수

지정한 인자를 제외한 나머지 모든 인자를 배열로 묶어서 나타낼 수 있는 구문
3개 이상의 인자를 전달받아서 나머지를 한 번에 받아서 사용하고 싶다면 Rest Parameter 구문 사용
3번째 연산자로 정계연산자처럼 ... 점을 3개 붙이고 변수 이름을 정하면 순서대로 값이 들어가고 나머지는 몇 개가 되었든 그 이후에 남는 나머지 인자들을 전부 변수 이름으로 사용할 수 있개 됨

function print(a,b,...rest){
    console.log(a);
    console.log(b);
    console.log(rest);
}

print(10,20,30,40,50,60,70);

✏️ 함수의 반환 값

함수는 특정 동작을 수행할 뿐 아니라 return이라는 명령문을 사용하여 특정 값을 변경할 수 있음
return이라는 명령문을 사용하면 현재 함수를 종료하고 지정한 값을 함수를 호출한 지점으로 반환

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

console.log(sum(10,20));

함수가 리턴 명령을 만나면 실행 중인 함수를 종료하고 뒤에 값을 함수를 호출한 위치로 반환하기 때문에 결과값이 함수를 호출한 console 지점으로 반환

✏️ 함수의 표현식

자바스크립트에서는 함수를 하나의 값으로 취급
함수를 변수의 값을 대입하듯이 표현식으로 정의할 수 있음

function sum(a, b){
    console.log(a + b);
}

const sum = function (a, b){
    console.log(a + b);
}

sum(10,20);

✏️ 화살표 함수

명령어가 한 줄일 때 중괄호를 생략하면 리턴이라는 명령문을 생략할 수 있음
중괄호가 없고 바로 실행 코드가 있으면 리턴이 보이지 않더라도 자동으로 들어감
중괄호가 열려 있다면 값이 자동으로 리턴되지 않기 때문에 값을 꼭 반환해야 하는 함수의 경우에는 별도로 리턴을 써주어야 함

const sum = (a, b) => a + b;

const sum = (a, b) =>{
    a + b;
}

console.log(sum(10, 20));

✏️ 화살표 함수에서 괄호를 생략할 수 있는 경우

필요한 인자가 하나인 경우에는 인자를 감싸고 있는 괄호를 생략할 수도 있음
괄호를 생략하는 것은 필수적인 것은 아님
인자의 개수와 상관없이 괄호를 계속 붙여도 상관없음
괄호를 생략하기 위해서는 인자의 개수가 하나일 때만 가능
인자의 개수가 2개 이상이거나 인자를 하나도 사용하지 않는 경우에는 괄호 생략 불가

✏️ 일반 함수를 화살표 함수로 변경

function hello() {
    console.log('Hello!');
    console.log('World!');
}

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

function greeting(user) {
    console.log(`Hello, ${user}!`)
}

hello 함수는 인자는 하나도 사용하지 않고 있고 실행 코드는 두 줄로 이루어져 있음

// function hello() {
//     console.log('Hello!');
//     console.log('World!');
// }

const hello = () => {
    console.log('Hello!');
    console.log('World!');
};

hello();

// function sum(a, b) {
//     return a + b;
// }

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

console.log(sum(10, 20));

// function greeting(user) {
//     console.log(`Hello, ${user}!`);
// }

const greenting = (user) =>{
    console.log(`Hello, ${user}!`);
};

greenting('겨울');