[혼자 공부하는 자바스크립트] 5장. 함수

05-1 함수의 기본 형태

• 함수 호출 : 함수를 호출한다
• 매개변수 : 함수 호출할 때 넣는 자료
• 리턴값 : 함수를 호출해서 최종적으로 나오는 결과

익명 함수

function(){}

• 모든 웹 브라우저가 내장하고 있는 함수의 코드는 볼 수 없다

선언적 함수

function 함수(){}

매개변수와 리턴값

• 일반적인 숫자 계산 출력은

function 함수(매개변수) {
	let output = 초기값
    처리한다
    return output
}

나머지 매개변수

• 가변 매개변수 함수 : 매개변수의 개수가 고정적이지 않은 함수
• 나머지 매개변수

function 함수이름(... 나머지 매개변수){}

• 매개변수 앞에 마침표 3개를 입력하면 매개변수들이 배열로 들어옴
• 예시

function min(...items) {
	let output = items[0]
    for(const item of items) {
    	if(output > item){
        	output = item
        }
   	}
    return output
 }
 
 console.log(`${min(52, 273, 32, 103, 275, 24, 57}`)

나머지 매개변수, 일반 매개변수 조합하기

• 나머지 매개변수인 것은 배열로 따로 들어가진다

function 함수(매개변수, 매개변수, ... 나머지 매개변수){}

