Javascript 기초(3) - 함수

1) Javascript 함수

   1-1) 함수 사용 이유

   1-2) 함수 선언 및 호출

   1-3) 매개변수 / 인자

   1-4) return

   1-5) 콜스택 / 힙

 

 

 

 

1) Javascript 함수

1-1) 함수 사용 이유

/*
	함수
	중복코드를 피하기 위해서 함수를 사용함!!
*/

// example : 동일한 결과를 출력하는 코드 간에도 함수를 사용하지 않을 시 아래와 같이 코드 양이 많아지고, 자연스레 코드 효율성 또한 떨어짐!!

function showMessage() {
  console.log("hello world! I am developer.");
}
showMessage();
showMessage();
showMessage();
showMessage();
showMessage();

console.log("hello world! I am developer.");
console.log("hello world! I am developer.");
console.log("hello world! I am developer.");
console.log("hello world! I am developer.");
console.log("hello world! I am developer.");

 

 

 

1-2) 함수 선언 및 호출(+ 호이스팅)

// 함수 선언
function showMessage() {
  console.log("hello world!");
}

// 함수 호출
showMessage();

// 기본적인 내장함수 호출
parseInt();
console.log();


// 함수 문법
let text = "javascript";
function showMessage2() {
  console.log("hello world! " + text);
}

showMessage2();



// var 호이스팅: var 선언부(var 변수명;)는 코드 최상단에서 실행된 것처럼 동작하여 아래 코드에서 지역변수로 선언된 것이 아닌 전역변수로 선언된 효과로 코드가 실행됨!!
{
  var txt = "javascript";
}
console.log(txt);


// 함수 호이스팅: 함수 선언부를 코드 최상단으로 올려 함수 호출을 먼저 해도 호출 결과가 정상적으로 출력됨!!
showTxt();
function showTxt() {
  let text = "javascript";
  console.log("hello world! " + text);
}

// 호이스팅  >>  호이스팅이 발동되는 것들은 마치 전역변수로 선언된 것처럼 동작함!!

// var 호이스팅 example
console.log(text2);
var text2 = 'javascript';

/*
	위의 코드는 호이스팅이 일어나 결국 아래 코드 처럼 동작함!!
	var text2;
	console.log(text2); // 출력결과: undefined
	text2 = 'javascript';
*/


// +) 전역변수 / 지역변수 활용
// 1 ~ 100까지의 합 구하기
let result = 0;
for (let i = 0; i < 101; i++) {
  result = result + i;
}
console.log(result);

 

 

 

1-3) 매개변수 / 인자

// 매개변수(Parameter)와 인자(Argument)
// 매개변수 : 함수 안에서 선언하는 변수
// 인자 : 함수 호출 시 넣는 값

// 함수 선언 - 매개변수
// 자리가 중요함
// "()" 안에 변수명을 만들듯이 매개변수를 지정하면 됨
// 매개변수와 인자는 값을 여러 개 넣을 수 있음!!
function showProfile(name, age) {
  console.log("hello " + name + " / age : " + age);
}

// 함수 호출 - 인자
showProfile("sangbeom", 27);

// 구구단 출력 함수
function print(x, y) {
  console.log(x + " * " + y + " = " + x * y);
}

// 구구단 2단
for (let i = 1; i < 10; i++) {
  print(2, i);
}


// 매개변수에 아래와 같이 default 값을 설정할 수 있음 >> 이 경우, 함수를 그냥 호출하면 default 값이 출력되고, 함수 호출 시 인자를 넣으면 해당 인자가 출력됨!!
function showName(name = "sangbeom") {
  console.log("hello " + name);
}

showName(); // 출력결과: hello sangbeom
showName("jihyun"); // 출력결과: hello jihyun

 

 

 

1-4) return

// return : 함수 안에서만 사용하는 예약어
// 함수 내부에서 return을 만나게 되면 해당 함수를 종료시킴!!
// return 역할 : 함수를 종료시키는 역할(따라서 return 밑의 코드는 실행되지 않음!!)

function showConsole() {
  return;
}

console.log(showConsole()); // 출력 결과: undefined


function showConsole1() {
  console.log("hello world");
  return;
}

showConsole1();


function showConsole2() {
  return "hello world";
}

console.log(showConsole2());


function showConsole3(name) {
  return "hello " + name;
}

console.log(showConsole3("sangbeom1"));
console.log(showConsole3("sangbeom2"));
console.log(showConsole3("sangbeom3"));


function getSum(x, y) {
  return x + y;
}

console.log(getSum(1, 2));
console.log(getSum(3, 4));



