React - 리액트에 필요한 자바스크립트 ES6 문법 (변수 let, const)

React - 리액트에 필요한 자바스크립트 ES6  문법 (변수 let, const)

---

 출처 : 

http://www.yes24.com/Product/Goods/87631428

Do it! 리액트 프로그래밍 정석 - YES24

 

 

이전포스팅

React 개발 환경 세팅 (NVM node.js, yarn, 비주얼 스튜디오 코드)

React 개발 환경 세팅 (NVM node.js, yarn, 비주얼 스튜디오 코드)

 

자바스크립트 변수

기존 자바스크립트에서는 [var] 키워드를 사용하여 변수 선언을 했습니다. [var] 키워드 사용 시 변수 호이스팅 문제가 발생합니다.

변수 호이스팅 문제

호이스팅(hoisting)은 [끌어올린다] 라는 사전적 의미를 가지고 있습니다. 변수가 스코프의 최상위로 끌어올려지게 되므로 아래 예제와 같이 참조 에러가 발생하지 않고, [undefined] 를 리턴합니다.

 

var fruit;          // 선언된 변수가 최상위로 끌어올려졌습니다.
console.log(fruit); // undefined
fruit = "사과";     // 값은 올라가지 못했으므로 2번째 줄의 fruit는 undefined가 뜹니다.
console.log(fruit); // result => 사과

 

이러한 점을 보완하고자 ES6에서는 가변 변수인 [let] 키워드와 불변 변수인 [const] 키워드를 도입했습니다.

ES6 문법인 let 가변 변수를 사용하게 되면, 아래 예제와 같이 [참조 에러]가 발생합니다.

 

console.log(fruit); // Reference Error
let fruit = "사과"

 

ES6 문법::가변 변수 let

ES6에서 가변 변수는 [let] 키워드를 사용합니다. 아래 예제 처럼 [let]으로 선언된 변수는 읽고 수정할 수 있으며, 수정해도 되는 변수인지 혹은 수정할 수 있는 변수인지 코드상에서 바로 알 수 있습니다.

let num = 1;
num = num * 2;
let str = 'string';
str = 'other string';
let arr = [];
arr = [1, 2, 3];
let obj = {};
obj = { name: 'new object' };

 

ES6 문법::불변 변수 const

ES6에서 불변 변수는 [const] 키워드를 사용합니다. [const]로 선언한 변수는 읽기만 가능합니다.

[const]로 선언한 변수는 값을 다시 할당할 수 없지만, 값을 변경할 수는 있습니다. 이런 것을 [무결성 제약 조건에 위배되었다] 라고 합니다. [무결성 제약 조건에 위배되었다] 라는 것은 다시 알아보기로 하고, const 키워드를 사용한 변수 선언 시 값 변경에 대한 오류 발생을 알아보겠습니다. 아래 예제를 보시면, const 불변 변수를 사용여 변수 선언 후 값 변경 시 자료형 오류가 발생됩니다.

 

const num = 1;
num = 3;                      // 자료형 오류 발생
const str = 'string';
str = 'new string';           // 자료형 오류 발생
const arr = [];
arr = [1, 2, 3];              // 자료형 오류 발생
const obj = {};
obj = { name: 'new object' }; // 자료형 오류 발생

 

아래 예제 처럼 자바스크립트 내장 함수인 push, splice, pop 등을 사용하면 값을 변경할 수 있습니다.

 

const arr2 = [];
arr2.push(1); // arr2 = [1]
arr2.splice(0, 0, 0); // arr2 = [0, 1]
arr2.pop(); // arr2 = [1]

const obj2 = {};
obj2['name'] = 'my name'; // obj2 = { name: 'my name' }
Object.assign(obj2, { name: 'new name' }); // obj2 = { name: 'new name' }
delete obj2.name; //obj2 = {}

 

다시 [무결성 제약 조건에 위배되었다]에 대한 내용을 계속해보면, 무결성을 유지하면서 const로 선언된 불변 변수 값을 변경해야하는 경우가 종종 발생하게 됩니다. 그럴 땐, 수정할 불변 변수를 새로 선언 후 새 값을 할당하는 방법을 이용하면, 값을 수정하면서 무결성 제약 조건까지 지킬 수 있습니다. 아래 예제를 참고해 주세요!

 

const num = 1;
const num2 = num1 * 2; //num2 = 2
const str1 = '문자';
const str2 = str1 + '추가'; // str2 = '문자추가'
const arr3 = [];
const arr4 = arr3.concat(1); // arr4 = [1]
const arr5 = [...arr4, 2, 3]; // arr5 = [1, 2, 3]
const arr6 = arr5.slice(0, 1); // arr6 = [1], arr5 = [1, 2, 3]
const [first, ...arr7] = arr5; // arr7 = [2, 3], first = 1
const obj3 = { name: 'my name', age: 22 };
const objVal = { name: 'new name', age: obj3.age };
const obj4 = { ...obj3, name: 'new name' }; //obj4 = { name: 'new name', age: 22 }
cosnt { name, ... obj5 } = obj4; // obj5 = { age: 22 }

 

가변 내장 함수	무결성 내장 함수
push(...items)	concat(...items)
splice(s, c, ...items)	slice(0, s) .concat(...items, slice(s+c))
pop()	slice(0, len - 1)
shift()	slice(1)

위 표를 참고하여, 배열에 새로운 값을 추가할 때는 push() 함수 대신에 concat() 함수를 사용하고,

삭제할 때는 pop(), shift() 함수 대신에 slice(), concat() 함수를 사용하면,

새값을 할당하는 것이 아닌, 기존의 값을 추출하여 새로운 불변 변수에 할당하는 것이므로 무결성 제약 조건을 지킬 수 있습니다.