[Javascript] 함수 (function)

📌 함수 = function(기능)
: input과 output이 존재한다. // 선언과 호출

• input : 함수의 input = 매게변수 (매개체가 되는 변수!)

• output : return 문 뒤에 오는 값 : 반환값

  
  

  ✅ 기본 골격

  function (){}

1. 함수 선언

1) 함수 선언문

function 함수이름 (매게변수=input) {
    // 함수 내부에서 실행할 메인 로직
}

ex)

// 두 개의 숫자를 입력 받아서 덧셈을 한 후 내보내는 함수
function add(x,y){
    return x + y; // return이 있어야 실행 한 후에 값을 받을 수 있다. 
}

2) 함수 표현식

//왼쪽에 함수의 이름을 add2라고 썼기 때문에, function 뒤에 함수 이름을 안 써도 된다!
let add2 = function(x,y){ 
    return x + y;
}

console.log(add(2,3)); // 5

2. 함수 호출

▶️ 똑같은 함수이지만, 함수를 만드는 방법이 다르다.

• 함수를 호출한다.(let) (= 사용한다)

  함수명() 
  
  ex) add(input 값 = 매개변수)

ex)

let functionResult = add(3,4);
console.log(functionResult) // 7

// add2를 가지고 10과 20을 더한 값을 출력해보세요!

let functionResult2 = add2(10,20);
console.log(functionResult2); // 30

3. 함수 스코프

: 스코프, 전역변수, 지역변수, 화살표 함수

✅ 스코프 (scope, 범위)
: 변수가 어디까지 영향을 끼칠 수 있는가?

• 전역 변수 : 변수가 전체 범위에 영향을 끼친다.
• 지역 변수 : 함수 내에서만 영향을 끼친다.

1) 전역변수

let x =10;

function printX(){  
console.log(x);  
}

console.log(x);  
printX();

▶️ 함수 안이든 밖이든 다 let x = 10이라는 변수가 영향을 끼친다

• 지역 변수 : 스코프가 좀 더 작다.
  함수 내부에서만 변수가 적용된다는 의미.

function printX(){  
let x =10;  
console.log(x);  
}

// 함수 밖에서는 x의 값이 정의되지 않았으므로 오류가 발생  

console.log(x);  
printX();

4️⃣ 화살표 함수

: ES6(ECMAScript 6) 신 문법

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

🤨 function 먼저 자주 사용하자!

• 기본적인 화살표 함수
• let arrowFunc01 = (x,y) => { return x + y }
• 한 줄로 사용 가능** 주의 : { }도 반드시 같이 삭제
  ❗️ return 문을 뺄 수 있는 조건 : 중괄호 안이 한 줄이면 가능. but 다른 로직이 섞여 있으면 생략 X
• let arrowFunc02 = (x ,y) => x + y

ex)

function testFunc(x){  
return x;  
}

// 화살표 함수로!  
let arrowFunc03 = (x) => x