자바스크립트는 웹 프론트엔드를 개발할 때 사용되는 프로그래밍 언어입니다. 웹 브라우저만 있으면 별도의 컴파일러를 설치할 필요가 없기 때문에 누구나 쉽게 접근할 수 있는 프로그래밍 언어라는 점에서 쉬운 언어로 알려져 있지만 실제로 그렇지는 않습니다. 여타 프로그래밍 언어와 동일하게 일정 수준 이상의 공부가 선행되어야 자바스크립트로 프로그래밍을 할 수 있습니다. 이 글에서는 자바스크립트를 혼자 공부하면서 알게 되는 유용한 내용들을 예제 소스코드로 쉽게 설명하려고 합니다. 첫 번째 글은 ES6에 새롭게 추가된 몇 가지 문법에 관한 글입니다.
자바스크립트는 ECMAScript 표준에 따라 웹 브라우저에 내장됩니다. 가장 최근에 발표된 표준안은 ECMAScript 2020 (ES11)입니다. 그러나 가장 널리 사용되고 있으며 높은 호환성을 보여주고 있는 표준은 ECMAScript 2015 (ES6)입니다. 따라서 이 글에서도 ES6에 새롭게 추가된 문법 사항들에 대해 알아보도록 하겠습니다.
1. ES6: 전개 연산자 (비구조화 할당)
전개 연산자는 ES6에 추가된 새로운 연산자로 확실하게 알아두면 유용하게 사용될 수 있는 연산자입니다. 전문적인 용어로 비구조화 할당이라고 부릅니다. 배열이나 객체 자료구조에 데이터를 대입하거나 해당 자료구조에서 데이터를 가져올 때 사용될 수 있습니다. ES6 이전 문법에서는 전개 연산자를 사용할 수 없었기 때문에 어떠한 자료구조에서 일부 요소만 가져오거나 대입할 때 인덱스를 사용해야 했습니다. 그러나 표준안에 전개 연산자가 새롭게 추가됨으로써 이러한 불편함을 덜어내게 되었습니다.
전개 연산자 사용방법
전개 연산자는 배열이나 객체, 변수명 앞에 마침표 세 개(…)를 추가해 사용합니다. 아래 소스코드 예시를 보면 쉽게 이해할 수 있을 것입니다. 먼저 배열 표현식에서 사용하는 방법입니다.
const array1 = ['one' ,'two']; const array2 = ['three', 'four']; const combined1 = [array1[0], array1[1], array2[0], array2[1]]; // combined1 = ['one', 'two', 'three', 'four']; const combined2 = array1.concat(array2); // combined2 = ['one', 'two', 'three', 'four']; const combined3 = [].concat(array1, array2); // combined3 = ['one', 'two', 'three', 'four']; const combined4 = [...array1, ...array2]; // combined4 = ['one', 'two', 'three', 'four']; const [first, ...others] = combined4; // first = 'one'; others = ['two', 'three', 'four'];
배열 표현식에서 전개 연산자는 위 예제에서와 같이 사용할 수 있습니다. 전개 연산자를 사용하면 여러 개의 배열을 간편하게 합칠 수 있고, 필요한 부분만을 추출할 수 있습니다. 이와 더불어 전개 연산자는 객체 표현식에서도 사용될 수 있습니다. 특히 전개 연산자는 객체 표현식에서 보다 유용하게 사용됩니다. 아래 예시를 통해 알아보겠습니다.
const object1 = { one: 1, two: 2, three: 3 };
const object2 = { four: 4, five: 5, six: 6 };
const combined1 = { ...object1, ...object2 };
// combined1 = { one: 1, two: 2, three: 3, four: 4, five: 5, six: 6 }
const { two, ...others } = combined1;
// two = 2, others = { one: 1, three: 3, four: 4, five: 5, six: 6 };
const object3 = { five: 10 };
const combined2 = { ...combined1, ...object3 };
// combined2 = { one: 1, two: 2, three: 3, four: 4, five: 10, six: 6 };
객체 표현식에서는 위와 같이 전개 연산자를 사용할 수 있습니다. 특히 마지막에 사용된 방법은 리액트(React)에서 컴포넌트 상태(State)를 설정할 때 사용되는 방법으로 알아두면 리액트 구조를 쉽게 이해할 수 있을 것입니다. 지금까지 ES6에 추가된 전개 연산자에 대해 알아봤습니다. 전개 연산자는 기존의 방법보다 편리하게 객체와 배열 데이터를 조작할 수 있다는 점에서 반드시 알아두어야 하는 문법이라는 사실을 알아두시기 바랍니다.
2. ES6: 새로운 변수정의 방법 (가변변수와 불변변수)
ES6 표준안이 발표된 이후 자바스크립트에서는 새로운 변수정의 방법을 사용합니다. 물론 기존에 사용하던 방법이 완전히 사라진 것은 아니지만 유지보수 효율성을 위해 지금은 새로운 변수정의 방법이 권장되고 있습니다. 아래의 예시를 통해 쉽게 알아보도록 하겠습니다.
var string1 = '기존 변수정의 방법입니다'; let string2 = '새롭게 추가된 변수정의 방법입니다'; const string3 = '새롭게 추가된 변수정의 방법입니다.'; string1 = '기존 문자열을 수정합니다.'; // string1 = '기존 문자열을 수정합니다.'; stirng2 = '기존 문자열을 수정합니다.'; // string2 = '기존 문자열을 수정합니다.'; string3 = '기존 문자열을 수정합니다.'; // Uncaught TypeError: Assignment to constant variable.
기존 var 키워드를 통해 변수를 정의하면 이후에 값을 수정하는데 아무런 제약이 없었습니다. 그런데 ES6에서 새롭게 추가된 let 키워드와 const 키워드는 값을 다시 할당할 수 있는지의 여부에 따라 그 사용법이 달라집니다. let 키워드로 정의된 변수는 새로운 값이 할당될 수 있지만, const 키워드로 정의된 변수에는 새로운 값이 할당될 수 없습니다. 그래서 마지막 부분과 같은 오류가 출력되는 것입니다.
그런데 여기에서 주의해야 하는 점은 const 키워드로 정의된 변수에 새로운 값을 할당하는 것만 제한된다는 점입니다. 따라서 배열이나 객체의 경우에는 내부 값에 한하여 변경하는 것이 가능한데, 이는 배열이나 객체 변수에는 주소값만 저장되기 때문에 가능한 것입니다.
const array1 = ['one', 'two', 'three'];
const object1 = { one: 1, two: 2, three: 3 };
const object2 = { two: 20 };
array1[0] = 'new';
// array1 = ['new', 'two', 'three'] --> const 키워드로 변수를 정의하였음에도 배열 내 값은 변경 가능합니다.
Object.assign(object1, object2);
// object1 = { one: 1, two: 20, three: 3 } --> const 키워드로 변수를 정의하였음에도 객체 내 값은 변경 가능합니다.
지금까지 자바스크립트 ES6 표준에서 자주 사용되는 두 개 문법에 대해 알아봤습니다. 이 글에서는 전개 연산자와 가변변수와 불변변수의 개념에 대해 알아봤는데, 이외에도 ES6에는 새롭게 추가된 문법이나 개념들이 많습니다. 앞으로 이와 관련된 글을 더 작성할 수 있도록 하겠습니다. 특히 ES6 화살표 함수는 가장 많이 사용되고 그만큼 유용한 문법 요소입니다. 그러므로 다음 글에서는 화살표 함수에 관한 글을 작성해보겠습니다.
