overcurried

연산자인 것과 연산자가 아닌 것

August 20, 2019

/

🍛

Update from 2020: 설명에 부족한 부분이 있어 현재 수정 중인 글입니다. 읽으실 때 이 점 양해 부탁드리겠습니다.

여기, 자바스크립트 커뮤니티에 널리 퍼진 작은 오해가 하나 있습니다. 바로 { a: 2, ...{ b: 1 } }과 같은 표현식에서 쓰이는 ...에 대한 오해지요. 많은 분들이 이것을 전개 연산자라고 알고 계시지만, 사실은 아닙니다.

오늘은 ...이 왜 연산자가 아니며, 정체는 무엇인지 저와 함께 알아보도록 하겠습니다.

무엇이 연산자인가?

연산자란 무엇일까요? 언어마다 연산자가 구체적으로 무엇인지에 대한 정의는 차이가 있습니다만, 자바스크립트에서의 연산자는 피연산자를 연산한 값을 결과로 내는 일을 하는 것 입니다. 또한, 여기서 값이라 함은 자바스크립트의 유효한 값입니다. 예컨데, 1, true, "abc"는 자바스크립트의 값이지만 var, function은 자바스크립트의 값이 아니지요.

자, 그럼 무엇이 연산자인지 예시를 통해 알아보도록 하겠습니다.

  • +는 연산자입니다. 피연산자 둘을 더한 값을 결과로 내기 때문입니다.
  • ===또한 연산자입니다. 피연산자 둘을 비교한 결과를 결과로 내기 때문입니다.

어떠신가요? 이제 연산자가 무엇인지 확실하게 아시겠나요?

무엇이 연산자가 아닌가?

방금 전에 연산자의 정의와, 연산자인 것들을 알아보았으니 이번에는 연산자가 아닌 것들 또한 보여드리도록 하겠습니다.

먼저, 함수 표현식에서 쓰이는 function, (), {} 들은 연산자가 아닙니다. 어떤 값을 받지도, 결과로 내지도 않기 때문이죠. 또한 변수 선언에서 쓰이는 let, = 들 또한 연산자가 아닙니다. 이들도 마찬가지로 어떤 값을 받지도, 결과로 내지도 않기 때문입니다.

다시 ... 으로

자, 이제 연산자가 무엇인지 알아보았으니 왜 ...가 연산자가 아닌지 알아보아야겠지요? 하지만 그 전에 이야기하고 넘어가야 할 게 있습니다. 바로 자바스크립트에서 ...가 사용되는 곳에 대한 이야기인데요. ...는 정말 많은 곳에서 등장합니다. 익숙한 배열 표현식과 객체 표현식 외에도 함수 선언/표현식, 함수 호출부, 비구조화 할당/바인딩에서도 등장하지요. 많기는 많지만 오해를 확실하게 풀려면 이 모든 케이스를 하나하나 확실하게 증명해야 할 것 같으니, 각 케이스에서 사용되는 ...가 연산자가 아님을 보이고, 정확한 명칭을 알려드리는 것으로 글을 마무리하도록 하겠습니다.

예시 연산자가 아닌 이유 올바른 명칭
[1, ...[2, 3, 4]] 값을 결과로 내지 않기 때문에 연산자가 아닙니다. spread elements
{ a: 1, ...{ b: 1 } } 값을 결과로 내지 않기 때문에 연산자가 아닙니다. spread properties
function abc(...args) {} 피연산자를 받지도, 값을 결과로 내지도 않기 때문에 연산자가 아닙니다. rest parameter
abc(...[1, 2, 3]) 값을 결과로 내지 않기 때문에 연산자가 아닙니다. spread argument
[x, ...xs] = [1, 2, 3] 피연산자를 받지도, 값을 결과로 내지도 않기 때문에 연산자가 아닙니다. rest elements
{ x, ...xs } = { x: 1, b: 2, c: 3 } 피연산자를 받지도, 값을 결과로 내지도 않기 때문에 연산자가 아닙니다. rest properties

읽을거리


Personal blog of Jaewon Seo.
I believe that knowledge becomes valuable when we share it with others.