[JS] 함수(function)

D-day카운터를 만들면서 함수의 개념도 같이 이해해보도록 하자

함수

: 특정 기능을 수행하거나 계산을 수행하는 코드의 집합 (재사용): 호출을 통해 실행, 사용할 수 있다: 함수 내부의 로직은 함수 호출시 동작한다

문법

function 함수이름([매개변수1, 매개변수2]){
        //여러개의 변수+연산자+형변환+조건문+반복문을 활용해 만들어진 특정 기능을 하는 구문(알고리즘)
        [return 값;] // 반환데이터
    }

매개변수란? (parameter)

: 외부 데이터를 함수 내부로 전달하는 매개체 역할을 하는 변수

- 함수가 호출되어 실행되기 시작하면 함수 내부는 외부에서 접근할 수 없게 된다

이때, 함수 외부에서 함수 내부로 값을 전달하는 방법 = 매개변수 이용!

함수에따라 매개변수가 없을수도 있고 1개이상 있을수도 있다

함수 선언과 호출

const sum = function(){
  // 함수명(sum)
  console.log(10+10)
} // 함수 선언

sum() // 함수 호출. 결과 20

onclick

: 해당 속성을 부여받은 태그가 사용자에 의해 클릭 되었을 때, 할당되어 있는 수식 혹은 코드를 실행함

<head>
    <title>D-Day</title>
    <script>
        const output = function(){
            console.log("함수 작동")
        }
    </script>
</head>
<body>
    <button onclick="output()">버튼</button>
    //버튼 클릭시 output 함수 '호출'
</body>

querySelector

: 제공한 선택자 또는 선택자 요소와 일치하는 문서 내 첫 번째 요소를 반환한다: 일치하는 요소가 없으면 null 반환- 선택자를 만족하는 모든 요소의 목록이 필요하다면 querySelectorAll()을 사용

문법

document.querySelector(selectors);

문서내 input의 값을 콘솔로 찍어보자

<head>
    <script>
        let dateFormData = function () {
                console.log(document.querySelector('#input-year').value)
                console.log(document.querySelector('#input-month').value)
                console.log(document.querySelector('#input-date').value)
            }
    </script>
</head>
<body>
    <input id="input-year" class="dafault-input">
    <input id="input-month" class="dafault-input">
    <input id="input-date" class="dafault-input">
    <button onclick="dateFormData()">제출</button>
</body>

콘솔이 찍히긴 하지만, 각 데이터 총 3번의 콘솔이 찍히고 변수로 선언되어있지 않다

이 코드를 조금 더 다듬어주자

let dateFormData = function () {
	const inputYear = document.querySelector('#input-year').value
    const inputMonth = document.querySelector('#input-month').value
    const inputDate = document.querySelector('#input-date').value

    console.log(inputYear, inputMonth, inputDate)
}

new Date()

: 자바스크립트에서 날짜 데이터는 일종의 객체로 관리됨

매개변수를 제공하지 않으면, 생성 순간의 날짜와 시간을 나타내는 객체를 생성함

해당 객체를 이용해 타이머 기능을 구현해보자

        const dateFormData = function () {
            const inputYear = document.querySelector('#input-year').value;
            const inputMonth = document.querySelector('#input-month').value;
            const inputDate = document.querySelector('#input-date').value;

            const dateFormat = inputYear + '-' + inputMonth + '-' + inputDate;
            console.log(inputYear, inputMonth, inputDate)
        }

        const counterData = function () {
            const nowDate = new Date();
            const entryDate = new Date(dateFormat);
            const remaining = (nowDate - entryDate) / 1000; // 목표일까지의 밀리세컨즈. 우리는 초까지만 필요하긷때문에 /1000을 해줌

            const remainingDate = Math.floor(remaining / 3600 / 24); // 소수점 이하의 수를 내림해주는 메서드
            const remainingHours = Math.floor(remaining / 3600) % 24;
            const remainingMin = Math.floor(remaining / 60) % 60;
            const remainingSec = Math.floor(remaining % 60);

            console.log(remainingDate, remainingHours, remainingMin, remainingSec);
        }