• 자료형에 따라 다르게 작용하는 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])}`);
console.log(`${min(52, 273, 32, 103, 275, 24, 57)}`);

전개 연산자

함수(... 배열)

• 나머지 매개변수 : 함수를 만들 때 사용
• 전개 연산자 : 함수를 호출 할 때 사용

기본 매개변수

함수 이름(매개변수, 매개변수=기본값, 매개변수=기본값)

구버전 자바스크립트 매개변수 함수 구현하기

• 구버전의 자바스크립트에서 가변 매개변수 함수를 구현할 때는 배열 내부에서 사용할 수 있는 특수한 변수인 arguments를 활용함
• arguements는 매개변수와 관련된 여러 정보를 확인할 수 있고 배열과 비슷하게 사용할 수 있음
• 배열과 비슷한 자료형이지만 배열은 아님

function sample() {
  console.log(arguments);
  for (let i = 0; i < arguments.length; i++) {
    console.log(`${i}번째 요소 : ${arguments[i]} `);
  }
  sample(1, 2, 3);
}
// 결과
// > Arguments(2)[1,2,callee : f, Symbol(Symbol.iterator):f]
//> 0번째 요소 :1 
//> 1번째 요소 :2
//> 2번째 요소 :3 

구버전 자바스크립트에서 전개연산자 구현하기

• apply() 함수를 쓰는 특이한 패턴

function sample(...items){
  console.log(items)
}

// 전개 연산자 사용 여부
const array = [1,2,3,4]
console.log(sample.apply(null,array))

구버전 자바스크립트 기본 매개변수 구현하기

• undefined로 구분

function earnings(wage, hours) {
  wage = typeof wage != undefined ? wage : 8590;
  hours = typeof hours != undefined ? hours : 52;
  return wage * hours;
}

• 매개변수로 들어오는 값이 false 또는 false로 변환되는 값(0, 빈 문자열)이 아니라는게 확실하다면

function earnings(wage, hours) {
  wage =   wage || 8590;
  hours =  hours ||  52;
  return wage * hours;
}

05-2 함수 고급

• 자바스크립트 : 함수도 하나의 자료라는 개념
  => 지정이 아닌 중간에 만들 수 있음
  => 2010년 등장한 비동기 프로그래밍을 이끌게 됨
• 자바스크립트의 함수 : 람다, 익명함수라는 이름으로 기본 문법에 포함

콜백 함수

• forEach()
  • 배열이 갖고 있는 함수
  • 단순하게 배열 내부의 요소를 사용하여 콜백 함수를 호출

const numbers = [273,52, 103, 32, 57]
numbers.forEach(function(value, index, array)	{console.log`${index}번째 요소 : ${vlaue}`
})

• map()
  • 배열이 갖고있는 함수
  • map() 메소드는 콜백함수에서 리턴한 값들을 기반으로 새로운 배열을 만드는 함수
  • 콘솔로그를 매개변수로 넘기는 것은 뭘까?(223p)

let numbers = [273,52, 103, 32, 57]
numbers = numbers.map(function(value,index,array){
	return value * value
})

numbers.forEach(console.log)

• filter()
  • 배열이 갖고있는 함수
  • filter() 메소드는 콜백 함수에서 리턴하는 값이 true 인 것들만 모아서 새로운 배열을 만드는 함수

화살표 함수

• 배열의 메소드와 화살표 함수 / 메소드 체이닝

numbers
	.filter((value => value % 2 === 0 )
    .map((value => value * value)
    .forEach((value) =>{
    console.log(value)
    })

타이머 함수

• setTimeout(함수, 시간) : 특정 시간 후에 함수를 한번 호출
• setInterval(함수, 시간) : 특정 시간 마다 함수 호출
• clearTimeout(타이머ID) : setTimeout()함수로 설정한 타이머를 제거합니다.
• clearInterval(타이머ID) : setInterval()함수로 설정한 타이머를 제거합니다.
• 타이머 ID는 setTimeout()함수와 setInterval() 함수를 호출할 때 리턴값으로 나오는 숫자

let id
let count = 0
id = setInterval(()=>{
  console.log(`1초마다 실행됩니다.(${count}번째)`)
  count ++
}, 1* 1000)

setTimeout(()=>{
  console.log('타이머를 종료합니다.')
  clearInterval(id)
}, 5*1000)

즉시 호출 함수

(function(){})()

• 코드가 여러곳에서 사용되면, 변수 이름이 충돌할 가능성이 높음.
• 변수가 존재하는 범위 : 스코프
• 자바스크립트에서 스코프 단계를 변경하는 방법은 중괄호를 사용해서 블록을 만들거나, 함수를 생성해서 블록을 만드는 방법
• 섀도잉 : 블록이 다른 경우 내부 변수가 외부 변수를 가리는 현상

{
블록을 만든다!
}

즉시 호출 함수 문제 해결하기

• 블록을 사용하는 방법과 함수 블록을 사용하는 방법 모두 최신 자바스크립트를 지원하는 웹 브라우저에서는 사용할 수 있음
• 그러나 구버전의 자바스크립트에서 var키워드는 함수 블록을 사용하는 경우에만! 충돌을 막을 수 있음
• 트랜스파일(최신으로 변경)도 단순한 블록으로 함수 충돌을 막는 코드는 제대로 변환해주지 못함
• 따라서 함수블록 사용, 즉시 호출

(function(){
	let pi = 3.141592
    console.log(`파이 값은 ${pi}입니다.`)
})()

• 즉시 실행 함수는 왜 쓰는 걸까?
  세부 설명
• 즉시 실행 함수에 익명 함수를 사용해야 할까?
  • 즉시 실행 함수에도 이름을 붙여 즉시실행함수로 사용할 수 있다.
  • but, 즉시실행함수는 선언과 동시에 호출되어 반환되어 재사용할 수 없기 때문에, 이름을 지어주는 것이 의미가 없음.
  • 하지만, 즉시 실행함수에 기명, 익명 함수를 사용하는 것은 개발자들 사이에서도 의견이 갈림.
• 즉시실행함수를 왜 사용할까?
  1. 필요 없는 전역 변수의 생성을 줄일 수 있음.
  • 함수를 생성하면 그 함수는 전역 변수로써 남아있게 되고, 많은 변수의 생성은 전역 스코프를 오염시킬 수 있음
  • 즉시 실행 함수를 선언하면, 내부 변수가 전역적으로 저장되지 않기 때문에 전역 스코프의 오염을 줄일 수 있음.
  2. private한 변수를 만들 수 있음
  • 즉시 실행 함수는 외부에서 접근 할 수 없는 자체적인 스코프를 가지게 됨. 이는 클로저의 사용 목적과도 비슷, 변수를 외부로부터 privte하게 보호할 수 있다는 장점
• 즉시실행함수를 어떻게 활용할까?
  1. 단 한번의 사용이 필요한 함수
  • 즉시 실행 함수는 한번의 실행 이후 없어지기 때문에 단 한번만 필요한 함수에 사용됨
  • 변수를 초기화 하는 함수
  2. 자바스크립트 모듈
  • 자바스크립트 모듈을 만들때에도 즉시 실행 함수 많이 활용
  • 전역에서 반환 객체의 함수를 통해 current 값을 얻거나 수정할 수 있음
  • current 변수는 private 하기 때문에 클로저를 통한 접근 외에는 접근 및 수정이 불가능함

const Counter = (function counterIIFE() {
    // 현재 counter 값을 저장하기 위한 변수
    let current = 0;

    return {
        getCurrentValue: function () {
            return current;
        },

        increaseValue: function () {
            current = current + 1;
            return current;
        },

        decreaseValue: function () {
            current = current - 1;
            return current;
        },
    };
})();

console.log(Counter.getCurrentValue()); // 0
console.log(Counter.increaseValue()); // 1
console.log(Counter.decreaseValue()); // 0

엄격모드

'use strict'
문장
문장

• 기존 자바스립트에서는 let 선언 없어도, 바로 사용 가능
• but 엄격모드에서는 불가
• 자바스크립트는 오류를 어느정도 무시하고 넘어가는 것들이 있어 편하지만, 문제가 삽ㄹ생하는 경우도 있음
• 즉시 호출 함수를 만들고, 블록 가장 위쪽에서 엄격모드를 적용하는 경우가 많음.
  • 해당 블록 내부만 엄격하게 적용

(function(){
	'use strict'
    문장
    문장
})()

익명 함수와 선언적 함수의 차이

• while 반복문은 조건을 중심으로

• for 반복문은 횟수를 중심으로, 배열 중심으로

• 익명함수가 조금 더 안전하게함

  • 익명함수 : 순차적인 코드 실행
  • 선언적 함수 : 순차적인 코드 실행이 일어나기 전에 생성, 선언적함수는 같은 블록이라면 어디에서 함수를 호출해도 상관없음.
  • 같은 이름이라면 덮어씀! 대박!