Javascript:: 함수란?(2)

함수란?(1)

https://dev-h2.tistory.com/82

Javascript:: 함수란?(1)

 

 

 

 

함수 호출

매개변수와 인수

// 함수 선언문
function add(x, y) {
	return x + y;
}

// 함수 호출
// 인수 1과 2가 매개변수 x와 y에 순서대로 할당되고 함수 몸체의 문들이 실행됨
var result = add(1, 2);

• 함수를 실행하기 위해 필요한 값을 함수 외부에서 함수 내부로 전달할 필요가 있는 경우, 매개변수(인자)를 통해 인수를 전달함

 

• 매개변수는 함수를 정의할 때 선언하며, 함수 몸체 내부에서 변수와 동일하게 취급됨

 

function add(x, y) {
	console.log(x, y); // 2 5
    return x + y;
}

add(2, 5);

// add 함수의 매개변수 x, y는 함수 몸체 내부에서만 참조할 수 있음
console.log(x, y); // ReferenceError: x is not defined

• 매개변수는 함수 몸체 내부에서만 참조할 수 있고 함수 몸체 외부에서는 참조할 수 없음

 

function add(x, y) {
	return x + y;
}

console.log(add(2)); // NaN

• 함수는 매개변수의 개수와 인수의 개수가 일치하는지 체크하지 않음
• 인수가 부족해서 인수가 할당되지 않은 매개변수의 값은 undefined임
• 2 + undefined와 같으므로 NaN이 반환됨

 

function add(x, y) {
	return x + y;
}

console.log(add(2, 5, 10)); // 7

• 매개변수보다 인수가 더 많은 경우 초과된 인수는 무시됨

 

function add(x, y) {
	console.log(arguments);
    // Arguments(3) [2, 5, 10, callee: f, Symbol.iterator): f]
    
    return x + y;
}

add(2, 5, 10);

• 초과된 인수는 그냥 버려지는 것은 아님
• 모든 인수는 암묵적으로 arguments 객체의 프로퍼티로 보관됨

 

인수 확인

function add(x, y){
	return x + y;
}

console.log(add(2)); // NaN
console.log(add('a', 'b'); // 'ab'

• 자바스크립트 함수는 매개변수와 인수의 개수가 일치하는지 확인하지 않음
• 자바스크립트는 동적 타입 언어로 매개변수의 타입을 사전에 지정할 수 없음

 

function add(x, y) {
	if (typeof x !== 'number' || typeof y !== 'number') {
    	// 매개변수를 통해 전달된 인수의 타입이 부적절한 경우 에러를 발생시킴
        throw new TypeError('인수는 모두 숫자 값이어야 합니다.');
    }
	
    return x + y;
}

console.log(add(2)); // TypeError: 인수는 모두 숫자 값이어야 함
console.log(add('a', 'b'); // TypeError: 인수는 모두 숫자 값이어야 함

• 함수를 정의할 때 적절한 인수가 전달되었는지 확인할 필요가 있음

 

function add(a, b, c) {
	a = a || 0;
    b = b || 0;
    c = c || 0;
    return a + b + c;
}

console.log(add(1, 2, 3)); // 6
console.log(add(1, 2)); // 3
console.log(add(1)); // 1
console.log(add()); // 0

• 인수가 전될도지 않은 경우 단축 평가를 사용해 매개변수에 기본값을 할당하는 방법도 있음

 

function add(a = 0, b = 0, c = 0) {
    return a + b + c;
}

console.log(add(1, 2, 3)); // 6
console.log(add(1, 2)); // 3
console.log(add(1)); // 1
console.log(add()); // 0

• ES6에서 도입된 매개변수 기본값을 사용하면 함수 내에 수행하던 인수 체크 및 초기화를 간소화 할 수 있음
• 매개변수 기본값은 매개변수에 인수를 전달하지 않았을 경우와 undefined를 전달한 경우에만 유효함

 

매개변수의 최대 개수

$.ajax({
	method: 'POST',
    url: '/user',
    data: { id: 1, name: 'Lee' },
    cache: false
})

• 이상적인 함수는 한 가지 일만 해야하며 가급적 작게 만들어야 함
• 최대 3개 이상을 넘지 않아야 하고 그 이상의 매개변수가 필요하다면 하나의 매개변수를 선언하고 객체를 인수로 전달하는 것이 유리함

 

반환문

function multiply(x, y) {
	return x + y;
}

// 함수 호출은 반환값으로 평가됨
var result = multifly(3, 5);
console.log(result); // 15

• 함수는 return 키워드와 표현식(반환값)으로 이뤄진 반환문을 사용해 실행 결과를 함수 외부로 반환할 수 있음

 

function multifly(x, y) {
	return x * y; // 반환문
    // 반환문 이후에 다른 문이 존재하며 그 문은 실행되지 않고 무시됨
    console.log('실행되지 않음');
}

console.log(multifly(3, 5)); // 15

• 반환문은 함수의 실행을 중단하고 함수 몸체를 빠져 나옴

 

function foo () {
	return ;
}

console.log(foo()); // undefined

• 반호나문은 return 키워드 뒤에 오는 표현식을 평가해 반환함
• return 키워드 뒤에 반환값으로 사용할 표현식을 명시적으로 지정하지 않으면 undefined가 반환됨

 

function foo () {
	// 반환문을 생략하면 암묵적으로 undefined가 반환됨
}

console.log(foo()); // undefined

• 반환문은 생략 가능

 

function multifly(x, y) {
	// return 키워드와 반환값 사이에 줄바꿈이 있으면
    return  // 세미콜론 자동 삽입 기능(ASI)에 의해 세미콜론이 추가됨
    x * y; // 무시됨
}

console.log(multifly(3, 5)); // undefined

• return에는 세미콜론 자동삽입 기능이 있음

 

<script>
	return; //SyntaxError: Illegal return statement
</script>

• 반환문은 함수 몸체 내부에서만 사용할 수 있음

 

참조에 의한 전달과 외부 상태의 변경

// 매개변수 primitive는 원시 값을 전달받고, 매개변수 obj는 객체를 전달받음
function changeVal(primitive, obj) {
	primitive += 100;
    obj.name = 'Kim';
}

// 외부 상태
var num = 100;
var person = { name: 'Lee' };

console.log(num); // 100
console.log(person); // {name: "Lee"}

// 원시 값은 값 자체가 복사되어 전달되고 객체는 참조 값이 복사되어 전달됨
changeVal(num, person);

// 원시 값은 원본이 훼손되지 않는다
console.log(num); // 100

// 객체는 원본이 훼손된다.
console.log(person); // {name: "Kim"}

• 원시타입 인수를 받은 매개변수는 직접 변경 불가능한 값이고, 객체 타입 인ㅅ를 전달받은 매개변수는 직접 변경할 수 있음

참고자료

• 모던 자바스크립트 Deep Dive: 자바스크립트의 기본 개념과 동작 원리(위키북스, 이웅모 저)