es6 문법으로 refactoring하기

 

Preview

레거시 소스를 보면 es5 혹은 그 이전의 문법으로 되어있는 부분이 있습니다.

정상적으로 잘 돌아가고 있는데 이를 꼭 es6로 리팩토링을 해야 할까요?

 

정답은 없을 것 같아요. 오히려 새로운 문법으로 다 바꾸는 걸 선호하지 않은 개발자도 있을 것이고 모든 걸 새로운 문법으로 바꾸는걸 선호하는 개발자도 있을 겁니다. 저는 좀 새로운 문법 혹은 트렌드에 맞춰 개발하는걸 선호하기 때문에 여러 소스를 리팩토링 하는걸 좋아합니다.

 

다음은 ES6 문법 이전의 문법으로 구현된 채팅 기능 일부 소스입니다. 채팅 방 객체 ARoom을 생성하고 Prototype 기반의 객체 생성 방식으로 구현되었습니다. 방 객체를 생성하고 해당 객체의 prototype에 필요한 함수 및 변수를 저장합니다. 

//-----------------------------------------------------------------------------------//
//	class ARoom
//-----------------------------------------------------------------------------------//

var storedObj = {};
//constructor
storedObj.ARoom = function(id)
{
	this.id = id;
	this.name = null;        
	this.maxSize = 2;			 //최대 방 인원
	this.hostUser = null;	
	this.users = [];     //user 객체를 담는 Array
};
//방 정보를 설정합니다.
storedObj.ARoom.prototype.setRoomInfo = function(info)
{
	this.name = info.name;
	this.maxSize = info.maxSize;
};
//방 정보를 읽어옵니다.
storedObj.ARoom.prototype.getRoomInfo = function()
{
	return {id:this.id, name:this.name, number:this.users.length};
};
//방에 참여한 user중 특정 user를 찾습니다.
storedObj.ARoom.prototype.findUser = function(userId)
{
    var len = this.users.length;
    for(var i=0; i<len; i++)
    {
        if(this.users[i].id==userId) 
            return this.users[i];
    }
    
    return null;
};
//방에 참여한 인원에게 데이터를 전송합니다.
storedObj.ARoom.prototype.send = function(data)
{
	var len = this.users.length;
	for(var i=0; i<len; i++)
	{
		this.users[i].send(data);
	}
};

 

 

위 소스코드 그대로 es6 문법을 곁들여서 refactoring을 해보겠습니다. 변경 방법은 다음과 같습니다.

1. class based : prototype 기반에서 class based로 변경합니다.

* prototype 기반이 아닌 class based로 변경하는 이유는 prototype기반의 객체는 원본 객체의 변경이 가능하기 때문입니다.

2. Arrow Function : 화살표 함수를 사용합니다.

3. Functional Programming  : 고차함수를 사용합니다.

class ChatRoom{
    constructor(id){
        this.id = id;
        this.name = null;
        this.maxSize = 2;			
        this.hostUser = null;
        this.users = [];
    }
    setRoomInfo = (info)=>{
        const {roomName, maxSize} = info;

        this.name = roomName;
        this.maxSize = maxSize || 2;
        
    }
    getRoomInfo = (info)=> {
        return {
            id : this.id, 
            name : this.name, 
            number : this.users.length, 
        }
    }
    findUser = (userId)=> this.users.filter((item)=> item.id === userId)[0] || null;
    send = (data)=> {
        this.users.forEach((item)=>{ item.send(data)})
    };

 

화살표 함수와 고차함수의 사용으로 코드가 조금 더 간결하고 짧아졌고

클래스 기반의 프로그래밍을 통해 원본 객체의 불변성(immutable)을 지킬 수 있습니다. 

 

프로토타입 방식은 링크를 통해 여러 객체의 프로퍼티를 동적으로 수정할 수 있어 유연하게 코딩이 가능하지만 

어느 한 곳에서 프로토타입을 건드렸을 때 해당 프로퍼티를 참조하는 다른 곳에서 또 문제가 발생할 수 도 있기 때문에 잘 유의해야 합니다.