ES6
[JavaScript] Spread와 Rest의 차이
ES6에서 도입된 Spread와 Rest 문법은 똑같이 생겼다. 다만 쓰이는 상황에 따라서 둘을 구분하기 때문에 확실하게 정리해보고자 한다. 1. Spread (전개 구문) Spread는 배열, 문자열 등의 Iterable 한 요소들을 개별 요소로 분리할 수 있다. 주로 객체나 배열의 연결, 복사 등의 용도로 유용하게 쓰인다. (참고로 객체는 Iterable이 아니지만 ES9부터 Spread 사용이 가능해졌다.) 1) 배열 결합 기존엔 두 배열을 합치는 데에 concat()를 이용했었다. 하지만 ES6에선 Spread 연산자를 이용하여 좀 더 쉬게 배열을 합칠 수 있다. // ES5 - concat() var arr1 = [1, 2, 3]; var arr2 = [4, 5, 6]; var arr = arr..
[JavaScript] var, let, const 차이
기존의 문법인 var와 ES6에서 새로 추가된 let, const을 비교하고자 한다. 추가로 호이스팅과 그로 인한 TDZ 현상에 대해서도 알아보겠다. var ES6 이전의 변수 선언 방식이다. 유연한 방식으로 인해 발생하는 문제가 많아 최대한 사용하지 않는 것이 좋다. 1. 함수 레벨 스코프 if문 안의 foo와 if문 밖의 foo는 같은 스코프로 취급하여 동일한 변수가 된다. var foo='hello'; if(true) { var foo = 'hello if'; } console.log(foo); // hello if 2. 중복 선언 가능 같은 변수를 여러 번 선언해도 오류가 나지 않는다. var foo='hello1'; var foo='hello2'; console.log(foo); // hello..
[JavaScript] 구조 분해 할당 (Destructing)
Destructuring (구조 분해 할당) JavaScript로 개발을 하다 보면 함수에 객체나 배열을 전달하는 경우가 생긴다. 또 모든 데이터가 아닌 일부만 필요한 경우도 자주 생긴다. 이럴 때 Destructing(구조 분해 할당)을 통해 객체나 배열을 변수로 쉽게 분해할 수 있다. 1. Array Destructuring (배열 구조 분해 할당) 1) 배열은 인덱스 위치를 기준으로 할당된다. const arr = [1, 2, 3]; const [one, two, three] = arr; console.log(one, two, three); // 1 2 3 [x, y] = [1]; console.log(x, y); // 1 undefined [x, y] = [1, 2, 3]; console.log(..
[JavaScript] axios와 fetch 차이
axios와 fetch 모두 JavaScript의 비동기 통신을 위한 라이브러리다. 두 라이브러리는 어떤 차이가 있을까? 이를 비교하기 위해 우선 Ajax가 무엇인지부터 알아보자. Ajax (Asynchronous JavaScript And XML) Javascript를 사용한 비동기 통신을 의미한다. 클라이언트와 서버 간에 XMLHttpRequest(XHR)를 활용해 소통한다. Asynchronous Asynchronous(비동기)는 요청을 보낸 후 응답을 기다리지 않고 다음 동작이 이루어지는 방식이다. XMLHttpRequest (XHR) XMLHttpRequest(XHR) 객체는 서버와 상호작용하기 위하여 사용된다. 이를 통해 전체 페이지의 새로고침 없이도 URL로부터 일부의 데이터를 받아올 수 있..
[JavaScript / ES6] 화살표 함수 (Arrow function)
Arrow function (화살표 함수) 화살표 함수는 function 키워드 대신 화살표 =>를 사용하여 보다 간략한 방법으로 함수를 선언하는 방법이다. 문법 기본 문법은 다음과 같다. // function let func = function(arg1, arg2, ...argN) { return expression; }; // arrow function let func = (arg1, arg2, ...argN) => expression 인수가 하나밖에 없다면 인수의 괄호는 생략할 수 있다. // function let double = function(n) { return n * 2 } // arrow function let double = n => n * 2; 인수가 없을 땐 빈 괄호를 사용한다. 다..
[JavaScript] 템플릿 리터럴 (Template literals)
Template literals (템플릿 리터럴) 템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴이다. 이전 버전의 ES2015 명세서에는 "template strings" (템플릿 문자열)라고 불렸다. 익숙해지면 굉장히 편리한 문법이다! 핵심 기능 여러 줄 표현 문자열에 변수, 표현식 삽입 사용 방법 이중 따옴표"", 작은 따옴표'' 대신 백틱(backtick)``을 이용한다. 물결(~)과 같은 키 버튼이다. 변수나 표현식은 $와 중괄호를 통해 표기한다. - ${var}, ${a + b} 여러 줄 표현 normal strings console.log('string text line 1\n' + 'string text line 2'); [ES6] template literals console.lo..