함수

mangorovski·2022년 3월 20일

function 함수

Javascript

목록 보기

1/9

✔️ [인자, 인수]

인수(argument) : 인수값은 함수를 호출할 때 사용되는 값
인자, 매개변수(parameter) : 인자값은 함수를 정의할 때 외부로부터 받아들이는 값을 의미

✔️ [함수의 다양한 형태]

익명함수
즉시 실행 함수
재귀 함수
중첩 함수
콜백 함수

익명함수

익명함수란 이름이 없는 함수이다.
함수의 이름을 지정하지 않고 익명함수로 함수를 생성하고 변수에 저장시킨다.
🔷 재사용될 필요가 없는 함수를 선언할 때 주로 사용된다.
- 🔹바인딩 되는 함수
- 🔹함수를 매개변수로 받는 함수

const noNameFun = function(){
	console.log('this is no name function')
}

//함수 바인딩 bind
let user = { firstName: 'LEE' }
function fun(){
	console.log(this.firstName)
}
let funUser = fun.bind(user)
funUser() //LEE

즉시 실행 함수

함수를 정의함과 동시에 즉시 호출되는 함수이다.
바로 호출되는 특성상 다시 호출할 수 없는 특징을 갖고있다.
함수 내부의 영역이 다른 영역과 분리되기 때문에 초기화코드나 모듈화 패턴을 만들 때 유용하게 사용된다.
글로벌 스코프에 정의된 코드에러에 관한 결과를 방지할 수 있다.
리턴 값을 변수에 저장하여 private code로 만든 properties나 methods를 외부에서 사용 할 수 있다.

const app = (function(params){
	//private code
    return {
    	//public property or method
    }
}(args))

재귀 함수

참고 사이트

자기 자신을 호출하는 함수이다.
재가 함수는 조건이 성립하면 무한히 수행되기 때문에 로직 중간에 탈출조건을 만들어야 한다.

function factorial(n){
    if(n <= 1) return 1
    return n * factorial(n - 1)
}

const facRun = factorial(5)
console.log('facRun: ', facRun);

factorial 호출 스택에 있는 n의 값은 전부 다름을 생각하자.
파라미터 n의 값으로 5가 들어간다.
stack에 5를 저장하고 factorial(5 - 1) = factorial(4)를 실행한다.
n의 값으로 4가 들어간다. stack에 4를 저장하고 factorial(4 - 1) = factorial(3)을 실행한다.
이렇게 factorial(2)까지 실행되고 factorial(1)은 1을 return한다.
리턴된 5, 4, 3, 2, 1을 곱한 후 그 값인 120을 리턴한 후 함수가 종료된다.

중첩 함수

함수 내부에 함수를 포함하고 있는 함수를 말한다.
함수의 범위가 벗어난 경우 내부에서 선언한 함수를 사용할 수 없게 된다.
스코프, 클로저와 연관이 있음

fucntion outer(){
	let x = 1
    function inner(){
    	let y = 2
        console.log(`${x}+${y} = x + y`
    }
    inner()
}
outer()
//1 + 2 = 3

callback함수

함수의 인수로 사용되는 함수, 다른 말로 매개변수를 통해서 함수 내부로 전달되는 함수
이 때 콜백함수를 받은 함수를 고차함수라고 부른다.

function sayMyName(name){
    console.log('this is', name)
}

function runFun(some){
    some('kim')
}

runFun(sayMyName)

runFun은 매개변수로 입력받은 요소를 실행시키고 있다.
주로 비동기 로직에서 함수가 순서대로 수행되어야 할 때 사용한다.
예) setTimeout(함수, 시간)에서 인수로 사용되는 함수

🔷 [setInterval 사용해보기]

setInterval(실행할함수, 주기)
clearInterval(정지시킬serInterval)

//요소 동적 추가
const pauseBtn = document.createElement('button')
pauseBtn.setAttribute('class', 'pauseBtn')
const pauseBtnText = document.createTextNode('정지버튼')
pauseBtn.appendChild(pauseBtnText)
document.body.appendChild(pauseBtn)

function pauseFun(){
    let sum = 0
    let oneMsFun = setInterval(() => {
            console.log(sum += 10)
        }, 1000)
    pauseBtn.onclick = () => {
        clearInterval(oneMsFun)
    }
}

pauseFun()

🔷 [인강 예제]

