What I Learned Today
(프로그매밍 언어의) 함수는 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것.
이때 함수 내부로 입력을 전달받는 변수를 매개변수 입력을 인수 출력을 반환값 이라고 한다.
함수의 4가지 정의 방식
1️⃣ 함수 선언문
function add(x,y) {
return x+y;
}2️⃣ 함수 표현식
let add = function(x,y) {
return x+y;
};3️⃣ Function 생성자 함수
let add = new Function('x','y','return x+y');4️⃣ 화살표 함수
let add = (x,y) => x + y;⚠️ 변수 선언 과 함수 정의
변수 → 선언
함수 → 정의
왜? 함수 선언문이 되면 식별자가 암묵적으로 생성 되고 함수 객체가 할당된다.
함수를 왜 사용해?
동일한 작업을 반복적으로 수행해야 한다면 같은 코드를 중복해서 여러 번 작성하는 것이 아니라 미리 정의 된 함수를 재사용하는 것이 효울적으로 함수는 몇 번이든 호출할 수 있으며 코드의 재사용이라는 측면에서 유용
코드의 중복을 억제하고 재사용성을 높이는 함수는 유지보수의 편의성을 높이고 실수 줄여 코드의 신뢰성을 높이는 효과가 있다.
//코드의 재사용
const sum = function(limit) {
let output = 0
for(let i =1; i <= limit; i++) {
output += i
}
return output
}
console.log(sum(10));함수 선언문
function add(x,y) {
return x+y;
}❗️ 함수 선언문은 함수 리터럴과 형태가 동일한데 차이는?
함수 리터럴 → 함수 이름 생략 가능
함수 선언문→ 함수 이름을 생략 할 수 없다.왜냐구? 함수 선언문은 표현식이 아닌 문이다.⭐️
SyntaxError 발생!!!
function(x,y) {
return x+y;
}매개변수와 리턴값
function 함수(매개변수, 매개변수) {
return 리턴값;//반환문
// 반환문 이후에 다른 문이 존재하면 그 문은 실행되지 않고 무시됨.반환문을 생략하면 undefined
}
let result = 함수(매개변수,매개변수);
console.log(result);매개변수가 뭘까? 매개변수를 통해 함수는 외부의 정보를 입력받을 수 있다.
리턴 값이 뭘까? 함수의 최종 적인 결과
⭐️매개변수의 스코프(유효 범위)는 함수 내부이다. → ReferenceError 발생!
인수가 부족해서 인수가 할당되지 않은 매개 변수 값은 //undefined
반대의 경우에는 초과된 인수 무시됨.
나머지 매개변수
가변 매개변수 : 호출할때 매개 변수의 개수가 고정적이지 않은 함수
function 함수 이름 (…나머지 매개변수) { }
나머지 매개변수를 사용한 min()함수
function min(...items){
let output = items[0]
for (const item of items) {
if(output > item) {
output = item
}
}
return output
}
cosole.log(min(52, 273, 32, 103, 275, 24, 57));
어떤 자료가 배열인지 확인할 때는 Array.isArray( ) 메소드를 사용한다. 일반적으로 typeof 연산자로는 배열을 확인할 수 없다.
매개변수 자료형에 따라 다르게 작동하는 min( ) 함수
function min(first,...rests) {
let output
let items
if (Array.isArray(first)) {
output = first[0]
items = first
} else if (typeof(first) === 'number') {
output = first
items = rests
}
for(const item of items) {
if(output > item) {
output = item
}
}
return output
}
console.log(min([52, 273, 32, 103, 275, 24, 57]))
function min(first,...rests) {
let output
let items
if (Array.isArray(first)) {
output = first[0]
items = first
} else if (typeof(first) === 'number') {
output = first
items = rests
}
for(const item of items) {
if(output > item) {
output = item
}
}
return output
}
console.log(min([52, 273, 32, 103, 275, 24, 57]))//배열
console.log(min(52, 273, 32, 103, 275, 24, 57))//숫자전개연산자:배열을 함수의 매개변수로써 전개하고 싶을 때 사용
배열 앞에 마침표 3개를 붙이는 형태를 이용
함수이름(…배열)
전개연산자의 활용
function sample(..items) {
console.log(items)
}
const array = [1,2,3,4]
sample(array) // [Array(4)]
sample(...array)//[1,2,3,4]
기본 매개 변수: 개개변수에 기본 값이 들어가게 하고 싶을 때 사용하는 변수
함수이름(매개변수, 매개변수=기본값, 매개변수=기본값)
람다 함수는 프로그래밍 언어에서 사용되는 개념으로 익명 함수(Anonymous functions)를 지칭하는 용어
람다 대수는 간단히 말하자면 수학에서 사용하는 함수를 보다 단순하게 표현하는 방법
🔥콜백 함수_비동기처리
1.동기와 비동기
synchronous
자바스크립트는 동기적이다. 즉, 호이스팅이 된 이후부터 코드가 작성 순서에 맞춰 하나하나 자동적으로 실행
*호이스팅(hoistion)? var변수, function 선언이 자동으로 제일 위로 올라가는 것
asynchronous
언제 코드가 실행될지 예측할 수 없는 것
함수를 등록하고 어떤 이벤트가 발생했거나 특정 시점에 도달했을때 시스템에서 호출하는 함수
2.콜백
(1)
console.log('1');
setTimeout(() => console.log('2'), 1000);
console.log('3');
printImmediately(() => console,log('hello'));
//synchronuous callback
function printImmediately(print) {
print();
} // 얘가 위로 호이스팅되어 선언되어 순차적으로 실행될것이다.
결과:
1
3
hello
2(2)
console.log('1');
setTimeout(() => console.log('2'), 1000);
console.log('3');
printImmediately(() => console,log('hello'));
//synchronuous callback
function printImmediately(print) {
print();
} // 얘가 위로 호이스팅되어 선언되어 순차적으로 실행될것이다.
//asynchronous callback
function printWithDelay(print, timeout) {
setTimeout(print, timeout);
}
printWithDelay(() => console.log('async callback'), 2000);
결과:
1
3
hello
2
async callback콜백 함수를 활용하는 함수:forEach()
해당 메소드는 배열이 갖고 있는 함수로써 단순하게 배열 내부의 요소를 사용해서 콜백 함수를 호출해준다.
function(value, index, array) { }
콜백 함수를 활용하는 함수:map()
배열이 갖고 있는 함수로 콜백 함수에서 리턴하는 값들을 기본으로 새로운 배열을 만드는 함수
콜백 함수를 활용하는 함수:filter()
배열이 갖고 있는 함수 콜백 함수에서 리턴하는 값이 true 인 것들만 모아서 새로운 배열을 만드는 함수
🔥 화살표함수
익명 함수를 간단하게 사용하기 위한 목적으로 만들어짐
(매개변수) ⇒ 리턴값
익명함수?
const print = function () { //익명함수: 이름이 없는 함수
console.log('print')
};
print(); //print
const printAgain = print;
printAgain();//print
화살표함수?
1.
const simplePrint = function() {
console.log('simplePrint');
};
//바꾸기!
const simplePrint = () => console.log('simplePrint');
2.
const add = function(a , b) {
return a + b;
};
//바꾸기!
const add = (a , b) => a + b;
3. 함수 안에 블럭을 쓰고 싶으면 반드시 return 과 함께 써야한다.
const simplePrint = (a, b) => {
return a + b;
};
✚
메소드 체이닝 Method Chaing
메소드가 리턴하는 값을 기반으로 함수를 연속으로 사용하는 것
const a = 'Hi';
const b = a.split('').reverse().join(''); //메소드 체이닝타이머함수
특정 시간마다 또는 특정 시간 이후 콜백 함수 호출할 수 있는 함수
setTimeout(함수, 시간) : 특정 시간 후에 함수를 한 번 호출합니다.
setInterval(함수, 시간) : 특정 시간마다 함수를 호출합니다.
clearTimeout(타이머_ID) : setTimeout() 함수로 설정한 타이머를 제거한다,.
clearInterval(타이머_ID) : setInterval() 함수로 설정한 타이머를 제거한다.
즉시호출함수
변수의 이름 충돌를 막기 위해 코드를 안전하게 사용하는 방법_잘 쓰이지는 않는다…
(function hello() {
console.log('IIFE');
})();섀도잉
이렇게 내부에서 같은 이름으로 변수를 선언하면 변수가 외부 변수와 충돌하지 않고 외부 변수를 가린다. 내부 블록에서 선언한 변수만 볼 수 있다. 이렇게 블록이 다른 경우 내부 변수가 외부 변수를 가리는 현상을 섀도잉이라고 부른다.
엄격모드
자바스크립트의 문법 오류를 발생시키지만 실수를 줄일 수 있는 방법으로 블록 가장 위쪽에 ‘use strict’배치해 사용할 수 있다.
Code Snippets
기본적인 함수 예제 외우자!
- 일반적으로 숫자를 계산해서 출력할 때 많이 사용하는 형태
function 함수(매개변수) {
let output = 초기값
처리한다.
return output
}- a부터 b까지 더하는 함수
function sumAll(a , b) {
let output = 0
for (let i =a; i <= b; i++) {
output += i
}
return output
}
console.log(sumAll(1,100));- 최솟값(min)을 구하는 함수
function min(array) {
let output = array[0]
for (const item of array) {
if(output > item) {
output = item
}
}
return output
}
const testArray = [52, 273, 32, 103, 275, 24, 57]
console.log(min(testArray))