// 대부분 함수는 어떠한 최소 단위의 동작을 만들 때 사용함!!
/*
function a() {
  console.log("a 함수 호출");
  return 1;
}

function b() {
  console.log("b 함수 호출");
  return 2;
}

function c() {
  console.log("c 함수 호출");
  return 3;
}

function d() {
  console.log("d 함수 호출");
  return 4;
}

const x = a(); // const: 재선언 x, 재할당 x
// const x = 1;
console.log(x); // result: 1
let y = b() + c(); // let: 재선언 x, 재할당 o
// let y = 2 + 3;
y = y + d();
// y = 5 + 4;
console.log(y); // result: 9

// 출력 결과
// a 함수 호출
// 1
// b 함수 호출
// c 함수 호출
// d 함수 호출
// 9
*/

function a() {
  console.log("a 함수 호출");
  return 1;
}

function b() {
  c();
  console.log("b 함수 호출");
  c();
  return 2;
}

function c() {
  console.log("c 함수 호출");
  return 3;
}

function d() {
  a();
  console.log("d 함수 호출");
  b();
  return 4;
}

d();

// 출력 결과
// a 함수 호출
// d 함수 호출
// c 함수 호출
// b 함수 호출
// c 함수 호출

 

 

 

1-5) 콜스택 / 힙(+ 재귀함수)

/*
	function 예약어를 통해 함수 선언 시 "힙"이라는 공간에 함수가 들어가게 되지만 함수 호출을 해야 "콜스택"으로 함수 실행부분이 넘어가 실행 처리됨!!
	코드가 실행되는 부분은 "힙"과 "콜스택"이 있음
	"콜스택"이라는 공간은 실행할 코드가 있으면 먼저 들어간 코드부터 순차적으로 쌓인 뒤 역순으로 코드가 실행(마치 프링글스를 위에서부터 하나씩 꺼내 먹는 것과 같이 코드를 실행시킨다고 이해하면 됨!!)되면서 콜스택을 빠져나감(콜스택이 비워짐)
	변수(ex. let apple = "mac";) 역시 "힙"에 들어감
	데이터의 저장(변수 선언문, 함수 선언문 등)은 "힙"에 들어감!!
	예약어(코드 구현 시 빠지면 안되는 필수요소: let, const, var, function 등이 해당됨)에 따라 "힙"에 저장됨!!
	Javascript는 코드 전체를 한 번 실행(실행은 익명함수에서 담당)시킨 뒤 코드를 한 줄 한 줄 읽고 해석하여 실행시킴
	익명함수는 "콜스택"의 코드를 다 실행하면 자동적으로 콜스택에서 사라짐!!

	코드 실행 순서: 저장 >> 브라우저를 킴
	브라우저가 코드를 읽고, 브라우저를 실행시킴
	HTML을 먼저 load한(받아오고) 뒤 CSS 파일을 받아오고 이후 JS 파일을 받아온 후 브라우저에 render함!!
	파일의 텍스트를 다 가져오는 것이 우리의 입장에서의 코드 실행이다!!
*/



// console.time(); ~ console.timeEnd();  >>  해당 범위 내의 코드 결과가 처리되기까지의 시간을 console 창에 출력해서 보여주는 코드
console.time();
let result = 0;
for (let i = 0; i < 101; i++) {
  result += i;
}
console.log(result);
console.timeEnd();


// 1 ~ 100까지의 합 구하기
console.time();
let n = 100;
console.log((n / 2) * (n + 1));
console.timeEnd();


// 재귀함수 : 메모리를 적게 사용하기 때문에 연산 속도가 빠름!!
console.time();
function sum(n) {
  if (n <= 1) {
    return 1;
  }
  return n + sum(n - 1); // 100 + 99 + 98 + ... + 2 + 1
}

console.log(sum(100)); // 5050
console.timeEnd();


// 피보나치 수열 - 재귀함수 연습용 알고리즘 문제
function fibonacci(n) {
  if (n <= 1) {
    return n;
  }
  return fibonacci(n - 1) + fibonacci(n - 2);
}

console.log(fibonacci(3));


/*
	금일 수업 내용 정리
	- 함수 사용 이유 : 중복코드를 피하기 위해 함수 사용
	- 함수 선언 : +) 호이스팅
	- 함수 호출
	- 매개변수(함수 선언) : 함수 선언 시 사용하는 변수
	- 인자(함수 호출) : 매개변수에 들어갈 값을 지정
	- return: 기본적으로 return은 default 값으로 따로 쓰지 않아도 항상 존재하며, 함수 선언문의 맨마지막에 위치하여 함수를 종료하는 역할을 함!!
	- 함수 호출 시 "()"를 안쓰고 console.log를 찍었을 경우, "힙"에 저장되어 있던 해당 함수의 선언 형태가 그대로 출력됨(마치 변수와 같음)!! >> "()"는 함수 구문을 실행시키는 역할을 한다고 보면 됨!!
	- 콜스택
*/