왜 콜백이라고 불리는가? / 추가적으로 어떻게 사용하는건가?
콜백이라는 것은 함수의 인수로 사용되는 간단한 개념이지만 특정한 실행위치를 보장해주는 용도로도 많이 활용된다.
```
function timeout(cb) {setTimeout(() => {
    console.log('heropy@')
    cb() //콜백
}, 3000)
};

timeout(()=>{
    console.log('done');
})
```
- 예시 : 콘솔에서 3초뒤 heropy@ -> done 출력하기
  - timeout()함수의 인수로 화살표 함수생성 (콜백함수)
  - timeout()함수에서 인수를 받아줄 매개변수를 작성 : (cb)
    매개변수를 실행을 보장하고 싶은 장소에서 호출을 하듯 소괄호를 열고 닫는다.
    timeout함수를 호출할 때 하나의 익명함수를 인수로 사용했고
    그 인수가 cb라는 매개변수로 들어가게 된다.
    cb는 아직 호출되지 않은 함수이기에 호출을 원하는 장소에 넣어주면 된다.

🔷 [Tip]

함수가 실행될 때마다 그 로직을 동작시켜야 하기에 자원이 계속 들어가게 된다.
변수에 함수실행의 내용을 담아서 사용하게 되면 그 결과의 값만 사용할 수 있기 때문에 훨씬 더 효율적으로 사용 할 수 있다.

함수가 호출된 특정한 결과를 반복적으로 사용하느냐 안하느냐의 차이
함수가 호출되는 횟수를 최대한 줄여서 사용해본다.
```
function sum(x, y){
    return x + y
}
const b = sum(4, 12)

console.log(sum(1,3))
console.log(b)
```
반복적으로 사용될 때 : 함수에 넣어서 사용
단일로만 사용: 호출되는 공간에서 직접적으로 함수를 사용한다.
ex) console.log(sum(1,3))

화살표함수

( ) => { } vs function( ){ }

✔️[값이 하나만 있을 때]

괄호 생략 가능

const add = x => x + 1;
const add2 => function(){}

✔️[중요한 특징]

익명함수로만 사용하고 메소드나 생성자 함수로 사용할 수 없다.
- 화살표 함수의 this는 언제나 상위 스코프의 this를 가리킨다. (렉시컬 스코프)
- 화살표 함수는 bind(), call()과 같은 메서드로 this를 바인딩 할 수 없다.

✔️[기존 함수의 기능과의 차이점]

prototype이 없다. 생성자 함수로 사용할 수 없다.
기존 함수와 this바인딩 방식이 다르다.
arguments 객체를 생성하지 않는다.

const doubleArrow = (x) =>	return x * 2
const doubleArrow = (x, y) => x * 2
const doubleArrow = x => x * 2

스코프

식별자(변수이름, 함수이름, 클래스이름 등)가 유효한 범위
유효 범위 스코프: 자신이 선언한 위치에 따라 자신의 유효한 범위가 달라진다.
계층적인 구조를 가지기 때문에 하위 스코프는 상위 스코프를 접근 할 수 있지만 상위 -> 하위 스코프 접근은 불가하다.
스코프의 유효 범위에 따라 전역스코프 & 지역 스코프로 나눌 수 있다.
- 전역 스코프(전역 변수): 코드 내 어디서든 참조 가능한 변수
- 지역 스코프(지역 변수): 함수 몸체 내부를 의미
- 지역 변수: 자신이 지역 스코프와 하위 지역 스코프 영역에 유효한 변수를 의미함

변수x의 스코프는 y이다. => 변수x는 y영역에서 참조할 수 있다.

🔹[스코프체인]
js에서 함수는 중첩으로 정의할 수 있다. 그때문에 선언된 변수들은 함수 범위 내에서 동작하는데 변수가 사용되는 범위에 정의되지 않을경우 js엔진은 상위 스코프 방향으로 선언된 변수를 검색한다.

🔹[렉시컬 스코프]

프로그래밍언어에서 함수의 상위 스코프를 결정하는 방식에 따라 동적 스코프와 렉시컬(정적) 스코프로 나뉘게된다.

호출한 시점에 스코프를 결정하는 방식을 동적 스코프(dynamic scope)라 하고,
정의한 시점에 스코프를 결정하는 방식을 정적 스코프(static scope) 또는 렉시컬 스코프(lexical scope)라 한다.
자바스크립트는 렉시컬 스코프를 따른다.

let x = 1

function foo() {
  let x = 10
  bar()
}

function bar() {
  console.log(x + 1)
}

foo() //2
bar() //2

전역변수를 피하는 방법

mangorovski

비니로그 쳌킨

함수