Javascript : 함수 (function)

*** 웹3에서 가장 중요한 것 : 함수, 변수, 조건문, 반복문, (배열) ***

 

01. 함수

: 같은 작업을 필요할때 필요한 곳에서 (스코프를 딱 한번) 사용 가능
  필요한 값을 바꿔가면서 사용 가능 : (매개변수)
  같은 이름으로 함수 생성 금지( 같은 이름으로 여러개면 코드상 마지막에 읽히는 함수가 동작함 )

=== 함수명 생성 규칙 ( 변수와 동일 ) ===
- 첫번째글자 영문, $, _ 만 가능
- 예약어 금지
- 대소문자 금지
- 띄어쓰기 금지
- 같은이름 금지

=== 함수 종류 ===
1 ) 선언적 함수 : 함수명이 있는 함수 (호이스팅 가능)
          function 이름( ) { }

2 ) 익명함수 : 함수명이 없는 함수 (호이스팅 불가)
          function( ) { }

3 ) 화살표 함수 : 익명함수를 기본 포멧으로 살짝 변형된 것.
                           function 이란 단어 대신 () 뒤에 => 붙인것.

=== 선언적 함수 ===

function tmp(name) {
	return “Hello, “ + name + “!”
}
let message = tmp(prompt(“첫번째 이름이 뭐야?“));
console.log(message); // “Hello, nnn!”
let message2 = tmp(prompt(“두번째 이름은 뭐야?));
console.log(message2); // “Hello, nnn2!”

// 위와 같이 한번 선언한 함수를 반복적으로 사용 가능.

=== 익명 함수 ===

let tmptmp = function() {
	console.log(“익명함수”)
}
tmptmp(); // “익명함수“ 가 그대로 콘솔창에 표기됨.

// 위와 같이 함수의 이름을 지정하지 않고 사용하는 함수가 “익명함수” 이다.

=== 화살표 함수 ===

let divide = (a,b) => {
	return a / b;
};

// 한줄로 작성할수도 있다.
let square = x => x * x;

console.log(divide(10,2)); // 10 / 2 가 실행되어 “5”가 콘솔창에 표기
console.log(square(3)); // 3*3 이 실행되어 “9”가 콘솔창에 표기

// 위와 같이 function을 사용하는 대신 => 를 이용해 더 간단한 코드 형성이 가능하다.

 

02. 매개변수

: 함수에서 값을 받아서 해당 함수 스코프 안에서만 사용하는 변수
( 지역변수와 같은 느낌?)

function tmp(name, kor, math, eng) {
	let total = kor + math + eng;
	let avg = total / 3;
	console.log(`${name}님의 총점은 ${total} 이고, 평균은 ${avg.toFixed(2)} 입니다.`)
}

let name = “홍길동“
let kor = 100; // tmp로 대체
let math = 100; // tmp로 대체
let eng = 0;  // tmp로 대체
tmp(name, 100, 100, 0);

// 위의 let으로 각각 정의된 변수 kor, math, eng 은 함수(tmp) 를 정의함으로써 필요 없는 변수가 되었다.
// 3줄을 함수를 이용해 1줄로 변경 가능한 것.

// 위 코드에서 ”매개변수“는 function tmp의 괄호안에 정의된 (name, kor, math, eng) 이다.
// 밑의 ‘tmp’ 함수의 괄호안에 들어있는 것들은 인자,(argument)라고 함.
// 스코프 밖으로 나오면 메모리에 저장되어있지 않은 상태.

 

03. 함수 return

: 결과값을 해당 함수를 부른 자리에 돌려줌
( 재정의된 명령을 입력한 만큼 함수의 처음으로 돌아가 함수를 다시 실행한다.)

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

console.log(tmp(10, 20)); // 10 + 20 이 적용되어 “30” 표기

console.log(tmp(50, 20) * 2); // 우선 50 + 20 이 적용, “70”이 나오고 * 2 를 진행해 최종 ”140“표기.

// return이 적용되었기 때문에 console.log를 띄우는 만큼 반복되고 반복된 명령이 모두 표기됨.

 

