[TIL] 함수 기본

728x90

1. 함수

- 함수란 특정한 작업을 하나의 단위로 묶어놓은 것을 의미한다.
- 함수를 사용하면 불필요한 소스코드의 반복을 줄일 수 있다는 장점이 있다.

2. 함수의 종류

기본적으로 제공하는 내장 함수와 개발자가 정의하여 사용할 수 있는 사용자 정의 함수가 존재한다.

1) function함수 : function 예약어
2) 화살표 함수 : => (화살표) 기호를 사용

화살표 함수는 return , {} 생략이 가능하다.

3. 함수 정의하기

• 프로그램에는 똑같은 코드가 반복적으로 사용되어야 할 때가 많다.

• 함수를 사용하면 소스코드의 길이를 줄일 수 있다.

function 함수명(매개변수){
	실행할 소스코드
	return 반환값 
}

매개변수 : 함수 내부에서 사용할 변수
반환 값 : 함수에서 처리된 결과를 반환

4. 함수 선언문 vs 함수 표현식

함수에는 이름을 넣어 줘야 한다. 변수와 마찬가지로 함수를 만드는 행위도 선언한다고 표현한다.

- 함수 선언문 : function 키워드 뒤에 이름을 넣어주는 방식
- 함수 표현식 : 함수를 상수나 변수에 대입하는 방식

//함수 선언문 
Function a() {}  

// 함수표현식
Const b = function() {} 

//화살표함수 선언문 
() => {}  

//화살표함수 표현식
Const c = () => { }

(+ 호이스팅 부분 2022.05.27 추가)

hello(name); // 호이스팅이 일어나므로 호출이 가능하다. 

// 함수 선언문 
function hello(name) {
	console.log("hello, "+name);
}

함수 선언문에서의 호이스팅

함수선언문은 코드를 구현한 위치와 관계없이 자바스크립트의 특징인 호이스팅이 일어난다.
함수 선언문에서의 호이스팅이란 브라우저가 자바스크립트를 해석할 때 함수 선언문들이 코드 맨 위로 끌어올려지는 것을 의미한다. 이러한 특징 때문에 함수 선언문의 위치와 관계없이 함수 선언을 했으면 어디서든 호출이 가능하다.

함수 표현식은 호이스팅이 일어날까?

자바스크립트는 코드를 한 줄씩 읽으면서 실행하는 interpreter 언어이다.
자바스크립트가 한 줄씩 읽을 때, 함수 표현식은 코드에 도달해야 함수가 생성되기 때문에 호이스팅이 일어나지 않는다.

5. 함수의 호출 (call)

a();

✔ 함수를 여러 번 호출하면 내부 구현문이 여러 번 호출이 된다

6. 반환 값

함수에서 값을 반환하면서 종료한다.

반환 값을 쓰지 않더라도 내부적으로 undefined가 반환되는 것을 볼 수 있다.

return문만 실행되어 crystal만 반환하고 hello는 콘솔에 출력되지 않고 a 함수가 종료되는 것을 볼 수 있다.

1) 값 하나만 반환

2) 값 여러개 반환

값을 여러 개 리턴 하려면 배열로 묶어서 리턴 할 수 있다.

7. 매개변수(parameter)와 인수(argument)

함수를 선언할 때는 함수의 소괄호 안에 넣는 값을 매개변수(parameter),
함수를 호출할 때 함수의 소괄호 안에 넣는 값을 인수(argument)라고 한다.

// a 함수를 선언
function a(parameter) {
	console.log(parameter);
}

// a 함수를 호출
a(argument);

매개변수(parameter)와 인수(argument)는 연결되어 있다. 함수를 선언할 때 파라미터는 변수처럼 선언된다. 함수를 호출 시 아규먼트는 파라미터의 변수 값이 되어 함수가 동작한다. let parameter = 'argument';

매개변수(parameter)와 인수(argument) 는 여러 개 사용하는 것도 가능하다. 아규먼트가 파라미터보다 많은 경우 무시된다. 위의 코드를 보면 아규먼트 'Argument'가 무시되고, Hello Parameter만 콘솔에 출력되는 것을 볼 수 있다.

매개변수와 인수가 서로 짝지어지지 않고, 매개변수가 인수보다 많은 경우 undefined 값이 할당된다.

함수 내에서 arguments라는 값을 사용할 수 있다. arguments라는 변수는 내가 지정한 argument들을 배열로 저장하고 있다.

[참고] JS 코드는 HTML 밑에 짜기

<div id="alert" class="alert-box">
</div>
    <button onclick="openAlert()">버튼</button>
    
<script>
    function openAlert() {
        document.getElementById('alert').style.display = 'block';
    }
</script>

자바스크립트는 HTML을 조작하는 언어이다. 조작할 HTML이 JS 위쪽에 존재해야 한다.

자바스크립트는 인터프리터 언어이므로 HTML 파일을 읽을 때 위에서부터 한줄 한줄 읽기 때문에