1. 함수
- 함수는 선언하고 호출하는 것.
- 우선 선언부터 해보자
1-1. 함수 선언
함수 구조
// 함수 선언
function doSomething(/* 인자 */) {
// 코드를 작성하는 부분
}인자
- 함수를 호출하는 사람으로부터 필요한 데이터를 받아올 때
- 함수 내부에서 이해하기 쉬운 이름을 부여함
- 의미있는 이름
함수 선언만 하기
코드
function doSomething() {
console.log('hello');
}
결과
- 이렇게 실행할 경우, 콘솔창에 아무것도 안뜸
- 선언만 했기 때문
1-2. 함수 호출
함수 호출하기
코드
// 1. 함수 선언
function doSomething() {
console.log('hello');
}
// 2. 함수 호출
doSomething();
결과
2. 값을 리턴하는 함수
2-1. 값을 리턴하는 함수 선언
- 앞에서 본 함수는 리턴하지 않는 함수이고
- 값을 리턴하는 함수를 살펴보자
- 값을 리턴하기 위해서는 함수 안에 인자를 적고
- return 으로 값을 전달하면 됨
코드
// 값을 리턴하는 함수
// - 인자를 받아와서 코드를 수행
// - 인자에 타입 선언 안해도 됨
// - 자바스크립은 타입이 없음
// - 어떤 값이든 값을 받아오고 값은 변수를 이용해서 함수에 접근
function add(a, b) {
const sum = a + b
// return을 이용해 값을 전달
return sum
}- a, b라는 인자를 받아와서
const sum = a + b라는 코드를 수행함- 여기서 인자 타입은 설정 안해도 됨
- 자바스크립트에서는 타입이 없음
- a, b는 어떤 값이든 값을 받아오고
- 그 값은 변수(a, b)를 이용해서 함수에 접근함
- 그 값을 수행한
sum은 return으로 값을 전달해야 함
실행
- 아무것도 안뜬다.
- 왜냐면 함수를 호출 안했기 때문!
2-2. 리턴하는 함수 호출하기
우선 함수를 호출해보자
add(1, 2)라고 add 함수에 1, 2이라는 인자값을 전달해 호출하면- 아무것도 나오지 않는다
- 아무것도 나오지 않는다
- 왜냐하면 호출만 했기 때문
- 출력하는 코드가 없음
- 그럼 콘솔창에 출력하려면 어떻게 해야 할까
호출한 함수를 변수에 넣어보자
코드
const result = add(1, 2)
// result에 선언함과 동시에 값을 할당함
// 근데 값에 함수가 있으니까 함수를 먼저 호출하고
// 함수의 인자값인 1과 2를 전달하면서 add 함수를 호출하고
// a와 b의 값이 더해진 값이 sum에 할당됨
// sum의 값이 리턴됨
console.log(result)- 앞에 함수 호출한 것을 result라는 변수에 담고
- result를 출력해주면
결과
- 1과 2를 더한 3의 값이 나온다
3. 함수를 인자로 전달
3-1. 인자를 출력하는 함수 선언
코드
// <함수를 인자로 전달>
function doSomething2(param) {
// add라는 함수를 받아옴 -> add 함수가 들어감
console.log(param) // add 그대로 출력
}- add라는 인자를 함수 안에 넣고
- add를 출력함
3-2. 함수 호출
3-2-1. 함수 자체를 넣기
- 함수 자체를 넣기 위해서는
doSomthing2(add())는 안됨doSomthing2(add)로 함수명만 호출해야 함
코드
// add를 그대로 전달
doSomething2(add) // 함수 자체가 전달됨- add라는 함수를 인자로 전달
결과
- 함수 자체를 반환함
+) 함수가 호출되는 과정
코드
function add(a, b) {
const sum = a + b
console.log('add 함수 실행됨')
return sum
}
// <함수를 인자로 전달>
function doSomething(param) {
console.log('doSomething 함수가 실행됨')
console.log(param)
}
doSomething(add)- doSomething(함수명)만 호출할 시
- doSomething 함수 호출
- 'doSomething 함수가 실행됨' 콘솔 출력
- 인자로 add 함수 자체가 전달돼서
- add 함수 코드가 출력됨
결과
3-2-2. 함수() 를 넣으면 안됨
- 가장 실수 많이 하는 방법 : 함수를 바로 호출해버리는 것
코드
doSomething2(add())- add라는 함수가 바로 실행 -> add 함수 코드가 실행됨
- 숫자가 아닌 값들이 더해지므로 NaN이 뜸
- NaN : Not-A-Number(숫자가 아님)
결과
+) 함수가 호출되는 과정
코드
function add(a, b) {
const sum = a + b
console.log('add 함수 실행됨')
return sum
}
// <함수를 인자로 전달>
function doSomething(param) {
console.log('doSomething 함수가 실행됨')
console.log(param)
}
doSomething2(add())
- add()로 함수를 호출할 경우 -> add 함수가 먼저 호출됨
- 즉시 함수가 호출되어 오류남
- 실행 순서
doSomething2(add())에서add()를 즉시 호출- 'add 함수 실행됨' 출력
- doSomething 함수 실행
- 'doSomething 함수가 실행됨' 출력
- add() 함수 받은 param 인자 출력
- add() 함수의 결과 값인 NaN 출력
결과
3-2-3. add 함수 사용하는 방법
코드
function add(a, b) {
const sum = a + b
console.log('add 함수 실행됨')
return sum
}
// <함수를 인자로 전달>
function doSomething(param) {
console.log('doSomething 함수가 실행됨')
console.log(param)
const result = add(2, 3)
console.log(result)
}
doSomething(add)
- 함수명을 통해 add 함수를 doSomething에 전달
- param 인자에 add 함수 전달
- 'doSomething 함수가 실행됨' 출력
- param 출력
- add 함수 자체가 출력
- result 변수에 2와 3이 더해진 값이 저장
- result 출력
결과
3-2-4. 변수에 함수 대입해서 사용하기
코드
// 함수명만 사용해서 함수 부르는 법
const addFun = add // 함수 명으로 선언
console.log(addFun)
// addFun도 add 함수처럼 사용하기 위해 인자 쓰면 됨
const addFunResult = addFun(1, 2)
console.log(addFunResult)결과
4. 함수를 다른 변수에 할당
const doSomething = add
- 변수에 함수를 할당하면
- doSomething은 add 함수와 같아짐
- object와 같은 원리로
- add 함수가 선언되면 add가 아닌 다른 메모리 공간에 함수 내용이 저장되고 래퍼런스(주소값)이 생김
- add 함수는 ref를 갖게 되고 가리킴
- doSomething도 add 함수와 같이 ref를 갖게 되고 가리킴
코드
function add(num1, num2) {
return num1 + num2
}
const doSomething = add
const result = doSomething(2, 3)
console.log(result)
const result2 = add(2, 3)
console.log(result2)
결과
*정리
- 함수를 사용하기 위해서는
- 1) 함수 선언
function 함수명(인자) { 함수 내용 }
- 2) 함수 호출
함수명(인자)
- 함수를 선언만 해서 출력되지 않음 -> 호출해야 함
- 1) 함수 선언
- 1) 함수 선언
- 선언할 때는 함수가 필요한 인자값을 전달해야 함
- 2) 함수 호출
- 인자로 함수를 전달할때는 ()를 쓰지 않고 함수명만 인자에 작성함
해당 내용은 다음 자료를 참고했습니다.
프로그래밍 포기 하지 마세요 (자바스크립트 함수 기본편)