04. 콜백함수 ( 익명함수로 만들기)

: 특정 함수에서 특정 함수를 호출(콜) 하고, 호출된 함수가 실행을 끝낸뒤에 다시 돌아가는(백)걸 말한다.

let aaa = function() {
	console.log(“AAA”)
}
let bbb = function() {
	console.log(“BBB”)
}

function test(txt, func_A, func_B_ {
	if(txt == “여기”) {
		func_A()
	}
	else {
		func_B()
	}
}

	test(“여기“, aaa, bbb);

// 함수 aaa 와 bbb는 각각 ”AAA” 와 “BBB”로 정의된 상태.
// 그 밑에 함수 ”test”를 생성, txt값이 조건을 충족하면
// if문 실행 = [함수 func_A = aaa] 이므로 console.log(“AAA”) 가 실행되어 “AAA” 표기

// txt값이 조건을 충족하지 못하면
// else문 실행 = [함수 func_B = bbb] 이므로 console.log(”BBB”) 가 실행되어 “BBB” 표기

// 얘기하고 싶은것은 이미 정의된 함수를 호출해 사용하고, 
// 그 값은 바뀌지 않은채 다시 처음 정의된 함수로 돌아가는것을 ‘콜백’이라고 얘기한다는 것.

=== 함수 실습 ver.1 ===
: 숫자 두개, 사칙연산 기호 한개를 입력하면 그대로 명령 이행하는 계산기 코드 만들기.

let num1 = +prompt(); // 숫자로 받아야 해서 +
let mark = prompt(); // 기호기 때문에 + 필요 없음
let num2 = +prompt();

cal(num1, mark, num2) // 함수부터 지정

function cal(__num1, __mark, __num2) { // 변수값이 헷갈리지 않기 위해 함수 내에서 변수를 재지정해줌. 주로 __를 쓴다함. = 코딩좀 치시는분 왈

	let result = 0; // 결과값을 받아야하기에 함수 내에서 결과값 변수 지정

// 각 사칙연산에 대한 식을 if 조건식으로 정의

	if(__mark == “+”) { // = 이 아니다. ==이다. 자꾸 헷갈리는데 주의하자…
		result = __num1 + __num2;
	}
	else if(__mark == “-”) {
		result = __num1 - __num2;
	]
	else if (__mark == “*”) {
		result = __num1 * __num2;
	}
	else if (__mark == “/“) {
		result = __num1 / __num2;
	}
	
	console.log(`${__num1} ${__mark} ${__num2} = ${result}`)
	// 함수 내에서 각 변수를 재지정해줬기 때문에 함수 스코프 안에서 console.log를 진행해야한다.
}

완성.
	

=== 함수 실습 ver.2 ===
: 시, 분, 초 입력 받고 각각 두자리수 이상이면 그대로 출력, 한자리수 일땐 0 붙여서 두자리로 출력.
  전자시계 만들기 ex) 5, 10, 9 => 05:10:09

let hour = prompt(“시”); // 끝에 ; 붙이는 습관..
let min = prompt(“분”);
let sec = prompt(“초”);

function zero(tmp) { // 10보다 작은 수에만 0을 붙여주면 되기에 zero라는 함수를 지정해 반복사용.
	if(tmp < 10) {
		tmp = “0” + tmp; // 숫자 앞에 “0” 을 붙여야 하기에 += 는 사용 불가.
	}
	return tmp; // 시, 분, 초 모두 3번을 받아야 하기에 반복사용을 위해 return.
}

console.log(`입력하신 시간은 ${zero(hour)}:${zero(min)}:${zero(sec)}`)

// hour, min, sec 모두 10보다 작으면 0이 붙어야 하기에 각 변수에 함수 “zero”를 반복사용하여 로그 완성.
// return값을 함수 내에 지정해줘야 반복이 된다. 주의하도록 하자.
// 함수를 쓰지 않고 if조건식 만으로도 코딩은 가능하다. 복습겸 생각해보자.