[JS] (12) 함수 - 2 | 모던 자바스크립트 Deep Dive]

sehannnnnnn·2021년 7월 22일
0

JavaScript DeepDive

목록 보기
4/7
post-thumbnail

함수 호출

함수가 호출 되면 현재의 흐름을 중단하고 함수 내부로 실행흐름을 옮긴다.

매개변수 & 인수

function add(x,y) { 
	return x+y;
} //x,y는 매개변수
add(2,5) // 2,5는 인수

매개변수는 함수몸체 내에서 ({}안에서) 생성되며 함수 생성 당시 값은 undefined으로 초기화 된다. 또한 함수몸체 내에서만 호출이 가능하다.

함수 생성 시 매개변수와 호출 시 인수의 개수가 일치하지 않아도 Error를 일으키지 않는다. 인수가 더 적을 경우 대입되지 않은 매개변수는 undefined으로 처리되며, 인수가 더 많을 경우 초과된 인수는 함수에 입력되지 못하고 버려진다.
-> 암묵적으로 arguments 객체 프로퍼티에 보관되지만, 나중에 다룰 내용

인수 확인 과정

자바스크립트는 변수의 타입을 자동으로 지정해 주는 동적타입언어이기 때문에 함수 속에 인수를 대입 할 때 코드작성자가 원하는 타입의 인수가 대입되었는지 확인하는 과정이 필요하다.

function add(x,y) {
	return x+y;
}
add(1,3); //4
add(a,b); //ab

이러한 경우 인수의 타입을 확인해주어야하는데
함수 내부 흐름은 런타임 시에만 구동되기 때문에 런타임 중에 인수 타입 확인을 해야한다.

function add(x,y) {
	if(typeof x!=='number' || typeof y!=='number)
    	throw new TypeError ('messeage')
    return x+y;
} 

또는 단축평가의 사용을 통해 확인

function add(a,b) {
	a = a || 0; //a 아니면 0
    b = b || 0;
    return a+b;
}

매개변수는 수가 적을 수록 좋다! 매개변수가 많아지면 하나의 매겨변수를 객체로 지정하여 프로퍼티 값으로 전달하는 것도 좋은 방법이다.

반환문

반환문은 return 키워드를 사용한다.
return 옆에 오는 문이 반환문이며, 표현식의 평가 결과를 나타낸다.

function multiply(x,y) {
	return x*y; //반환문
}

var result = multiply(3,5);
console.log(result); //15

이의 특징 두가지는

1) 함수의 실행을 중단시킨다. => 함수 몸체를 빠져나간다. 변환문 이후의 다른 문은 무시한다!
2) return 이후 표현식을 반환한다. 아무 표현식을 지정하지 않을 경우 undefined를 반환한다.

자동으로 세미콜론으로 붙혀주는 자바스크립트 때문에 return 이후 값을 줄바꿔서 enter치고 입력하면 에러난다!

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

이전 포스팅에서 올렸듯, 원시 값은 값에 의한 전달, 객체는 참조에 의한 전달 방식으로 동작한다. 매개변수에 경우에도 함수 호출 할 때 전달방식이 객체이냐, 원시값이냐에 따라 다르다.

원시값 매개변수 : 값 자체가 복사되어 생성됨 (메모리가 두개가 생김!)
객체를 매개변수 : 참조 값이 복사되어 생성됨 (같은 메모리 주소!)

function change(primitive, obj) {
	primitive += 100;
        obj.name = 'Kim';
}
//외부 상태(원본)
var num = 100; 
var person = {name:'Lee'};

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

change(num,person); 함수 호출

console.log(num); //100 - 원본 훼손 x
console.log(person); // {name: 'Kim'} - 원본 훼손

원시값에 경우 함수 직접 변경할 수 없고 재할당이 이루어지기 때문에 값을 새로운 원시값으로 교체됬으며, 객체 타입 인수를 전달받은 경우 객체는 변경가능한 값이므로 재할당 없이 직접 객체가 변경되었다.

이처럼 함수에 의해 외부상태, 원본 값이 변경되는 경우를 부수효과가 발생된다라고 하는데, 부수효과는 코드의 복잡성을 증가시키고 가독성을 해치는 원인이 된다. 추후에 배울 내용으로 이러한 문제들을 어떻게 해결하는지 알아보자.

외부 상태를 변경하지 않고 외부 상태에 의존하지도 않는 함수를 순수 함수라 한다.
= 순수 함수의 사용으로 안정성을 높히는 프로그래밍 패러다임을 함수형 프로그래밍이라고 한다.

profile
FE 개발자 준비생 블로그 🪐

0개의 댓글