[JavaScript] 함수

 🎥  함수

• 하나의 기능을 실행하기 위해서 여러 개의 명령이 사용되었을 때 하나의 덩어리로 묶은 다음에 이름을 부여한 것
• 여러 개의 동작을 묶어놓은 명령들

 🎥  함수를 사용하면 좋은 점

• 각 명령의 시작과 끝을 명확하게 구별할 수 있음
• 함수에 별도의 이름을 붙이면 같은 기능이 필요할 때마다 해당 함수를 실행할 수 있음

 🎥  함수 선언 (함수 정의)

• 함수가 어떤 명령을 처리해야 할지 미리 알려주는 것
• function 예약어를 처리하고, { } 안에 실행할 명령 작성

function addNumber( ){
	var sum = 10 + 20;
    console.log(sum);
}

 🎥  함수 호출

• 함수 이름을 사용해 함수 실행

addNumber()
30

 🎥  함수 위치

• 함수를 선언해 놓기만 하면, 선언한 위치와 상관없이 함수를 실행할 수 있음

addNumber();

function addNumber( ){
...
}

///////////////////////////////////////////////////////////////////////////////////////////////

function addNUmber( ){
....
}

addNumber();

 🎥  let과 const

• let, const - 변수를 선언하는 예약어
• let => 프로그램 안에서 값이 변하는 변수
• const => 프로그램 안에서 값이 변하지 않는 변수
• var 변수의 스코프(scope) 
  • 변수의 스코프 => let 변수와 const 변수는 블록 영역의 스코프
  • 변수 이름 앞에 var를 붙이면 지역 변수 => 함수 안에서만 사용할 수 있는 함수
  • var가 없으면 전역 변수 => 프로그램 전체에서 사용할 수 있는 변수 
  • function calcSum(n){ let sum = 0; for (let i = 1; i < n + 1; i++){ sum += i; } console.log(sum); } calcSum(10);
• var 변수의 호이스팅
  • 호이스팅 없음 => 변수를 선언하지 않고 사용하면 오류 발생
  • 변수를 선언하기 전에 변수를 사용했을 때 변수 선언이 앞에 있는 것처럼 끌어올려서 인식하는 것
  • 변수를 선언하기 전에 변수를 사용하면?
    • 오류가 생기지 않는다
    • 변수 선언이 앞에 있는 것처럼 끌어올려 인식한다

 

var x = 100;

test();

function test(){
	document.write("x is " + x + ", y is" + y);
    var y = 200;
}

• var 변수의 재선언
  • 변수의 재선언 불가 => 같은 변수를 다시 선언하면 오류 발생
  • 이미 있는 변수를 다시 선언할 수 있음
    • 실수로 서로 다른 위치에서 같은 변수를 선언할 수 있다는 것은 문제
    • 재선언하면 이전 변수를 덮어쓰기 때문에 예상하지 못한 오류가 생길 수 있음 

 🎥  변수 사용법

• 전역 변수는 최소한으로 사용
• var 변수는 함수의 시작 부분에서 선언 (호이스팅 방지)
• for문의 카운터 변수는 블록 변수를 사용하는게 좋음
• ES6을 사용한 프로그램이라면 var보다 let 사용

 🎥  매개변수 (parameter)

• 함수를 선언하기 위해 필요하다고 지정하는 값
• 함수를 선언할 때 함수 이름 옆의 괄호 안에 매개변수 이름을 넣음

function addNumber(a, b){
	var sum = a + b;
    console.log(sum);
}

 🎥  인수 (argument)

• 함수를 실행하기 위해 필요하다고 지정하는 값
• 함수를 실행할 때 매개변수로 넘겨주는 값

addNumber(2,3);
addNumber(10, 20);

 🎥  return 문

• 함수를 실행한 결과값을 함수 밖으로 넘기는 문
• 반환된 값은 함수를 실행한 소스 위치로 넘겨짐

var num1 = parseInt(prompt("첫 번째 숫자는?"));
var num2 = parseInt(prompt("두 번째 숫자는?"));
var result = addNumber(num1, num2);
alert("두 수를 더한 값은 " + result + "입니다");

function addNumber(a, b){
	var sum = a + b;
    return sum;
}

1. num1 변수와 num2 변수에 값을 저장
2. num1 과 num2 값을 가지고 addNumber( ) 함수 호출
3. 함수 선언부로 넘어와 함수를 실행하는데, num1 값은 a 변수로, num2 값은 b 변수로 넘겨짐
4. a 값과 b 값을 더하여 sum 변수에 저장
5. 결과값 sum을 반환
6. 반환된 값을 변수 result에 저장
7. result 변수값을 화면에 표시