프로젝트과정에서 JS가 중요한 걸 느꼈던 이유
일단 기본적으로 React는 JavaScript의 프레임워크이며 TypeScript는 JavaScript 기반으로 만들어진 프로그래밍 언어이기에 알고 있으면 어느 정도 도움이 될 것이라고만 생각하였다.
TypeScript나 React 등을 공부해보면서 JavaScript를 정확하게 알아두면 다른 프론트엔드 라이브러리나 프레임워크를 다루기에도 쉽다는 것을 느끼게 되었다. 기본적인 JavaScript 문법이나 메서드들을 이용할 수 있기에 JavaScript 기반을 잘 다져야 한다는 생각을 하게 되었다.
프로젝트는 TypeScript로 진행하였지만 문법이나 메서드 부분에서 ES5, ES6에서 개선된 화살표 함수, asnyc/await을 통한 Promise반환, 전개연산자, 기본 파라미터, Json파일 파싱 등의 문법들을 많이 사용하다보니 자연스레 ES5, ES6에 대해서 자세히 알아보고 싶었다.
ECMA Script 란?
넷스케이프의 넷스케이프 네비게이터에서 자바스크립트를 지원하기 시작했고 웹 페이지 동작 향상으로써 성공가도를 달리며 마이크로스프트가 이와 적당히 호환되는 J스크립트를 제작함으로써 표준화가 필요해짐으로 인해 ECMA Script가 채택되었다.
2009년 이전의 ECMA Script
- ISO/IEC 16262 국제 표준과 완전히 동일한 규격을 적용하기 위한 변경
- try/catch의 예외 처리, 강력한 정규 표현식 등을 추가
- 향상된 문자열 처리, 새로운 제어문, 엄격한 오류 정의, 수치형 출력의 포매팅 추가
ES5
ECMA Script 5판이며 2009년 부터 도입되었으며 지금까지의 JavaScript언어에 큰 기틀이 되었다고 해도 과언이 아닌 것 같다.
주요 추가 기능
- JSON 파일을 파싱할 수 있도록 하는 기능
- 배열 관련 메소드 (map, forEach, filter) 추가
- 객체 속성 접근자 추가
- 공백을 자동적으로 제거 해주는 문자열 포매팅 trim() 추가
- Object를 이용한 객체 메타 프로그래밍Json 파일의 경우 백엔드와의 api 통신을 할 경우 백엔드에서 주는 응답으로 Json 파일을 받아오는데 이를 파싱해주는 기능을 통해 프론트 코드에 알맞게 파싱을 해줌으로써 응답으로 받은 데이터를 더욱 쉽게 활용할 수 있게 되었다.
또한 배열 관련 메소드는 자바스크립트 CRUD작업을 할 때 많이 이용되는데 이러한 메소드도 이때 나온것이다.
객체 메타 프로그래밍은 객체에 대한 속성, 확장 등을 제어할 수 있는 역할을 한다고 한다. Object내의 메서드 를 많이 사용해보지 않아서 객체 메타 프로그래밍에 대해서는 나중에 추가적으로 공부해야 될 것 같다고 생각하였다.
ES6
ES6 는 지금도 사용되는 표준안이며 많은 많은 효율적인 기능들이 이 시기에 추가되었다.
주요 추가 기능
- 화살표 함수
- 클래스 문법 추가
- 구조 분해 할당
- 기본 매개변수
- 전개 연산자를 이용한 전개 구문
- let과 const, export, import를 이용한 모듈 추가
- Promise와 for...of 향상된 반복문 추가ES6에서 추가된 기능들은 중요한 부분이 많기에 코드로 이해를 하려고 하였다.
const addCount = (count = 10) => count += 1;
console.log(addCount());이 코드는 어떻게 될까?
보통 파라미터에 들어가는 인자값을 넣어서 코드를 작성한다. 하지만 기본 파라미터 기능이 추가 되면서 인자값이 없을 경우 에러를 반환하지 않고 기본 파라미터로 설정된 값을 파라미터로 정하면서 함수를 호출하게 된다.
여기서 또 함수는 function이라는 구문이 붙어야 하나 화살표 함수는 구문을 안붙이며 {} 중괄호를 생략하게 될 경우 바로 반환되는 편리함이 추가되었다. 덕분에 js 코드를 간략하게 짤 수 있게 된다.
const arrA = [1, 2, 3];
const arrB = [4, 5, 6];
/* 전개 연산자를 통한 새로운 배열 전개 */
const doubleArr = [[0, ...arrA], [...arrB, 7]];
console.log(doubleArr);
/* 구조 분해 할당을 통한 변수 할당 */
const [front, end] = doubleArr;
console.log(front);
console.log(end);코드와 같이 배열 A와 B가 있을 경우 전개 연산자를 통해 원본 배열의 내용과 추가한 내용들이 포함되게 되며 doubleArr 변수에는 [[0, 1, 2, 3], [4, 5, 6, 7]]인 배열이 담기게 된다. 전개 연산자는 원본배열을 수정하지 않고 원본배열을 참조하여 새로운 배열을 만들어낼 때 효과적으로 사용할 수 있다.
구조 분해 할당은 배열이나 객체에서 데이터를 추출하여 변수에 할당할 수 있는 간편한 방법을 의미하며 위 코드에서는 front, end 변수에 doubleArr 데이터를 두 부분으로 나누어 각 각 할당해주는 방식으로 구조 분해 할당을 사용하였다.
클래스 문법추가는 자바스크립트에서 객체 지향 설계를 할 수 있도록 하는 중요한 역할을 하였으며 Promise를 통해 비동기 작업을 더욱 쉽게 처리할 수 있도록 개선되었던 것이다.
정리를 하며 느끼게 된 점
정리를 하기전에는 이러한 문법이 있으니 사용해야지라는 생각으로 사용하였지만 사용을 하면서도 특히 화살표 함수의 경우, 왜 사용할까라는 의문이 들었었지만 이번 정리를 통해 왜 사용하는지 ECMA Script 표준안을 만든 사람이 왜 만들게 되었는지 이해하는데 큰 도움이 되었던 것 같다.
