[JavaScript] 기본개념 05

해당 벨로그는 드림코딩의 자바스크립트 기초 강의 (ES5+) 5강을 보고 작성한 글입니다.

5강은 함수(function) 에 대해서 배운다.

자바스크립트 같은 절차적 언어에서는 함수가 아주 중요한 역할을 한다.

function이 너무 중요해서 때로운 sub-program 이라고 부르기도 한다.

함수는 input 을 받아서 처리한 후 output 을 리턴한다.

언어 자체에 존재하는 function 을 사용할 때 or API(Application Programming Interface) 를 쓸 때,

함수의 이름을 보고 함수가 이런 기능을 하겠구나 하고 생각할 수 있다.

전달해야하는 파라미터들이 무엇인지 어떤 값을 리턴하는 것을 기대할 수 있을지 알 수 있다.

⇒ 함수(function) 은 input 과 output 이 중요하고 함수의 이름을 잘 짓는 것이 중요하다.

• function

프로그램을 구성하는 근본적인 빌딩 블록이라고 할 수 있다. subprogram 이라고 부르며,여러번 재사용할 수 있다. 한 가지의 일이나 값을 계산하기 위해서 사용되고 있다.

함수 정의

함수 이름 지정 → 파라미터 나열 → body(함수 기능 로직) 작성 → 값 return

하나의 함수는 한가지 일만 하도록 만들어야 한다.

변수는 명사로 작명하고, 함수는 동사로 작명 → 함수는 무언가를 동작하기 때문

함수 이름 짓는 것이 너무 힘들다면, 함수 기능에 많은 것을 담으려고 하는 게 아닐지 한번 생각하기

생각을 통해 필요하다면 함수를 세분화해서 만드는 것이 좋다.

자바스크립트에서 함수(function) 는 오브젝트(object) 이다.

함수가 오브젝트로 간주되기 때문에, 함수를 변수에 할당할 수 있고, 파라미터로 전달되거나 리턴될 수 있다.

• (파라미터가 없는 경우)

  

  함수의 정의 → function 함수명() { }
  

• (파라미터가 있는 경우)

  

  파라미터로 message 를 전달하면, 이 전달된 message 를 console.log 로 출력

  자바스크립트에서는 파일이 없다.

  함수 자체의 인터페이스만 보았을 때, message 가 String 으로 전달할지, 숫자로 전달할지 명확하지 않다. → 함수 중에 타입이 중요할 때는 자바스크립트 사용이 좀 난해할 수 있다.
  
  

  타입스크립트

  타입스크립트 홈페이지에서 자바스크립트, 타입스크립트 서로로 바꿔주는 탭이 있다.

  타입스트립트는 파라미터나 리턴 타입들을 반드시 명시하도록 되어 있다.

  

  좌측이 typescript, 우측이 javascript

  

  파라미터 message의 타입은 string, 리턴타입은 number

  타입스크립트를 현업에서 사용하는 것이 자바스크립트보다 더 명확하며, 개발일을 좀 더 쉽게 만들어준다.

  함수의 인터페이스만 봐도 무엇을 하는 함수인지, 함수의 이름과 파라미터, 데이터 타입, 리턴 타입을 확실하게 확인하고 개발할 수 있기 때문이다.

  
  

• Parameters(파라미터)

  • premitive parameters (원시적 파라미터) → 메모리에 값이 그대로 전달되어 있어서, 값이 전달됨

  • object parameters → 메모리에 참조형태가 저장되어 있어서, 주소가 전달됨

    

    changeName 이라는 함수는 전달된 object 의 name 을 ‘coder’ 로 무조건 변경하는 함수이다.

    ellie 라는 const 를 정의한 후, ellie 라는 object 를 만들어서 할당해준다.

    메모리엔 obejct 가 만들어진 참조(reference) 가 들어가고, 참조주소는 object 를 메모리 어딘가라고 가르키고 있다.

    changeName(ellie) → 전달된 ellie 가 가르키고 있는 name 을 coder 로 바꿔준다.

    ⇒ object 는 참조 형태로 전달되기 때문에, 함수 안에서 object 값을 변경하게 되면, 그 변경된 사항이 그대로 메모리에 적용되기 때문에 변경된 결과값을 그대로 확인가능하다.

    
    

  • Default Parameters (ES6에서 추가됨)

    

    showMessage 함수에서 message, from 이라는 2가지의 파라미터를 받아온다.

    showMessage(’Hi!’) 에서 1개의 파라미터만 전달되었다. → from이 undefined 로 출력됨

    
    

    파라미터의 값이 전달되지 않았을 경우를 대비해서, 파라미터 바로 옆에 원하는 디폴트 값을 지정해놓는다. → 파라미터 값이 전달되지 않았을 경우 디폴트 값이 대체되어 사용된다.

    
    

  • Rest Parameters (ES6에서 추가됨)

    . . . → 이 3개의 점을 Rest Parameters 라고 부른다.

    이 파라미터는 배열 형태로 값이 전달된다.

    

    인자를 3개를 전달했는데, …args 에서 인자 3개가 담긴 배열형태로 전달한다.

    
    

    반복문에 3가지 방법이 있다.

    함수는 오브젝트의 일종이다.

    예를 들어 printAll. 이라고 작성했을때, printAll이라는 함수가 오브젝트로 전환된다.

    그래서 printAll. 시에 자동적으로 printAll 의 속성값을 확인해볼 수 있다.
    

