overcurried

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

August 20, 2019

/

🍛

자바스크립트 커뮤니티에 널리 퍼진 작은 오해가 하나 있습니다. 바로 { 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

읽을거리


Jaewon Seo

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