[Javascript] 자바스크립트에서의 함수란

자바스크립트에서 함수란 무엇이고 왜 사용하는지, 함수의 특징 등을 알아보자.

 

🔹함수(function)란?

함수란 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 **블록을 의미한다.

이러한 함수는 필요할 때마다 호출하여 해당 작업을 반복해서 수행할 수 있다.

**블록 : 자바스크립트에서 블록이란 함수나 실행문의 중괄호({})로 묶여진 부분을 가리킨다.

 

 

🔹함수를 사용하는 이유

함수는 왜 사용할까?

1️⃣ 재사용성

같은 기능을 반복해서 사용하고 싶을 때 함수를 정의해 놓으면 같은 코드를 사용하지 않고 함수 호출만으로 원하는 기능을 사용할 수 있다. 코드를 한번만 작성하므로 지저분하지 않게 코드를 짤 수 있고, 용량도 줄어들 것이다.

2️⃣ 가독성
함수의 기능을 정의하고 함수의 명을 잘 지어놨다면 해당 함수명만으로도 이 함수가 어떤 기능을 할지 어떻게 동작할지 유츄할 수 있고, 해당 기능이 필요할 땐 선언한 함수를 호출함으로써 불필요한 소스는 줄어들고 체계적이며 가독성이 좋은 소스를 구성할 수 있다.

3️⃣ 모듈화
라이브러리 파일을 만들거나 대규모의 프로젝트를 구성하게 될 때 필요한 기능을 정의하고 기능을 팀별로 구성하여, 서로에게 영향을 미치지 않도록 구조별로 구성하여 작성이 가능해지고 유지보수나 버그가 발생시 해당 함수를 수정함으로써 보다 편리해진다.

 

 

🔹함수 구성요소

function a(){} //함수 선언

a(); //함수 호출




//함수 선언
function 함수이름(매개변수1, 매개변수2,...) { 
  return x + y; 
  (함수가 호출 되었을 때 실행하고자 하는 실행문;)
} 

//함수 호출
document.write(함수이름(2, 3)); <<함수호출. 함수에 인수로 2와 3을 전달하여 호출함.

 

🔸함수이름(function name) : 함수를 구분하는 식별자(identifier)

🔸매개변수(parameter) : 함수를 호출할 때 인수(argument)로 전달된 값을 함수 내부에서 사용할 수 있게 해주는 변수이다.

🔸인수(argument): 함수가 호출될 때 함수로 값을 전달해주는 값을 말합니다.

 

 

 

 

⬇⬇ 제로초님 자바스크립트 강의를 보고 정리한 것.

🔹 함수를 선언하는 방식들

function a(){} //함수 선언문
const b = function(){}; //함수 표현식
const c = () => {}; //화살표 함수

변수와 마찬가지로 함수를 만드는 행위도 선언한다(declare)라고 표현한다.

선언하는 방식이 다른 이유는 동작하는 게 다르다.

프로그래밍에서 비슷한 건데 다른 방식이 있는 것은 어떠한 다른점이 있기 때문이다.

 

함수 선언문 뒤에는 세미콜론을 안 붙이는 게 오래된 관습 같은 것이 있다.

if, for, while 문에도 붙이지 않는다. 붙여도 상관은 없다. 붙여서 에러나는 경우는 없는데 안 붙여서 에러나는 경우가 있으니 붙이는 게 좋다.

 

 

🔹 익명 함수

function(){}
//또는
()=>{}

함수에 이름을 붙이지 않으면 익명함수이다.

익명함수는 다른 곳에서는 사용 못하기 때문에 딱 한번만 사용할 때 쓴다.

 

 

🔹 함수 반환(return) 값

함수는 반환 값이 있다.

기본적으로 반환 값이 없다고 표현 하지만 정확히는 undefuned를 반환한다.

 

🔸 function도 알고보면 내부적으로 ruturn undefined가 생략되어있다.

function c(){
	return undefined;
}

 

 

🔸 반환 값을 있게 해주려면 return을 써준다.

function b(){
	return '반환값';
} // undefined

b(); //반환값

 

 

🔸 return은 반환만 하는 게 아니라 함수를 종료 시킨다.

function c(){
	return 'hello';
    console.log('h1');
}//undefined

c()
//"hello"

h1은 실행되지 않고 종료된다.

 

 

🔸 조건문 안에서의 return

function d(){
	if(조건){
    	return;
    }
    console.log('hello');
    //return undefined; 가 숨어 있다. 항상 마지막에 존재.
}

d();

if의 조건이 true면 console.log가 실행되지 않는다. (return이 실행되어 함수가 종료되기 때문)

if의 조건이  false면 console.log가 실행된다.

 

 