• Scope

  • Local Scope

    

    scope 에 블럭 레벨의 scope 과 글로벌 레벨의 scope 이 존재한다.

    밖에서는 안이 보이지 않고, 안에서만 밖을 볼 수 있다.

    함수나 블록{} 안에서 변수를 선언한다면 → 지역 변수

    지역 변수는 지엽적이기 때문에 안에서만 지역 변수에 접근이 가능하다.

    안에서는 globalMessage 를 볼 수 있다. 출력이 가능하다.

    
    

    함수 안에서 함수를 선언할 수 있다.

    printAnother 가 printMessage 에 있는 변수 message 를 확인할 수 있다.

    하지만, printMessage 가 printAnother 안에 있는 childMessage 를 확인하면 에러가 난다.

    ⇒ 자바스크립트에서 scope 란, 밖에서는 안이 보이지 않고, 안에서만 밖을 볼 수 있는 것이다.
    

• Return

  • Return a value

    

    return 타입이 없는 함수들은 return undefined 가 생략되어있는 것이다.

    
    

  • Early Return

    

    현업에서 조언받을 수 있는 내용 → early return, early exit

    블럭 안에서 로직을 많이 작성하면 가독성이 많이 떨어진다.

    
    

    상단의 if-else 문을 번갈아 사용하는 것 보다는, 조건이 맞지 않을 경우 빨리 return 을 해서 함수를 종료하고, 조건이 맞을 때만 필요한 로직들을 수행하는 것이 더 효율적이다.

    아닌 것은 빠른 return으로 종료시키고 맞는 것은 그 다음에 로직을 수행하는 방법

• Function Expression

  

  function 은 다른 변수와 마찬가지로, 변수에 할당되고, 함수 내의 파라미터로 전달되며, 리턴값으로 리턴이 된다. → 이 3가지가 가능하도록 하는 것이 Function Expression 이다.

  
  

  anonymous function → 함수에 이름이 없이 필요한 부분만 작성해서 변수에 할당

  named function → 이름을 붙인 함수

  function declaration 과 function expression 의 차이점

  function expression 은 함수를 선언한 다음의 시점부터 함수를 사용할 수 있다.

  function declaration 은 호이스팅이 된다. → 함수가 선언되기 이전에도 함수 호출이 가능하다.

  자바스크립트가 선언된 엔진을 가장 먼저 올려주기 때문이다.
  

• Callback hell

  

  randomQuiz 함수 → ( 정답과 정답일경우호출할함수, 정답이아닐경우호출할함수 ) 함수 2개전달

  ‘상황에 맞는 경우에 전달된 함수를 호출하라’ 라고 전달하는 것을 callback function 이라고 한다.

  → callback functions 가 파라미터로 전달되어서 정답이 ‘love you’ 인 경우에만 printYes() 라는 콜백함수를 호출한다. 정답이 아니면 printNo() 라는 콜백함수를 호출한다.

  randomQuiz 함수를 호출하려면, answer 와 printYes, printNo 라는 function expressions 2가지를 전달해야 한다.

  
  

  printYes() 에는 annoymous 함수가 사용되었다.

  printNo() 에는 named 함수가 사용되었다.

  function expressions 에서 named 함수가 사용하는 것은 후에 디버깅 할때, 함수명이 보이도록 하기위해서이다.

  함수내에서 자기자신을 호출하는 것을 recursion 이라고 한다. → 정말 필요할 때만 사용
  

• Arrow Function

  

  Arrow Function 는 함수를 간결하게 만들어주는 함수이다.

  Arrow Function 는 항상 이름이 없는 annoymous 함수이다.

  
  Arrow Function 은 이렇게 선언하면 끝이다.
  
  

  a+b 로 리턴하는 function expressions

  
  간결하게 쓸 수 있고, 배열이나 리스트 사용시 더욱더 간편하다는 장점을 누릴 수 있다.
  
  

  함수안에서 블럭이 필요하다면, 블럭을 넣어서 처리할 수 있다.

  단, return 을 추가해야 한다.
  

• IIFE(Immediately Invoked Function Expression)

  

  함수 선언한 것을 괄호로 묶으면 바로 실행이 가능하다.
  

QUIZ

function add(a,b) {
	return a + b ;
}

function substract(a,b) {
	return a - b ;
}

function divide(a,b) {
	return a / b ;
}

function multiply(a,b) {
	return a * b ;
}

function remainder(a,b) {
	return a % b ;
}

const add = (a,b) => a+b;
const substract = (a,b) => a-b;
const divide = (a,b) => a/b;
const multiply = (a,b) => a*b;
const remainder = (a,b) => a%b;