함수, 1급 객체

최근 업무가 하이브리드 앱을 제작하는 일이다 보니, 자바, 스프링보단 TypeScript, Angular, Ionic 위주로 공부를 하게 되는 것 같다. 

 

클라이언트 UI, UX부터 Angular의 문법과 활용 그리고 HTTP 요청을 받기 위한 백엔드 작업, SQL 쿼리 작성, 테스트 등등.. 많은 작업을 하는데, 이게 생각보다 재밌는데 단점은 내가 너무 느리다는 생각이 드는 것 같기도 하고 여러 방면을 신경 쓰다 보니 무엇이 최선이고 가장 좋은 방법인지 결단을 내리는 일이 매우 힘들다는 점이다. 

뭐 결론은 자바스크립트 기초 공부나 더하자로 결론 냈다.

 

들어가기 전 복습

• 자바스크립트의 함수의 분류는 non-constructor, constructor이며, 공통분모로는 callable이다.
  함수 객체만을 위한 [[Call]]. [[Construct]] 같은 내부 메서드를 가지는데, 일반 함수로서 호출되면 함수 객체의 [[Call]]이 호출되고 생성자 함수로 호출되면 [[Construct]]가 호출된다. 
• ECAMScript 사양에서 메서드란 ES6의 메서드 축약 표현만을 의미한다.
  

  ES5
  
  var obj = {
  	hi : function(){
      	console.log('hi');
      }
  }
  
  
  ES6
  
  const obj = {
  
  	hi(){
      	console.log('hi');
      }
  }​

함수 선언문과 함수 표현식으로 정의된 함수 만이 constructor이고 ES6 Arrow Function, ES6의 메서드 축약 표현으로 정의된 함수는 non-constructor이다.

 

일급 객체

 

1. 무명의 리터럴로 생성할 수 있다. (런타임생성가능)

2. 변수나 자료구조에 저장할 수 있다.

3. 함수의 매개변수에 전달할 수 있다.

4. 함수의 반환 값으로 사용할 수 있다.

//변수에 할당, 무명의 리터럴로 생성
//런타임에 함수 리터럴이 평가 후 생성되어 변수에 할당
const test1 = function (a){
	return a;
};

//객체에 저장
const obj = {test1};

function callback(callback){
    let hello = 'world';

    return function () {    	
    	return callback(hello);
    };
}

//함수의 매개변수 전달
const helloFunction = callback(obj.test1);

자바스크립트의 함수는 이 조건에 모두 해당된다. 그렇기 때문에 자바스크립트 함수는 일급 객체이다.

일급 객체로서 함수가 가지는 특징은 함수는 값으로 취급되어 값이 들어갈 수 있는 할당 문, 프로퍼티, 배열 요소 등등 다양한 위치에 들어갈 수 있고 일반 객체와 같이 함수의 매개변수에 전달할 수 있으며, 반환 값으로도 사용이 가능하다는 점이다. 

 

자바스크립트에서 함수는 객체이지만 일반 객체와는 차이가 존재한다. 일반 객체는 호출할 수 없지만 함수 객체는 호출할 수 있으며 함수 객체의 고유 프로퍼티를 소유하고 있다.

 

 

__proto__ 접근자 프로퍼티

 

모든 객체는 [[Prototype]]이라는 내부 슬롯을 가지고 있는데, 이 내부 슬롯은 객체지향 프로그래밍의 상속을 구현하는 프로토타입 객체를 가리 칸다.

 

이때 __proto__라는 프로퍼티는 내부 [[Prototype]]이 가리키는 프로토타입 객체에 접근하기 위해 사용하는 접근자 프로퍼티이다.

 

 * hasOwnProperty : 인수가 객체 고유의 프로퍼티 키인 경우에만 true, 상속받은 프로토타입의 프로퍼티 키인 경우 false

 

 

 

prototype 프로퍼티

 

 prototype 프로퍼티는 생성자 함수로 호출할 수 있는 함수 객체, constructor만이 소유하는 프로퍼티이다. 그렇기 때문에 일반 객체와 생성자 함수로 호출할 수 없는 non-contructor에는 prototype 프로퍼티가 없다.

 

 

 

 

arguments 객체

 

ES6에 이 트러블이 도입되면서 arguments 객체는 유사 배열이면서 이터러블이 되었다. 

이를 배열로 반환하여 인자를 반복을 돌거나 인자의 숫자가 맞지 않는 경우( 자바스크립트의 함수는 정해진 인자만큼 인자를 전달하지 않아도 오류가 발생하지 않는다.) 검증을 하기 위한 용도로 쓰였다. 

 

//arguments 객체를 배열로 변환
function sum(){
	const arr = Array.prototype.slice.call(arguments);
    return arr.reduce(function (pre, cur) {
    	return pre +cur;
    }, 0 );
}

ES6 Rest

function sum2(...args){
	return args.reduce( (pre,cur) => pre + cur, 0 );
}