유용한 자바스크립트 문법을 배워보자

이번 글에선 자바스크립트로 개발을하면서 유용하게 사용한 문법에 대해 알아보겠습니다.

 

여기서 유용하다는 것은 생산성증가, 안정성증가, 가독성증가를 기준입니다.

 

1. 함수 표현식

자바스크립트는 함수를 선언하는 방식과 표현하는 방식으로 함수를 사용할 수 있습니다.

함수 표현식

함수 선언식

함수 선언식과 함수표현식의 결과에 대한 차이가 보이시나요?

네, 전혀 보이지 않을 것입니다. 출력한 값도 같고 실행시간도 비슷하기 때문이죠.

하지만 우리는 코드의 안전성을 위해 함수 표현식을 사용해야합니다.

 

함수 표현식

함수 선언식

함수의 호출 위치에 따라 그 차이는 명백히 드러납니다.

함수 표현식은 호이스팅이 되지 않고, 함수 선언식은 호이스팅이 가능합니다.

 

호이스팅이란 : 선언된 변수 또는 함수를 실행가능 범위의 최상단으로 끌어올리는 것

 

호이스팅은 개발 중 경계해야하는 부분 중 하나입니다. 선언하기도 전에 사용하면 가독성측면에서 불리할 뿐만 아니라 코드 안전성에도 불리하기 때문입니다.

 

 

2. arrow function

arrow function은 정말 유용하게 사용되는 함수 선언 방식입니다.

코드의 가독성을 높여줄 뿐만 아니라 this가 가리키는 값을 정해주기 때문에 유용하게 사용됩니다.

this에 대해 설명하면 글이 너무 길어지기 때문에 다음 글에서 설명드리겠습니다.

 

 

 

 

 

아래 사진을 보면 알 수 있듯이 arrow function은 arguments를 받아오지 못하지만 일반 함수는 arguments를 가져오는 것을 볼 수 있습니다.

 

 

 

 

arrow functions에서 arguments를 받아오기 위해 다음과 같이 작성하면 좋을 것 같습니다.

 

 

3. const

자바스크립트는 변수 선언 방식으로 var,let,const를 지원합니다.

하지만 전 개발할 때 const만 사용하며 최대한 var,let을 사용하지 않습니다.

 

이유는 스코프와 호이스팅이라는 특징 때문인데요.

아래 3장의 사진은 스코프를 설명하기 정말 좋은 예시입니다.

차이가 보이시나요? var는 if안에서 선언한 name이 if밖의 name에 영향을 끼치는 것을 불 수 있습니다.

스코프는 if와 같은 블럭 내의 범위를 의미하는데요. let과 const는 블럭 바깥의 영역에 영향을 미치지 않지만 var는 이런 영향을 허용하고 있습니다.

 

 

아래 3개의 사진은 호이스팅에 대한 예시입니다.

var는 undefined라는 값을 출력하지만 let과 const는 오류를 보내줍니다.

 

let과 const는 호이스팅이 가능하지 않다는 것을 의미합니다.

위와 같이 되는 이유는 자바스크립트 엔진을 이해하면 설명이 편한데요. 다음 글에서 자바스크립트 엔진을 설명하며 스코프와 호이스팅에 대해 이해해보겠습니다.

 

const는 선언된 변수에 다른 값을 할당할 수 없습니다. 하지만 let은 선언된 변수에 다른 값을 할당할 수 있습니다.

뿐만 아니라 let은 선언과 동시에 값을 초기화하지 않아도 됩니다.

 

이런 let과 const의 차이는 변수의 신뢰성에 영향을 줍니다. 어디서든 변수가 바뀔 수 있다면(let) 변수의 값을 이해하지 못하고 사용할 확률이 높습니다. 기나긴 코드에서 어디서 변수가 바뀐지 찾는 것은 너무 힘들고 비록 자신이 적은 코드여도 기억하지 못할확률이 너무 높습니다.

 

 

4. Rest,Spread

3번 에서 우리는 const의 중요성을 확인했습니다. 하지만 처음 const만 사용하려고 하면 막히는 부분이 많을 것입니다. 이런 부분을 어느정도 해결해줄 수 있는 부분이 Rest와 ,Spread문법입니다.

 

rest는 일반적으로 객체 내부에 있는 값들을 const로 한번에 저장할 때 사용합니다.

spread는 확장의 개념과 비슷하게 사용합니다. js2라는 객체에 js1을 포함하고 address를 추가하는 것처럼 확장하는 용도로 자주 사용하곤합니다.

 

제가 사용하는 방법 이외에서 응용할 수 있는 방법은 많이 있습니다.

꼭 저 방법으로만 사용하는 것이 아니며 유연하게 사용하시면 도움이 많이 될 것입니다.