728x90
반응형
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를 찍었을 경우, "힙"에 저장되어 있던 해당 함수의 선언 형태가 그대로 출력됨(마치 변수와 같음)!! >> "()"는 함수 구문을 실행시키는 역할을 한다고 보면 됨!!
- 콜스택
*/
'Javascript > Javascript(2022 version)' 카테고리의 다른 글
Javascript 기초(6) - 상속 및 메서드 (0) | 2022.11.04 |
---|---|
Javascript 기초(5) - 객체 및 메서드 (0) | 2022.11.03 |
Javascript 기초(4) - 함수 및 객체 (0) | 2022.11.02 |
Javascript 기초(2) - 기본 문법 및 예시 코드 정리 (0) | 2022.10.31 |
Javascript 기초 - 프로그래밍 기초 및 Javascript 기초 문법 (0) | 2022.10.28 |