반환 값은 숫자,  undefind, null, 객체 모든 값이 된다. 심지어 함수 자체 반환도 된다.

함수가 함수를 반환하는 것을 고차함수라고 한다.

 

 

🔸 return undefined

function a(){
	console.log('a');
}

//위 아래는 동일함.

function a(){
	console.log('a');
    
    return undefined;
}

return을 따로 써주지 않으면 return undefined가 기본적으로 있다.

return을 써주면 그게 return undefined를 대체한다.

 

 

🔸 console.log()

function a(){
	return 10;
}


console.log(a());
//호출하는 것은 return 값을 여기에 넣어준다고 생각하면 된다.
//console.log(10);이랑 같은 것.

 

 

🔸 여러 값들을 리턴

function a(){
	return [1, 5];
}

a(); //[1, 5]​

여러 값들을 리턴 하려면 배열에 묶어서 리턴한다. 따로따로 리턴하거나 그럴순없다.

 

 

🔹 매개변수(parameter)와 인수(argument)

function a(parameter){
	console.log(parameter);
}

a('argument');

//실행결과 argument

함수를 선언할 때는 파라미터

함수를 호출할 때는 아규먼트

 

호출의 첫번째 자리는 선언의 첫번째 자리와 연결된다.

argument가 parameter로 들어간다.

 

매개변수도 변수다.

 

 

function a(w, x, y, z){
	console.log(w, x, y, z);
    
    console.log(arguments);
}

a('Hello', 'Parameter', 'Argument');

//실행 결과 Hello Parameter Argument undefined
//Arguments(3) ['Hello', 'Parameter', 'Argument']

argument는 화살표 함수에서는 못 쓰고 function함수에 argument를 쓰면 위와 같은 결과가 나온다.

넣었던 인수들을 배열 모양으로 출력을 해준다.

 

 

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

add(5, 3);

//5 + 3
//8

 

 

const f = (x, y, z) => {
 return x * y * z;
}
//undefined

f(2, 3, 4)
//24


const f = (x, y, z) => x * y * z;

화살표 함수는 중괄호랑 바로 리턴이 이어지면  중괄호, 리턴을 생락할 수 있다.

간단한 거 할 때 많이 쓰인다. 이런 걸 보면 아 중괄호랑 리턴이 생략되었구나 생각하면 된다.

 

 

 

Q. 인프런에 질문 했던 것.

( )=> a + b       ( ) => { return a + b}

그럼 왼쪽 함수는 오른쪽과 같은 것이고 

 

( ) => {a + b}     이렇게 중괄호가 있는 화살표 함수는

 

 ( ) => {

a + b   

return undefined

} 

return undefined 생략 

 

 

 

(a, b) => a + b;
//이렇게 쓰다보면 헷갈릴 때도 있는데 이럴 때는 

(a, b) => (a + b);
(x, y, z) => (x * y * z);
//소괄호로 감싸주기.

 

 

const a = 100;

function minus2(x, y){
  return (x - y) * a
}

console.log(minus2(5, 3));

함수 바깥에 있는 값도 가져올 수 있다.

함수내에서도 선언 가능.

 

 

🔸 eventListener

const a = (event) => {console.log(event.target.value)};
document.querySelector('#plus').addEventListener(click, a);

여기서 갑자기 event는 어디서 생겼을까?

클릭을 하면 브라우저가 몰래 a(); 이런식으로 함수 실행을 해준다.

그러면서 브라우져가 a(event); 이벤트도 같이 넣어준다.

이벤트 객체를 만들어서 인수로 넣어준다. 그 인수로 넣은 게 매개 변수로 전달이 된다.

 

 

🔹 고차함수

const func = (msg) => {
	return () => {
    	console.log(msg);
    };
};


const innerFunc1= func('hello');
const innerFunc2= func('javascript');
const innerFunc3= func(); 
innerFunc1(); //hello
innerFunc2();//javascript
innerFunc3();//undefined


//대체를 해보자
const innerFunc1 = () => {
	console.log('hello');
};

const innerFunc2 = () => {
	console.log('javascript');
};

const innerFunc3 = () => {
	console.log(); //빈값은 undefined
};


//앞의 함수는 이런 식으로 중복되는 것을 줄 일 수 있다. << 고차함수(함수가함수를 리턴)
const func = (msg) =>() => {
    	console.log(msg);
    }; //고차함수에서 {와 return 생략

 

 

 

 

 

function add(num1, num2){
  return num1 + num2;
}

function a(operator){
  const result = operator(1, 2); // add(1, 2)
}

a(add);

a를 호출할때 add라는 함수 이름을 넣어주면 add함수를 가르키고 있는 참조값을 넣어주게 된다.