자바스크립트 중괄호 괄호의 기능

참고자료

이글은 제로초님의 유튜브영상을 보고 정리한 글입니다.

중괄호{ }의 기능

다음 코드를 보겠습니다. 어떤 숫자가 콘솔에 찍히게 될까요?

let b = "5";
{
  let b = "3";
}
console.log(b);

답은 5 입니다.

간단한 스코프(Scope) 개념인데요. { } 중괄호안에서 선언된 b는 중괄호 스코프(Scope)안에서 존재하기 때문입니다.

 

여기서 배운 것은 if, for, function, while 이 가지는 scope 뿐만아니라, 그냥 { } 중괄호만 있어도 스코프를 가질 수 있다라는 것입니다.

if(){ }
for(){ }
function() { }
while() { }
{ }

 

괄호( ) 의 기능

여러분은 함수를 즉시 실행시키고 싶으실때는 어떻게 하시나요? 

이미 질문속에 답이 있었네요. 즉시실행함수(IIFE)를 사용할 수 있습니다.

 

그렇다면 즉시실행함수는 어떻게 사용해야할까요?

이렇게 하면 될 것 같은데.. 되지 않습니다.

function a(){}()

 

바로 괄호를 한번더 감싸주어야하는데요.

이렇게 말이죠. 저희가 알고있는 전형적인 IIFE의 형태입니다.

(function a() {})();

 

Arrow Function으로 표현을 하면 다음의 코드가 됩니다.

(() => {})();

 

Arrow Function 의 기능중에서 좀 더 짧은 코드로 return을 할 수 있다가 있을텐데요.

다음과 같습니다.

function hi() {
  return "hello";
}

const ans = hi();
console.log(ans); //hello

const hi = () => "hello";

const ans = hi();
console.log(ans); //hello

중괄호안에서는 return 을 해주어야하는데 Arrow Function에서는 필요가 없습니다.

 

만약에 객체를 리턴하고 싶다면 어떻게 해야할까요?

다음과 같이 리턴을 해줄 수 있습니다.

function ob(a, b) {
  return {x: a, y: b};
}

const c = ob(1, 2);
console.log(c); // {x: 1, y: 2}

그렇다면 Arrow Function을 사용하고 싶을때는 어떨까요?

엥? 이렇게 하면 될 것 같았는데 안됩니다.

const ob = (a,b) => {x:a,y:b}

그럴때 숨겨진 괄호의 기능을 사용할 수 있습니다.

리턴되는 객체를 감싸주면 정상적으로 동작합니다.

const ob = (a, b) => ({x: a, y: b});

const c = ob(1, 2);
console.log(c); // {x: 1, y: 2}

 

추가로 소괄호의 기능은 더 있습니다.

숫자를 바로 toString으로 바꾸고 싶을때는 저렇게 사용하면 됩니다.

1.toString() // X
(1).toString() // O 
               // console : '1'