12번째 줄을 보면 dateFormat은 위의 dateFormData 함수에서 지역변수로 선언되었기 때문에 버튼을 클릭했을때 오류가 발생하게 된다

변수는 함수 외부로 나갈 수 없고 내부로 참조되는 것은 가능하다

이런경우 해결할 수 있는 방법은

함수의 리턴(return)

: 리턴을 사용해 함수 내부에 존재하는 데이터 혹은 연산의 결과를 외부로 줄 수 있다

- 바로 뒤에 오는 데이터를 함수로 호출했던 위치로 전달해줌

- return 명령어 이후로는 해당 함수를 종료시킴

const sum = function() {
  let result = 10 + 10;
  return result;
  console.log('방가워요')
}

console.log(sum()) // 결과 20, 4번줄의 방가워요는 미출력

어떠한 함수가 return 데이터를 지정해 두었다면 아래와 같이 반환값을 특정 변수에 담아줄 수도 있다.

함수를 호출 했던 위치로 리턴되는 데이터가 전달되기 때문에

const sum = function() {
  let result = 10 + 10;
  return result;
  console.log('방가워요')
}

let returnData = sum()
console.log(returnData)

리턴을 활용해 변수를 선언하고, dataFormat을 counterData 함수에서 사용할 수 있도록 적용한 코드는 아래와 같다

        const dateFormData = function () {
            const inputYear = document.querySelector('#input-year').value;
            const inputMonth = document.querySelector('#input-month').value;
            const inputDate = document.querySelector('#input-date').value;

            const dataFormat = `${inputYear}-${inputMonth}-${inputDate}`
            // 템플릿 리터럴
            
            return dataFormat;
        }

        const counterData = function () {
            const targetDateInput = dateFormData(); // 입력데이터의 리턴값을 변수로 선언
            const nowDate = new Date();
            const entryDate = new Date(targetDateInput).setHours(0,0,0,0);
            // 기준시간이 9시이기때문에 0시로 초기화
            const remaining = (entryDate - nowDate) / 1000;

            const remainingDate = Math.floor(remaining / 3600 / 24);
            const remainingHours = Math.floor(remaining / 3600) % 24;
            const remainingMin = Math.floor(remaining / 60) % 60;
            const remainingSec = Math.floor(remaining % 60);

            console.log(remainingDate, remainingHours, remainingMin, remainingSec);
        }

함수 선언의 종류

함수 표현식(익명함수)

: 호이스팅의 영향을 받지 않음

const 함수이름 = function(매개변수1, 매개변수2, ...){
	// ...code here
	return 결과값
}

함수 선언문

: 호이스팅의 영향으로 오류를 예측하기 어려움

function 함수이름(매개변수1, 매개변수2, ...){
    // ...code here
    return 결과값
}

화살표 함수

- 메서드 내에 함수를 사용하는 경우에 주료 사용

const 함수이름 = ( 매개변수1, 매개변수2, ... )=>{
    // ...code here
    return 결과값
}

가볍게 호이스팅의 개념을 살펴보자함수 선언문의 경우 호이스팅으로 함수 정의 전 해당 함수를 호출할경우 마치 해당 함수가 호출전에 위치한것 처럼 동작.함수 표현식은 호이스팅의 영향을 받지 않으므로 함수 정의 전 함수 호출시 오류를 발생시킴.

// 1. 함수 표현식

sum1()

const sum1 = function() {
  let result = 10+10;
} // 에러

// 2. 함수 선언문

sum2()

function sum2() {
  let result = 10+10;
} // 에러발생 x

// 호이스팅으로 마치 이렇게 동작해요!

function sum2() {
  let result = 10+10;
}

sum2()

본 글은 훈훈한 자바스크립트 강의의 내용을 정리한 글입니다

'Frontend > JavaScript' 카테고리의 다른 글

[JS] 매개변수(parameter)와 인자(argument) (0)	2023.04.05
[JS] 반복문 (for, while, for in, for of, do-while) (0)	2023.04.04
[JS] 조건문 (if, if..else, 논리연산자, 비교연산자) (0)	2023.03.22
[JS] 배열(Array), 객체(Object) (1)	2023.03.19
[JS] 변수, 문자와 숫자 (0)	2023.03.19

함수