[Javascript] 객체지향 자바스크립트 [함수, 호이스팅, 블록범위]

# 함수(function)란 무엇인가?

• 코드를 그룹화하고 이름을 지정하여, 기능을 수행하는 코드    
• 함수 선언의 구성 요소
  
          function 키워드
          함수이름
          함수 매개변수 (사용하지 않거나 개수를 임의로 지정가능하며 쉼표(,)로 구분)
          코드 블록(= 함수본문)
          return문, 함수는 항상 반환값이 있다. 명시적으로 반환하지 않으면 암시적으로 undefined 반환
          함수는 하나의 값만 반환 가능
  

• 함수 호출
  
          함수 이름을 사용하여 호출
          함수 호출시 괄호 안에 매개변수 제공가능
  
  
• 매개변수(parameter)
          
          함수를 선언할 때 필요한 매개변수 지정가능
          함수를 선언할 때 필요한 매개변수 지정가능
          매개변수가 없을수도 있다
          매개변수가 필요한 함수이지만 호출시 매개변수를 제공하지 않으면 자바스크립트에서는 undefined값이 지정됨
  
          예)
                  
  
  
• 인수(arguments)
  
          매개변수와 인수는 엄밀히 말하자면 다르지만 같은 의미로 쓰임
          위의 예제에서
                  a 와 b 는 매개변수
                  1, 2는 인수
          
          함수의 매개변수개수보다 많은양의 인수를 전달할 경우 필요이상의 인수들은 무시된다
          예)
                 

[ 심화 ]

• arguments 라는 객체는 함수내부에서 사용가능한 지역변수, 자동생성
• arguments 를 통해 함수 내에서 함수의 인수들을 참조 가능
• 배열같이 보이지만 배열이아님
  
      예) pop메서드가 없다.
  
          
  
  
• 배열로 만들고싶다면,
  
          Array.from() 메서드를 통해 생성가능
          Array.prototype.slice.call(arguments)를 통해서도 생성가능
  
          예)
          
  
  
  
          

        참고 문서 

        https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/arguments

        https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/slice

# 디폴트 매개변수(default parameter)

• 함수가 호출할 때 매개변수가 생략되면 매개변수에 지정된 default 값이 적용
• undefined 는 값이 없는 것으로 간주
• 다른 매개변수도 참조 가능
  
       예)
          
          
  
  
• 디폴트 매개변수에는 자체 범위(scope)가 없다, 내부 범위의 변수에 가려지면 내부변수 사용불가
  
      예)
      
  
  
  

# 나머지 매개변수(rest parameter)

• ES6에 나머지 매개변수(rest parameter) 도입
• 반드시 매개변수 목록의 마지막이어야함
• 하나의 나머지 매개변수만 가능
• 실제 배열로 사용 가능
• arguments 대체 가능

• ... 변수이름  으로 사용가능 ('...'은 나머지연산자임)
  
     예)    
  

          
  
  
  

# 스프레드 연산자(spread operator)

• 나머지 매개변수와는 정반대의 기능을 수행
• 함수를 호출 할 때 배열의 요소를 개별 변수로 분리함
          
          예)

# 사전 정의 함수

• parseInt()
  
          모든 유형의 입력을 정수로 만듦
          실패시 NaN 반환
          문자열의 나머지 부분에 사용할 수 있는 숫자가 있더라도 무시
          두번째 매개변수로 8, 10, 16진수를 입력 할 수 있음
          두번째 매개변수를 생략하면 10진수로 가정하지만 문자열이 '0x', '0' 로 시작하면 각각 16진수, 8진수로 가정한다
          두번째 매개변수로 몇 진수인지 명시적으로 지정해주는것이 안전
          '지수'를 이해 못함
  
          예)
              

• parseFloat()
          
          숫자를 추출할 때 10진수를 찾음
          매개변수가 하나임
          '지수'를 이해한다.
  
          예)
              

• isNaN()
  
          숫자인지 아닌지 판별 가능
          NaN === NaN 은 false 이기 때문에 isNaN() 을 이용해야한다
  
          예)
          

• isFinite()
  
          Infinity 나 NaN 이 아닌 숫자인지 확인함
  
          예)
              
  
  

• encodeURI()
• decodeURI()
• encodeURIComponent()
• decodeURIComponent()
  
      URL(Uniform Resource Locator) 또는 URI(Uniform Resource Identifier)에서 일부문자는 특별한 의미를 갖는데 escape하기위해선 위의 함수들을 써야함
      encodeURI() 는 사용 가능한 URL 반환
      encodeURIComponent() 는 적용 가능한 모든 문자를 인코딩
  
       예)
          

• eval()
  
          문자열을 입력받아 자바스크립트 코드로 실행함
          성능면에서나 보안면에서나 단점이 있어서 사용하지않는다
  
          예)
              

• alert()
  
          디버깅으로 이용가능
          alert() 는 브라우저의 스레드를 차단함
          alert() 창을 닫기전까지 코드가 실행되지 않음

# 변수 범위

• 자바스크립트의 변수는 블록범위가 아닌 함수범위에 정의됨
• 전역(global) 변수는 함수 외부에서 정의하는 변수
• 지역(local) 변수는 함수 내부에서 정의하는 변수
  
     예)
      

• var 키워드없이 변수를 선언하면 전역변수로 할당된다
• 그러나 함수 내에서 전역변수를 선언한다면, 함수호출전에는 사용할 수 없다. 함수 호출 후에 사용 가능
  
      예)
          

• 전역변수의 사용을 최소화 하자
  
  
  

# 변수 호이스팅(variable hoisting)

• 전역변수와 함수 내 지역변수의 이름이 같다면 함수 내 지역변수가 우선순위 됨
• 자바스크립트 프로그램 실행이 새 함수로 들어가면 함수내에 선언된 변수들의 선언이 맨위로 올라간다 (호이스팅)
• 보통 수동적으로 호이스팅 하는방법을 추천
  
      예)
            
            처음 결과가 왜 undefined 일까?
             다음코드와 같다

# 블록 범위

• ES6 부터는 let, const 키워드 도입
• let
  
          let 으로 선언된 변수는 블록범위를 가짐
          let 선언은 블록의 맨위에 선언하는게 좋음
          블록범위 변수를 최대한 이용
          동일한 함수나 블록 내에서 재선언 불가
  
           예) 블록범위
  
              
  
          예) let은 재선언 불가
  
              
  
  
  

• const
      
          const 로 선언된 변수는 읽기 전용 참조를 생성
          const 는 대소문자를 가리지만 대문자로 쓰는것이 관례이다
          참조의 값이 변경불가의 의미는 아니다
          선언과 동시에 초기화를 해야한다
          변수 식별자는 다시 할당할 수 없다
          오브젝트는 보호되지만 오브젝트의 키는 보호되지않음
          배열은 push(), pop() 을 통해 삽입 제거 가능
  
          예)
      

              
  
  

  참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/const