자바스크립트의 간단하면서도 트렌디한 문법 모아보기

 

 

 

안녕하세요.

이번 포스팅에서는 자바스크립트를 보다 더 깔끔하게 사용할 수 있게 도와주는 문법들에 대하여 포스팅합니다. 

저도 자바스크립트를 사용하면서 문자열, 배열, 객체에 대하여 처리할 때 보다 더 간결하고, 트렌디하게 작성할 수 있도록 하는 문법에 대해 자주 포스팅해왔고, 시간이 지나 결과적으로 가장 자주 사용하게 되는 문법들에 대하여 정리해보았습니다.

 

---

 

 

🧐 다른 코드와 비교해보자

 

템플릿 리터럴

템플릿 리터럴은 내장된 표현식을 허용하여 문자열 보간과 여러 줄로 이루어진 문자열을 동시에 사용할 수 있게 도와주는 문법입니다. 파이썬의 format과 비슷한 개념으로, 함수의 매개변수에도 사용할 수 있습니다. 

 

$('.container').append(
    '<div> ' + car + '<b>' + name + '</b> </div>'
)

다음과 같은 제이쿼리 코드가 있다고 생각해봅시다. 문자열을 이어붙이기 위해 중간중간 문자열을 끊고 +로 이어주어야 하는 귀찮음이 있습니다. 템플릿 리터럴을 사용하면 다음과 같이 변경할 수 있습니다.

$('.container').append(
    `<div> ${car} <b>${name}</b> </div>`
)

 

특히 HTML에서 onclick 이벤트를 붙이거나 하는 등 인라인으로 작성할 때에 템플릿 리터럴은 더 깔끔하게 코드를 작성할 수 있도록 도와주기도 합니다.

 

 

Spread(얕은 복사)

Spread(전개) 문법은 객체나 배열에 새 값을 추가하거나 특정 값을 변경하고자 할 때 자주 사용됩니다. 자바스크립트에서 얉은 복사에 해당하며 몇 줄에 늘어써야 하는 코드를 간단하게 변환할 수 있습니다.

 

let list = ['하나', '둘'];
list.push('셋');
list.push('넷');
list.push('다섯');

 

이렇게 배열에 새 값을 추가할 때 push 같은 메소드를 사용하여 직접 값을 채워넣을수도 있겠지만, Spread를 이용하여 다음과 같이 얕게 복사한 배열로 채워넣을 수도 있습니다.

 

let list = ['하나', '둘', '셋'];
list = [...list, '넷', '다섯'];

console.log(list);
// ['하나', '둘', '셋', '넷', '다섯']

 

이렇게 얕은 복사를 사용하는 방법은 불변성을 유지하여 Immutable하게 코드를 작성해야 하는 리액트에서 배열을 관리할 때 필수적으로 사용해야 하는 문법이기도 합니다. 훨씬 보기도 편해졌죠? 이는 배열 뿐만 아니라 객체에서도 동일하게 사용 가능합니다.

 

const data = {
    name: 'june',
    age: 24,
    love: 'js'
}

data = {
    ...data,
    age: 25,
    career: 'junior'
}

// name: 'june', age: 25, love: 'js', career: 'junior'

 

 

비구조화 할당

이 문법 역시 배열, 객체의 값을 받아와서 사용할 때 자주 사용하게 됩니다. 위에서 사용한 객체를 그대로 가져와보겠습니다.

 

const data = {
    name: 'june',
    age: 25,
    love: 'js'
}

 

이 배열의 값을 가져와 사용할 때, 비구조화 할당을 이용하지 않는다면 다음과 같이 사용하게 됩니다.

const data = {
    name: 'june',
    age: 25,
    love: 'js'
}

const introduce = data => {
    return `안녕하세요, ${data.love}를 좋아하는 ${data.age}살 ${data.name} 입니다`;
}

 

템플릿 리터럴을 사용하여 간소화했지만 data. 부분이 반복되고 있습니다. 보통은 계속하여 반복되는 코드는 지워서 없애는 게 좋겠죠?

비구조화 할당을 이용하면 다음과 같이 바꿔 사용할 수 있습니다.

 

const data = {
    name: 'june',
    age: 25,
    love: 'js'
}

const introduce = data => {
    const { name, age, love } = data;
    return `안녕하세요, ${love}를 좋아하는 ${age}살 ${name} 입니다`;
}

비구조화 할당을 하여 넘겨주거나, 매개변수로 받아와 비구조화 할당을 하는 방법이 있지만 상황에 맞게 사용하면 되겠습니다. 이 방식은 JS뿐 아니라 타입과 형태를 명시하여 사용하는 TS에서도 유용하게 사용됩니다. 대형 프로젝트일수록 헷갈리는 상황이 많이 발생하기 때문에, 이렇게 작성하여 넘기는 편이 알아보기 쉽겠죠?

 

---

 

이상으로 JS에서 코드를 보다 더 트렌디하고 깔끔하게 처리하는 방법에 대하여 알아보았습니다. ES6으로 넘어오면서 이전보다 훨씬 코드를 깔끔하게 작성할 수 있게 되었으나, 그중에서도 특히나 (개인적으로) 제가 많이 사용하는 문법들이었습니다. JS를 공부하다보면 필수적으로 알아야 하게끔 되는 코드이니, 많은 분께 참고가 되었으면 좋겠습니다.