대수롭지 않게 넘어갈 만한 문법과 표현식(2)
Destructuring (구조 분해)
ES 2015에서 등장한 배열과 객체를 다룰 때 사용할 수 있는 문법으로 이름처럼 배열이나 객체를 구조를 분해해준다.
배열의 구조분해
const rank = ['종필', '후', '민석'];
const one = rank[0];
const sec = rank[1];
const thr = rank[2];
console.log(one); // -> 종필
console.log(sec); // -> 후
console.log(thr); // -> 민석
// ⬇⬇⬇⬇⬇
// 구조분해
const [one, sec, thr] = rank;
console.log(one); // -> 종필
console.log(sec); // -> 후
console.log(thr); // -> 민석
위처럼 구조분해는 배열의 형태를 띈 변수명들에 오른편의 배열을 분해하여 각각의 값을 할당해준다. 주의할점 은 오른편의 값이 배열의 형식이 아니거나 아무것도 할당하지 않는다면 error를 출력하게 된다.
한가지 더 알아두면 좋은점은
// 구조분해
const [one, sec, ...thr] = rank;
마지막에 변수명에 …를 붙여주게 된다면 배열을 분해하여 할당하여줄 때 …이 붙은 변수명에 할당하고 남은 나머지 값들을 할당하여 준다. …은 나머지를 할당할때 사용하기 때문에 변수명의 마지막에만 사용할 수 있으며 기본값을 지정하여 줄 수도있다. 이 배열의 구조분해는 값을 바꿔줄때도 사용할 수 있는데
//기존의 값 변경
const one = 'jong';
const two = 'pill';
const temp = one;
one = two;
two = temp;
console.log(one); // -> 'pill'
console.log(two); // -> 'jong'
//구조분해 사용
// 처음 변수 선언부분 생략
[one, two] = [two, one]
console.log(one); // -> 'pill'
console.log(two); // -> 'jong'
이렇게 기존의 방법보다 훨씬 간단하게 변수를 바꿔줄 수 있다.
객체의 구조분해
const obj = {
name: 'kim',
age: 15,
weight: 150
};
const name = obj.name;
const age = obj.age;
console.log(name); // -> 'kim'
console.log(age); // -> 15
// ⬇⬇⬇⬇⬇
// 구조분해
const {name, age} = obj;
객체의 구조분해는 위와 같은데 배열을 구조분해 할때 대괄호를 이용했던것처럼 객체는 중괄호를 이용하며
객체는 배열과 다르게 프로퍼티 네임이 존재하기 때문에 할당연산자(=) 왼편의 변수명과 오른편 객체의 프로퍼티 네임이 같으면 그 프로퍼티 네임의 값을 왼편의 일치하는 변수명에 할당해준다.
하지만 만약 프로퍼티 네임과 변수명을 다르게 하고싶다면
const {name:myName, age} = obj;
위와 같이 세미콜론(:)를 붙이고 자신이 설정하고싶은 변수명을 작성해주면 된다. 그 외에도 배열의 구조분해때 알아봤던것처럼 나머지를 설정하거나 기본값을 설정해줄 수도 있다.
에러 ERROR 와 에러 객체
코드를 작성하다보면 적지않게 에러를 볼 수있다. 에러가 나오는것은 문제가 되지 않으나 에러가 나오면 그 이후의 코드들은 실행이 되지 않는다. 그리고 자바스크립트에서 좀 더 안정적으로 작업을 하기 위해서는 이 에러를 다루는 방법에 대하여 알고있어야한다.
에러 객체 란 에러가 나오게 되면 그 에러에 관한 정보를 가지고 자동으로 생성되는 객체이다. 이 에러객체에는 에러의 이름과 그에대한 메세지를 가지고있으며 그에 대한 프로퍼티는 name 과 message이다. 이 에러객체는 임의로 생성할 수 있는데 아래와 같은데
const error = new TypeError('타입 에러가 발생하였습니다');
console.log(error.name); // -> TypeError
console.log(error.message); // -> '타입 에러가 발생하였습니다'
이것은 에러객체를 만들었을 뿐 에러를 발생시킨것은 아니다. 에러를 발생시키는것은
const error = new TypeError('타입 에러가 발생하였습니다');
throw error;
console.log(error.name); // -> 에러가 발생되어 실행되지 않음
console.log(error.message); // -> //
이렇게 ‘throw’키워드와 함께 에러를 호출하는것이다.
try catch
try catch문은 에러를 다룰때 사용할 수 있는데 기본형태는 다음과 같다.
try {
// 코드
} catch (error) {
// error가 발생했을 때 실행시킬 코드
}
try안의 코드가 실행되다가 에러가 발생되면 코드실행이 멈추는것이 아닌 catch문 안의 코드가 실행되는 원리이다. try catch문에는 한가지의 코드블럭을 더 가질 수 있는데 finally 문이다.
try {
// 코드
} catch (error) {
// error가 발생했을 때 실행시킬 코드
} finally {
// 항상 실행할 코드
}
이 finally문은 에러가 발생되지 않는다면 try문 다음에 실행되고, 에러가 발생한다면 catch문 다음에 실행된다. 또한 finally문에서 에러가 발생할 것을 생각한다면 finally문 다음 다시 catch문을 작성하면 된다.