Elice) React

 

최신 JS 문법 알아보기

 

React를 사용하기에 앞서 최신으로 사용하는 유용한 JS 문법을 정리 하였다.

 

---

 

 

1. var에서 let , const로

그동안의 변수 선언에서는 var를 많이 사용해 왔으나, 이제는 var를 사용하지 않고 let, const를 사용한다.

 

const 는 한 번 값을 선언하면 값을 바꿀 수 없으며, 같은 스코프(중괄호) 내에서 중복된 이름을 가질 수 없다.

let은 선언과 변경이 자유롭다.

 

만약 error가 생길 경우 const는 값이 다르면 error를 뱉지만 let은 error를 뱉지 않는다.

 

따라서 특수한 경우가 아니면 이제는 변수 선언에서 const를 사용하는 것이 좋다.

 

 

 

---

 

 

2. Array 메소드

 

1) forEach

 

Array.forEach 는 배열의 요소를 이용해 순차적으로 함수를 실행하는 메서드로 따로 함수 내에서 따로 return을 할 필요가 없다.

 

// ex

const b = [0, 1, 2, 3, 4, 5];
b.forEach(function(item) {
	console.log(item);
    });

 

 

2) map

 

Array.map은 배열의 요소를 이용해 순차적으로 함수를 실행하여 새로운 배열을 반환하는 메서드 이다.

Array.map에 실행할 콜백 함수는 현재 값, 인덱스, map을 호출한 배열을 매개변수로 받는다.
함수내에서 반드시 새로운 값을 return 해주어야 한다.

 

// ex

const d = [0, 1, 2, 3, 4, 5];
const newD = d.map(function(item) {
	return item * 2;
    });

 

 

3) filter

 

Array.filter는 배열의 요소를 이용해 순차적으로 함수를 실행하여 조건을 통과하는 요소를 모아 새로운 배열로 반환하는 메서드 이다.

Array.filter에 실행할 콜백 함수는 현재 값, 인덱스, map을 호출한 배열을 매개변수로 받는다.

함수 내에서 flase를 return할 경우 새로운 배열에서 제외되고 true를 return할 경우 새로운 배열에 추가된다.

 

// ex

const d = [0, 1, 2, 3, 4, 5];
const newD = d.filter(function (item) {
	return item > 3;
    });

 

 

---

 

 

 

3. Destructuring assignment

 

객체나 배열을 해체하여 개별 변수에 담을 수 있게 하는 표현식

 

// ex

const b = { i : 1, j : 2, k : 3};
const { i, j, k } = b;

 

또한 Array에서도 사용이 가능하다.

 

// ex

const d = [1, 2, 3];
const [d0, d1, d2] = d

 

 

 

---

 

 

4. Shorthad property names

 

새로운 객체 선언을 간편하게 할 수 있다. 새로 선언하는 object에 key값과 동일한 변수명을 가진 변수를 할당할 경우 value 값을 생략해서 적을 수 있다.

 

// ex

const username = '김레이서';
const age = 21;
const school = '엘리스';

const person = { username, age, school };

 

 

 

---

 

 

 

5. Spread Syntax

 

 

Spread Syntax (전개 구문)은 배열이나 객체를 전개할 때 사용한다.

 

// Syntax는 error에서도 자주 나오니 단어의 뜻을 기억하자 //

 

기본적으로 배열이나 객체에 ...을 붙여 사용한다.

 

// ex

const numbers = [1, 2, 3];

function getSum(...n) {
	let sum = 0;
    n.forEach((item) => {
    	sum += item;
        });
        return sum;
     }
     
getSum(...numbers);

const netNumbers = [0, ...numbers, 4, 5, 6];

 

// ex

const user = { name : '김아무개', age : 23, school : '초등학교' };

const newUser = {...user, grade : 3, age : 24 }ㅣ;

! 두 객체를 합성할 때 겹치는 key는 나중에 오는 값이 들어간다.