함수

함수는 동작을 나타내며, 값처럼 취급할 수 있으고, 값처럼 할당, 복사, 선언할 수 있다.

 

함수의 용도는 중복 코드를 피하기 위함이다.

 

함수를 만들기 위해서는

 

1. true / false 값을 빨리 구별해낼 줄 알아야함

2. 값을 잘게 쪼갤 수 있어야 함

 

 

---

🎈 함수 선언문 Function Declaration 과 호출

 

함수 선언문으로 함수를 생성하면, 함수가 독립된 구문 형태로 존재하게 된다.

function functionName(매개변수){
   function body
}                                      // 함수 선언

functionName();                        // 함수 호출

함수를 호출하면 함수 본문이 실행됨

( ) : 함수실행연산

 

sum1();

function sum1(a,b){
	returen a+b;
}

함수 자체가 통째로 lexical environment 에 올라가기 때문에 코드블록이 실행되기 전에 처리되어 함수 선언문 위에서 함수를 실행해도, 블록 내 어디서든 실행된다. - 권장사항 아님.

 

 

 

 

🎈 함수 표현식 Function Expression

 

함수 표현식으로 함수를 생성하면, 함수가 표현식의 일부로 존재하게 된다.

 

함수를 정의하는 것이 아닌 변수에 이름이 없는 함수 값을 참조시키는 형태

var functionName = function () {
	내용
};

functionName();

함수 값을 참조시킨 변수 이름을 작성하고 ()를 붙혀줘도 실행시킬 수 있다.

 

 

sum2();

let sum2 = function (a,b) {
	return a +b ;
};

sum2 라는 변수가 먼저 할당되었기 때문에 변수값만 올라감 => TDZ 에 들어가기 때문에 아무런 값도 할당되지 않은 상태가 되어 함수 표현식 위에 함수를 실행해주면 에러가 나타난다.

 

 

🎈 함수 표현식 vs 함수 선언문

 

차이점

1. 문법적인 차이

2. 자바스크립트 엔진이 언제 함수를 생성하는지

 

보통 가독성을 위해 함수선언 -> 함수호출 순서로 작성을 많이 한다.

callback 함수에서는 함수 표현식을 많이 쓴다 

 

 

🎈 함수 전달인자 arguments 와 매개변수 parameters

 

// 전달된 두 수의 합을 계산해 제공하는 함수

function plus( n1, n2 ) {
	
    let n1 = 1;
    let n2 = 2;
	
    return n1 + n2;
}

let result1 = plus( 1,2 );
let result2 = plus( 5,3 );

매개변수를 입력해주면 1이 n1에, 2가 n2 에 들어가는 변수를 내부적으로 지정해준다.

result1, result2 를 출력해보면 값이 나오지 않는다.

함수의 값을 얻기 위해서는 return 을 작성해 값을 "반환" 해줘야한다.

 

 

결과 값을 요구할 때 ( get )	결과 값을 요구하지 않을 때 ( set )
return 값 필요	return 값 불필요

 

 

 

🎈 지역 변수 local variable

function sayHello(){
   let message = "hello"
   alert( message );
}

sayHello();

alert( message );

 

🎈 외부 변수 outer variable

 

지역 변수가 없는 경우에 사용 가능

 

🎈 화살표 함수 arrow function

 

function sayHi() {
	console.log('function hi');
}

sayHi();

위의 일반 함수를 화살표 함수로 바꾸어 아래의 함수처럼 작성할 수 있다.

const sayHi = () => {
	console.log('arrow hi');
};

sayHi();

 

매개변수가 있을 때,

const sayHi = (x) => {
	return x;
};

console.log(sayHi("arrow"));		// arrow

arrow 값이 첫 줄의 x 로 들어가게 되고, 다시 중괄호 안의 x 로 들어가서 return 된다. 그래서 콘솔에 찍힌 결과값은 arrow

 

const sayHi = (x) => x;

매개변수가 하나일 때 소괄호 생략 가능, 중괄호를 없애도 바로 값을 반환한다.

 

const calc = (x,y) => x + y;

console.log(calc(1,2));

매개변수가 2개일 때 이렇게 작성해주면, 아래의 1,2 값이 첫번째 (x,y) 값에 할당, x+y 값이 반환된다.

const calc = (x,y) => {
    console.log( '2줄 이상' );
    return x + y;
};

console.log(calc(1,2));

2줄 이상일 때 중괄호를 열고 작성해준다.

 

 

 

 

 

 

🎈 콜백 함수 callback function

 

함수는 반드시 question(질문)을 해야하고, 사용자의 답변에 따라 yes() 나 no() 를 호출합니다.

 

함수 본문이 

함수를 함수의 인수로 전달하고, 필요하다면 인수로 전달한 함수를 나중에 호출하는 것

 

함수를 실행할 때 값으로 body 로

 

arguments 의 순서가 바뀌면 안됨

 

함수 안에서는 매개변수들이 변수의 역할을 할 수 있도록 값이 지정되어버림

 

 

 ( 오늘은 아주 기본만 공부하려고 하기 때문에... 콜백 함수에 대한 내용은 추후 추가 예정입니다...! )