[D+43] JS 예외처리, 생성자, 객체의 생성 방법

 

 

국비지원 D+43

-  JS 예외처리, 생성자, 객체의 생성 방법 -

 

---

 

JS 예외처리

예외라는 것은 문법적으로 이상은 없지만 문제가 발생되는 것을 말한다.

Java와는 달리 JavaScript는 웬만하면 결과값을 내보내려는 특징을 가지고 있어 예외처리에는 인색한 편이기때문에 이점을 주의해서 예외처리를 해주면 된다.

 

• 조건문을 사용해 예외처리하기

let h1Elem = document.querySelector('h1');

if(h1Elem === null)
{
	// 방법1) 사용자에게 엘리먼트가 존재하지 않는다고 콘솔로 띄워준다.
	console.log('[예외발생] 엘리먼트가 존재하지 않습니다.');

	// 방법2) element를 직접 만들어준다.
	h1Elem = document.createElement('h1');
	document.body.appendChild(h1Elem);
	h1Elem.textContent = 'Hello';
}
else
{
	h1Elem.textContent = 'Hello';
}

만약 body 엘리먼트에 아무것도 없는데 h1엘리먼트를 찾아서 h1의 textContent에 'Hello'라는 값을 입력하려고 한다면 h1Elem은 null값을 내뱉을 것이고 null에다가 textContent를 하면 에러가 발생될 것이다.

 

이를 처리해주기 위해서 h1Elem이 null값일 경우에 콘솔로그로 엘리먼트가 존재하지 않는다고 찍어주거나 엘리먼트를 새로만들어서 'Hello'를 찍어서 예외를 처리해주는 방법이 있다.

 

하지만 위와같은 방법은 예외에대한 문제를 발생시키는 것이 아니라 콘솔창에 단순히 메시지를 남기는 것이기 때문에 경고의 느낌이 다소 적다.

 

• try ~ catch문 사용하기

try~catch문은 기존에 자바에서 사용하는 것과 큰 차이는 없지만 catch문에서 기존에 예외의 대한 타입을 따로 선정하지 않고 변수만 지정해주면 된다.

 

const myFunc = function()
{
	try
	{
		const obj = {};
		obj.func1();  // obj가 빈객체이기 때문에 func1실행은 에러발생
	}
	catch(exception)
	{
		console.log('-------------------------------');
		console.log(exception);
		console.log('-------------------------------');
		console.log('name = ' + exception.name);
		console.log('message = ' + exception.message);

		return;
	}
	finally
	{
		console.log('finally 구문 실행');
	}
}

myFunc();

try~catch를 사용한 예제이며, catch문을 통해 받아온 예외에 대해 name과 message를 불러서 예외를 처리할 수도 있으며, 이때 예외에 대한 name과 message는 따로 불러올 수 있다.

 

또한 try~catch에서 finally은 catch문에서 return을 입력해도 어떠한 경우에도 반드시 실행되기 때문에 예외처리중 반드시 실행되어야할 항목을 넣어주어야 한다.

 

• throw

const myFunc = function()
{
	try
	{
		const obj = {};
		throw 'throw를 사용해 강제로 예외를 발생시켰습니다.';
	}
	catch(exception)
	{
		console.log('-------------------------------');
		console.log(exception);
		console.log('-------------------------------');
		console.log('name = ' + exception.name);
		console.log('message = ' + exception.message);

		return;
	}
	finally
	{
		console.log('finally 구문 실행');
	}
}

myFunc();

또한 내가 강제로 예외를 발생시킬수도 있는데 바로 throw를 사용해서 예외를 발생시키는 방법이다.

코드자체가 괴랄하기는 하지만 내가 throw를 사용해서 예외를 발생시킬수 있으며, 이때 예외의 대한 정보를 확인할 수도 있다.

 

---

생성자

• 생성자 함수 (Constructor function)

- 객체를 초기화 하는 함수

- new와 함께 사용된다.

- 일반적인 객체지향언어에서의 생성자와는 다르다.

- JS의 생성자는 일반함수를 기반으로 객체를 생성한다.

 

• 생성자 함수의 이해

// 3. MyFunc는 빈객체를 접근하기 위해서 this로 접근을 시도한다.
const MyFunc = function(a, b)
{
	this.a = a;
    this.b = b;
}

// 1. new - 클래스가 없으니 빈 객체를 만든다.
// 2. MyFunc를 실행시킨다. --> 빈객체의 참조값을 MyFunc의 this로 넘겨버린다.
const m1 = new MyFunc(10, 20);

console.log(m1.a);	//10
console.log(m1.b);	//20

- 함수는 함수 객체이며, 이는 함수를 호출하고 관리하기 위한 여러 기능이 포함되어 있다.

- 함수 객체를 new로 할당시 좀 더 많은 기능이 추가되며 이때 함수 객체를 만드는 함수를 특별히 생성자함수라고 부른다.

