함수
함수는 ①특정 작업을 수행하도록 설계된 코드 블록에 ②이름을 붙인 것이다.
이름을 붙인 이유는 호출하기 위해서이다.
즉 함수는 재사용하기 위해 호출될 수 있는 코드 블록이다.
'무언가'가 호출하면 함수가 실행된다.
1. 왜 함수를 쓰는가
코드를 재사용(reuse) 하기 위해서이다. 코드를 한 번 정의해 두고 여러 번 사용하기 위해서이다.
데이터에 이름을 부여하는 것이 변수라면, 코드에 이름을 붙이는 것이 함수이다.
| 구분 | 변수 | 함수 |
| 차이점 | 데이터에 이름을 부여 | 코드에 이름을 부여 |
| let number = 3 |
function sayHi(){
console.log("Hi") } sayHi() |
|
|
반드시 함수를 호출해야 한다
|
||
| 공통점 | 함수 이름에는 문자, 숫자, 및 특수 기호 2개($_)가 사용된다 | |
| 괄호 안에 쉼표로 구분된 매개 변수 이름이 포함될 수 있다 | ||
| 함수에 의해 실행될 코드가 중괄호 안에 배치된다. | ||
| 구분 | 함수 선언식 | 함수 표현식 |
| 차이점 | 호출문의 위치(호이스팅) 함수 호출문이 함수 선언식보다 화면의 위(앞)에 있어도 괜찮다. |
호출문의 위치 함수 호출문이 함수 선언식 뒤에 와야 한다. |
| 공통점 | 함수를 만드는 기능을 담당한다. | |
| 함수가 사용되기 위해서는 반드시 함수를 호출해야만 한다. | ||
2. 함수 선언식
① function ② 함수 이름 ③(반드시 소괄호) ④{
//중괄호 속에 함수의 기능 = 코드가 들어가는 곳
}이와 같은 선언이 끝나면, '함수 이름'을 '중괄호 안의 기능' 대신 사용할 수 있다.
3. 힘수 표현식
④ const ② 함수 이름 = ①function ③ (){
// 중괄호 속에 함수의 기능 = 코드가 들어가는 곳
}대입 연산자 뒤에는 함수 선언식에서 이름만 뺀 것과 동일하다. 여기에 이름을 붙이는 것이 함수 표현식이다.(이름만 빼고 만든 함수= 익명 함수)
이와 같은 선언이 끝나면, '함수 이름'을 '중괄호 안의 기능' 대신 사용할 수 있다.
함수 선언식, 함수 표현식 모두 함수 이름을 중 괄호 안에 쓰여 있는 코드 블록 대신 사용할 수 있다.
4. 함수 호출 문
함수는 호출해야 실행이 된다.
함수를 호출할 때는 함수의 이름 뒤에 소괄호를 붙인다.
5. 함수 이름 짓기
함수 이름에는 문자, 숫자, 및 특수 기호 2개($_)가 사용된다.
함수의 이름을 지을 때 참고사항 : 변수 이름 정할 때에의 규칙과 유사하다.
고려 사항
- 첫째 함수의 기능을 적절하게 표현할 수 있는 이름을 사용하는 것이 좋다.(그래야 코드 관리하기가 쉽다)
- 둘째 명사보다는 동사로 된 이름을 사용
- 셋째 소문자로 시작하는 이름을 쓰고, 여러 단어가 합쳐진 경우에는 카메 표기법을 사용(이 사항은 변수에서도 동일)
6. 카멜 표기법(낙타 등 표기법)
2 단어 이상일 때 - 다음 단어의 첫 번째 문자를 대문자로 쓰는 방법: 코드의 가독성이 높아진다.
function sayHi(){
console.log("Hi")
}이 상태에서는 아무 일도 안 일어난다. 함수 호출 문으로 함수를 호출해야만 한다.
7. 함수 선언식 예시
함수 호출문: 함수의 이름+ (소괄호)
입력 내용
function sayHi(){
console.log("Hi")
}
sayHi()출력 결과
입력 내용 2
function sayHi(){
console.log("Hi")
console.log("good")
console.log("morning")
console.log("evening")
}
sayHi()
sayHi()함수의 사용 이유 : sayHi가 console.log("Hi") 보다 쉽다. 위의 코드에서 sayHi 두 번만 쓰면 8개 출력을 할 수 있다.
출력 결과 2
8. 함수 표현식 예시
입력 내용
const sayGood = function(){
console.log("Hi~")
console.log("good~")
console.log("morning~")
console.log("evening~")
}
sayGood()
sayGood()출력 결과
9. 함수 안에서 변수 만들기
함수 내부에서 선언한 변수는 함수 밖에서 사용할 수 없다(함수 내부에서 선언된 변수는 함수 밖에서 쓸 수 없으므로 지역변수라 부르기도 한다)
입력 내용
function sayHi(){
let hi = "문자 안녕하세요"
console.log("Hi")
}
sayHi()
console.log("Hi")출력 결과
오류가 발생한다. - '정의되지 않았다'라는 오류 발생.