함수
함수란 어떤 작업을 수행하기 위해 필요한 문 (statement)들의 집합을 정의한 코드 블록이다.
함수 일반적 기능은 어떤 작업을 수행하는 문(statement)들의 집합을 정의하여 코드의 재사용에 목적이 있다. 이러한 일반적 기능 이외에 객체 생성, 객체의 행위 정의(메소드), 정보 은닉, 클로저, 모듈화 등의 기능을 수행할 수 있다.
함수 는 first-class object , 일급 객체 라고 하는데 조건이 있다.
- 변수에 담을 수 있다.
- 인자로 전달할 수 있다.
- 반환값으로 전달할 수 있다.
함수 정의
1. 함수 선언문
function 함수명(매개변수) {
함수 몸체
}- 함수명 : 함수를 구별하는 식별자로, 함수 선언문의 경우 함수명은 생략할 수 없다.
- 매개변수 : 함수 호출시 데이터를 입력받는 기능을 한다.
- 함수 몸체 : 함수가 호출되었을 때 실행되는 문들의 집합이다.
2. 함수 표현식
// 리터럴 표현식
// 익명 함수
let subtraction = function (a, b) {
return a - b
}
// 기명 함수
let plus = function num(a, b) {
return a + b
}
console.log(subtraction(2, 2)) //0
console.log(num(2, 2)) //Uncaught ReferenceError: num is not defined
------------------------------------------------------------------>
//변수 할당 방식
let subtraction = function (a, b) {
return a - b
}
let num = subtraction // num 과 subtraction 은 같은 참조값을 가진다.
console.log(num(2, 2)) //0
console.log(subtraction(2, 2)) //0
함수 표현식 특징
- 함수 표현식은 변수를 선언함과 동시에 값을 할당하는
리터럴 방식을 사용 할 수 있다. - 함수 표현식은 함수의 이름을
익명으로 할수도기명으로 할 수 있지만 익명으로 하는 것이 보통이다. - 함수를 다른
변수에 할당하여 저장할 수 있다.
함수 표현식 주의점
리터럴 방식에서 기명 함수를 호출할 때 함수 이름을 호출하게 되면 에러가 뜨는데 이유는 리터럴 방식을 사용하게 되면 선언된 변수에 참조값이 있기 때문이다.참고
리터럴 방식
3. 함수 호이스팅
함수 선언문 호이스팅
name() // bohun
function name() {
console.log('bohun')
}자바스크립트 es6 의 경우 모든 선언문을 호이스팅 할 수 있는데 함수 선언문도 가능하다.
함수 선언문으로 정의된 함수는 함수 선언 , 초기화 , 할당 이 한번에 이루어지기 때문에 호이스팅이 이루어진다.
함수 표현식 호이스팅
let app = num //main.js:1 Uncaught ReferenceError: Cannot access 'num' before initialization
let num = function () {
console.log('bohun')
}함수 표현식의 경우 변수 호이스팅 이 발생하는데 변수 호이스팅 은 생성 및 초기화와 할당이 분리되어 진행되기 때문에 선언 전에 할당을 해버리면 오류가 뜬다.
4. 매개변수
let num = function (a, b) //인자 {
console.log(a, b) //인수
}
num(1) // 1, undefined | 인자가 인수를 전달하지 않으면 매개변수는 undefined로 초기화 된다.매개변수 는 작업 실행을 위해 추가적인 정보가 필요한 경우 매개변수를 지정해주는 역할이고 함수 내에서 변수와 동일하게 동작한다.
4-1. primitive parameter 원시 매개변수
function num(primitive) {
primitive += 1
return primitive
}
let a = 0
console.log(num(a)) //1
console.log(a) //0원시 타입 으로 인자를 전달하게 되면 매개변수를 통한 값은 변경되어도 원시타입의 값은 변경 되지 않는다.
4-2. object prameter 객체 매개변수
function change(name) {
name.age = 15
}
const brown = { age: 20 }
change(brown)
console.log(brown) //{age: 15}객체 타입 으로 인자를 전달하게 되면 참조값 이 전달된다.
위 코드에서 함수는 매개변수의 객체를 받으면 나이를 바꾸는 기능을 가지고 있다.
이 때 참조값 { age : 20 }을 매개변수로 전달하게 되면 name.age = 15 에 의해
age : 20 에서 age : 15 로 바뀌게 된다.
5. 함수의 범위
let global = 'global' //전역 변수
function printMessage() {
let message = 'hello'
console.log(message) //hello //지역 변수
console.log(global) //global
}
printMessage()
console.log(message) // Uncaught ReferenceError: message is not defined
함수는 기본적으로 함수 내부에서 전역 변수를 호출 할 수는 있지만,
전역변수가 함수 내부 변수를 호출 할 수는 없다.
//부모 함수
function printMessage() {
let message = 'hello'
console.log(message)
//자식 함수
function printAnother() {
console.log(message)
let childMessage = 'hello'
}
console.log(childMessage)
}
printMessage()함수에 또다른 함수를 집어넣었을 때에도
부모 함수가 자식 함수를 호출하지 못하고 자식 함수는 부모 함수를 호출할 수 있다.
6. 콜백 함수
function randomQuiz(answer, printYes, printNo) {
if (answer === 'love you') {
printYes()
} else {
printNo()
}
}
const printYes = function name() {
console.log('yes!')
}
const printNo = function pring() {
console.log('no!')
}
randomQuiz('worng', printYes, printNo)
randomQuiz('love you', printYes, printNo)
콜백 함수 는 함수를 명시적으로 호출하는 방식이 아닌 특정 이벤트가 발생했을 때 시스템에 의해 호출되는 함수이다.
7. 리턴값
function calculate(command, a, b) {
switch (command) {
case 'add':
return a + b
break
case 'substract':
return a - b
break
default:
throw Error('unkonwn command')
break
}
}
console.log(calculate('add', 2, 3)) // 5리턴값 은 함수 안에서만 사용 가능하며 함수를 호출한 부분으로 데이터를 전달 해주기 위해 사용한다.
function sum (num1,num2) {
console.log('return 전');
return;
console.log('return 후'); // return 후 는 실행되지 않음리턴값 다음의 코드는 실행되지 않는다.
참고자료
수코딩
함수 function
드림코딩엘리