- 생성자를 통해 함수객체를 생성하면 함수내부에 임의의 객체를 파라미터로 전달하며 이를 this로 접근한다.

- 일반함수의 경우 window 객체가 전달된다, window 객체는 전역객체이다.

 

 

---

객체의 생성 방법

자바스크립트에서 객체의 생성방법엔 여러가지가 있다.

각자의 장단점을 알고 필요할때 알맞은 용도로 사용하는 것이 중요하다.

 

• literal object

const student = {
	name : '홍길동',
	number : 1,
	score : {
		kor : 80, 
		eng : 50,
		math : 78
	}
};

정보에 대한 리스트가 필요할 경우 주로 사용된다.

 

생성측면 )

- 장점 : 만들기 쉽다.

- 단점 : 인스턴스의 개수가 늘어날 수록 만드는 시간이 기하급수적으로 늘어난다.

 

활용측면 )

- 장점 : 추가, 삭제, 변경 등이 자유롭고 편리하다.

- 단점 : 정보은닉 측면에서 약하다.

 

• 클로저

const student = function(name, number, score)
{
	return {
		getName : function()
		{
			return name;
		},
		getNumber : function()
		{
			return number;
		},
		getScore : function()
		{
			return score;
		},
		setName : function(_name)
		{
			name = _name;
		},
		setNumber : function(_number)
		{
			number = _number;
		},
		setScore : function(_score)
		{
			score = _score;
		},
		getTotal : function()
		{
			return score.kor + score.eng + score.math;
		},
		getAvg : function()
		{
			return (this.getTotal() / 3).toFixed(2);
		}
	};
};
        
const st1 = student('홍길동', 1, {kor: 80, eng: 50, math: 78});

여러개의 인스턴스를 생서하거나 정보은닉이 강조되어 필요할 때 주로 사용된다.

 

생성측면 )

- 장점 : 별로 없다.

- 단점 : 만들기가 까다롭고, 문법적인 요소를 이해하지 못하면 만들기가 어렵다.

 

활용측면 )

- 장점 : 정보은닉 구현이 가능하고, 여러개의 인스턴스를 구현할 수 있다.

- 단점 : 완벽한 객체지향은 아니기 때문에 외부에서 들어오는 값을 막기 어렵다.

 

• 생성자 함수

const Student = function(name, number)
{
	this.name = name;
	this.number = number;
	this.score = {
		kor : 0,
		eng : 0,
		math : 0
	};
	this.getTotal = function()
	{
		return this.score.kor + this.score.eng + this.score.math;
	};
	this.getAvg = function()
	{
		const total = this.getTotal();
		if(total === 0)
			return 0;
		else    
			return (this.getTotal() / 3).toFixed(2);
	}
}

const st1 = new Student('홍길동', 1);
console.log(st1.name);
console.log(st1.number);
st1.score.kor = 80;
st1.score.eng = 50;
st1.score.math = 78;
console.log(st1.getTotal());
console.log(st1.getAvg());

여러개의 인스턴스 생성이면서 부담없이 사용하고 싶을 때 주로 쓰인다.

 

생성측면 )

- 장점 : 읽기 좋으며, 코드가 간결하고 만들기 편하다.

- 단점 : 생성자 함수로 사용되지 않을 경우 문제가 발생될 수 있어 추후에 보완코드를 필요로 한다.

 

활용측면 )

- 장점 : 여러개의 인스턴스를 구현할 수 있다.

- 단점 : 완벽한 객체지향은 아니다.

 

• class

class Student {
	constructor(name, number, score) {
		this.name = name;
		this.number = number;
		this.score = score;
	}

	getName() {
		return this.name;
	}

	getNumber() {
		return this.number;
	}

	getScore() {
		return this.score;
	}

	setName(_name) {
		this.name = _name;
	}

	setNumber(_number) {
		this.number = _number;
	}

	setScore(_score) {
		this.score = _score;
	}

	getTotal() {
		return this.score.kor + this.score.eng + this.score.math;
	}

	getAvg() {
		return (this.getTotal() / 3).toFixed(2);
	}
}

const s1 = new Student("홍길동", 1, { kor: 80, eng: 50, math: 78 });

console.log(s1.getTotal());
console.log(s1.getAvg());

class는 객체생성을 하는 종류들의 문제점들을 보완해서 만든 것으로 꽤 사용되는 구조이다.

 

생성측면 )

- 장점 : 기존 객체생성과 관련된 문제점들을 보완한 것으로 사용하기 편리하다.

- 단점 : 별로없다.

 

활용측면 )

- 장점 : 여러개의 인스턴스를 구현할 수 있으며, 정보은닉이나 다형성 또한 구현이 가능하다.

- 단점 : 완벽한 객체지향 기능을 제공하는 것은 아니다.