[JS] 함수

🌱 함수

✏️장점

• 각 명령 시작과 끝을 명확하게 구분 가능
• 함수에 이름을 붙일 경우 필요할 때마다 함수 실행 가능

✏️선언

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

✏️호출

• 함수 이름을 사용해 선언한 함수 실행

var num1 = 10;
var num2 = 20;
var sum = num1 + num2;
alert("result:" + sum);

function addNumber {
      var num1 = 10;
      var num2 = 20;
      var sum = num1 + num2;
      alert("result: " + sum);
}

addNumber();

함수에 이름을 붙여 선언
필요에 따라 호출하여 사용할 수 있음

• function 호출 경우,위치는 상관 없지만 함수 선언 후 호출하는 순서를 지키는 것을 권함

🌱 변수

✏️var

ES6 버전 이후 변수를 선언하는 예약어

var 변수 스코프(scope)

• 변수 이름 앞에 var를 붙이면 지역 변수(함수 안에서만 사용 가능)
• var가 없으면 전역 변수(프로그램 전체에서 사용할 수 있는 변수)

var 변수 호이스팅
변수를 선언하기 전 변수를 사용하면

• 오류가 생기지 않음
• 변수 선언이 앞에 있는 것처럼 끌어올려(hosting) 인식함.
  선언을 하지 않았는데 선언한 것처럼 끌어올려서 착각.
  변수 defalut값이 undefined

var 변수 재선언
이미 있는 변수를 다시 선언할 수 있음

• 서로 다른 위치에서 같은 변수를 선언할 수 있다는 문제
• 재선언할 경우 이전 변수를 덮어쓰기하여 예상하지 못한 오류 발생

이런 현상을 방지하기 위해 나온 변수

✏️let / const

프로그램 안에서 값이 변하는 변수

변수 스코프
let 변수와 const 변수는 블록 영역의 스코프

호이스팅 없음
변수를 선언하지 않고 사용하면 오류 발생

변수의 재선언 불가
같은 변수를 다시 선언하면 오류 발생

function calcSum(n) {
      let sum = 0;
      for(let i = 1;i < n + 1; i++) {
        sum += i; //누적합 구함
      }
	console.log(sum);
}

calcSum(10);

✏️변수 사용법

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

🌱 여러 번 사용할 수 있는 함수

✏️매개변수(parameter)

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

✏️인수(argument)

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

✏️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. 결과값 sum 반환
5. 반환된 값을 result에 저장
6. result 변수값 화면에 표시

🌱 함수 표현식

✏️익명 함수

• 이름이 없는 함수
• 함수 자체가 '식' 이기 때문. 함수를 변수에 할당하거나 다른 함수의 매개변수로 사용할 수도 있음.

var add = function(a, b) {
	return a + b;
}
var sum = add(10, 20);

함수를 변수에 저장하는 형태

✏️즉시 실행 함수

• 함수 정의와 동시에 실행하는 함수
• 즉시 실행 함수는 변수에 할당할 수 있고, 함수에서 반환되는 값을 변수에 할당할 수 있음

(function() {})();

(function() {}());

🌱 실습

✏️min

function minvalue(a, b) {
      var min = 0;

      if(a < b) {
        min = a;
      }else {
        min = b;
      }
      return min;
}

var result = minvalue(10, 20);
document.write(result);

✏️max

function maxvalue(a, b) {
      var max = 0;

      if(a > b) {
        max = a;
      }else {
        max = b;
      }
      return max;
}

var result = maxvalue(10, 20);
document.write(result);

✏️비교

var num1 = parseInt(prompt("첫번째 숫자: "));
var num2 = parseInt(prompt("두번째 숫자: "));

function compareNumber(num1, num2) {
	if(num1 == num2) {
		alert(num1 + "과 " + num2 + "는 같다");
	}else if(num1 > num2) {
		alert(num1 + "이 " + num2 + "보다 크다");
	}else {
		alert(num1 + "이 " + num2 + "보다 작다");
	}
}

compareNumber(num1, num2);

prompt로 입력받은 값에 따라 함수 실행 결과값을 확인할 수 있음

✏️홀수 짝수

var su = parseInt(prompt("판별할 수"));

function evenodd(num){
	if(num % 2 == 0) {
		alert(num + "은 짝수입니다");
	}else {
		alert(num + "은 홀수입니다");
	}
}

evenodd(su);

✏️구구단

var dan = parseInt(prompt("단을 입력하세요"));

function displaygugu(todan) {
	for(let i = 1; i <=9; i++) {
		document.write(todan + "*" + i + "=" + todan*i + "<br>");
	}
}
displaygugu(dan);

prompt에서 입력받은 값에 따른 곱하기 연산이 출력된 것을 확인할 수 있음

var dan = parseInt(prompt("단을 입력하세요"));

function displaygugu(todan) {
	for(let i = 1; i < todan + 1; i++) {
		for(let j = 1; j < 10; j++){
			document.write(i + "*" + j + "=" + i * j + "<br>");
		}
	}
}
displaygugu(dan);

prompt 에 입력된 값까지 구구단이 출력된 것 확인

🍃 어려웠던 점 or 해결못한 것

새로운 개념이 낯설었다.

🍀 해결방법 작성

✏️ 어떻게 해결을 했는가?
✏️ 이렇게 이해를 했다
✏️ 어디까지 이해했지?
✏️ 다음에 시도해볼 방법
새로운 개념을 추가로 정리해야겠다.
for 문으로 별찍기 연습해보기

🌷 학습 소감

설명 정리가 잘 되어 수업이 재밌었고 실습으로 확인해볼 수 있어 직관적이었다.