[TIL] React 입문 - 리액트에서 자주 사용되는 ES6 문법(변수와 상수, JavaScript Scope, Object 선언, 객체 복사, Template Literals ,구조분해할당, 전개 연산자(...), 화살표 함수

 

변수와 상수

 

var

기존의 변수 키워드.

전역 변수를 남발할 가능성이 높아 현재는 거의 사용하지 않음.

재할당/재선언 가능.

 

let

ES6 이후 사용되는 변수 키워드.

재할당 가능. 재선언 불가.

 

const

ES6 이후 사용되는 상수 키워드.

재할당/재선언 불가.

 

【 일반적인 변수와 상수 선언 】

let a = 1;
const b = 3;
var c = 5;

console.log("a", a); // a 1
console.log("b", b); // b 3
console.log("c", c); // c 5

【 const는 재할당되지 않음 】

let d = 1;
const e = 3;
var f = 5;

d = 5;
e = 7;
f = 9;

console.log("d", d); // d 5
console.log("e", e); // TypeError: Assignment to constant variable.
console.log("f", f); // f 9

【 let은 재선언되지 않고, const는 재할당/재선언되지 않음 】

let g = 1;
const h = 3;
var i = 5;

let g = 5;
const h = 7;
var i = 9;

console.log("g", g); // SyntaxError: Identifier 'g' has already been declared
console.log("h", h); // SyntaxError: Identifier 'h' has already been declared
console.log("i", i); // i 9

 

JavaScript Scope

 

블록 레벨 스코프(Block-level scope)

 : let, const

 모든 코드 블록(함수, if 문, for 문, while 문, try/catch 문 등) 내에서 선언된 변수는 지역 변수이며 블록 외부에서는 액세스 할 수 없다.

 

함수 레벨 스코프(Function-level scope)

 : var

 함수 내부에서 선언한 변수는 지역 변수이며 함수 내에서만 액세스 할 수 있다.

 함수 외부에서 선언한 변수는 모두 전역 변수이며 블록 외부에서 액세스할 수 있다.

 

【 var가 전역 참조하는 예시 】

if (1 == 1) {
  var x = 3;
  console.log("x", x); // x 3
}

console.log("바깥 x", x); // 바깥 x 3

 

 

 

---

 

 

Object 선언, 단축 속성, 객체 복사

 

★ JS에서의 object => { key: value } pair

 

객체를 선언하는 일반적인 방법

const person1 = {
  name: "sam",
  age: 21,
  doSomething: function () {}, // () => {},
};

console.log(person1); //{ name: 'sam', age: 21, doSomething: [Function: doSomething] }

 

생략해서 표현하는 방법

【 단축속성 : key - value가 일치하면 생략 】
// 아래의 1, 2, 3은 모두 같다.

const name = "joy";
const age = 35;

console.log(name); // joy
console.log(age); // 35

// 1. 생략 전
const person2 = {
  name: "joy",
  age: 35,
  doSomething: function () {},
};

// 2. 생략 전
const person3 = {
  name: name,
  age: age,
  doSomething: function () {},
};

// 3. 생략 후
const person4 = {
  name,
  age,
  doSomething: () => {},
};

console.log(person2); //{ name: 'joy', age: 35, doSomething: [Function: doSomething] }
console.log(person3); //{ name: 'joy', age: 35, doSomething: [Function: doSomething] }
console.log(person4); //{ name: 'joy', age: 35, doSomething: [Function: doSomething] }

 

 

객체 복사

얕은 복사(Shallow Copy)
객체를 복사할 때 복사본이 원본의 데이터가 저장된 메모리의 주소값을 복사하여 같은 메모리 주소를 가짐.
수정 시 원본과 복사본의 값이 동시에 변하므로 의도치 않은 변경에 주의할것.

깊은 복사(Deep copy)
객체를 복사할 때 복사본이 다른 주소를 가지며 내부의 데이터만 복사함. JSON 객체, 재귀 함수 등을 이용한다.

 

const obj1 = { value1: 10 };
const obj2 = obj1; // 얕은 복사. obj1, obj2는 같은 메모리를 바라보는 같은 주소를 가짐.
const obj3 = JSON.parse(JSON.stringify(obj1)); // 깊은 복사.
// -> JSON.stringify(obj1)로 문자열 형태로 풀어줌
// -> JSON.parse()로 JSON 형태로 다시 묶어줌
// -> 새로운 메모리 공간을 가진 새로운 객체를 만들어 새로운 주소값을 생성하고 그것을 obj3에 할당함.

obj1.value1 += 1;
obj2.value1 -= 5;
// => obj1, obj2 모두에게 각각 적용됨. obj3에는 적용되지 않음.

console.log(`obj1:`, obj1); // obj1: { value1: 6 }
console.log(`obj2:`, obj2); // obj2: { value1: 6 }
console.log(`obj3:`, obj3); // obj3: { value1: 10 }

 

 

---

 

 

Template Literals

``(백틱) 사용. placeholders(${})를 이용하여 표현식을 쓸 수 있다.

【 일반 텍스트 】
console.log(`string text`); // string text

【 멀티라인 】
console.log(
  `string text line 1
string text line 2`
);
// string text line 1
// string text line 2

【 플레이스 홀더(${})를 이용한 표현식 】
const expression = 123;
console.log(`string text ${expression} string text`); // string text 123 string text

 

 

---

 

 

구조분해할당

 

Object Destructuring

(객체의 비구조화 = 객체 구조분해할당)

변수 선언

const person = {
  name: "Sam",
  age: "21",
};


1. key값이 맞으면 person 객체 안에 있는 값들의 구조가 해제되어 각각 변수에 할당됨.

const { name, age, notFound } = person; // person을 name과 age라는 변수로 분해한 후 맞는 값으로 할당하겠다.

console.log(`${name} is ${age} years old.`); // Sam is 21 years old.
console.log(notFound); // undefined


2. key값이 맞으면 함수의 입력값 또한 각각 구조가 해제되어 각각 변수에 할당됨.
(특히 자주 쓰이는 패턴!)

function hello({ name, age }) {
  console.log(`${name}님, ${age}살이시네요!`);
} // hello 함수 실행 시 (매개변수=person)를 name과 age라는 변수로 분해한 후 맞는 값으로 할당하겠다.

hello(person); // Sam님, 21살이시네요!

 

Array Destructuring

(배열 비구조화 = 배열 구조분해할당)

위치가 맞으면 배열도 구조분해 할당이 이루어짐.

const testArr = [1, 2, 3];
const [val1, val2, val3, val4] = testArr;
// => testArr을 val1~val6 이라는 변수로 분해한 후 위치에 맞는 값을 할당하겠다.

console.log(val1); // 1
console.log(val2); // 2
console.log(val3); // 3
console.log(val4); // undefined

 

 

---

 

 

전개 연산자 Spread Operator (...)

CASE 1

let [name, ...rest] = ["Tom", 10, "Seoul"];
// => name이라는 변수는 Tom과 맵핑되고 rest라는 변수는 나머지 요소들과 맵핑된다.
// ... = 나머지 전체를 가져오기

console.log(name); // Tom
console.log(rest); // [ 10, 'Seoul' ]

 

CASE 2

let names = ["Steve", "John"];
let students1 = ["Tom", names]; // 배열 그대로 요소로 들어옴
let students2 = ["Tom", ...names]; // 배열의 구조를 해제하고 나와 요소로 들어옴.

console.log(students1); // [ 'Tom', [ 'Steve', 'John' ] ]
console.log(students2); // [ 'Tom', 'Steve', 'John' ]

 

CASE 3

let tom = {
  name: "Tom",
  age: 10,
  region: "Seoul",
};

let steve = {
  ...tom,
  name: "Steve",
};

console.log(tom); // { name: 'Tom', age: 10, region: 'Seoul' }
console.log(steve); // { name: 'Steve', age: 10, region: 'Seoul' }

 

 

---

 

 

화살표 함수(Arrow Functions)

【 기존의 함수 선언 방식 】
function mysum11(x, y) {
  return x + y;
}

【 화살표함수로 수정 】
// (소괄호)안 매개변수가 하나면 소괄호를 생락 가능.(vscode에서는 자동으로 소괄호 만들어줄 수도 있음.)
const mysum12 = (x, y) => {
  return x + y;
};

【 화살표함수에서 return문이 한 줄일 경우 return문과 {중괄호}를 !같이! 생략 가능 】
const mysum13 = (x, y) => x + y;


【 결과 】
console.log(mysum11(1, 2)); // 3
console.log(mysum12(1, 2)); // 3
console.log(mysum13(1, 2)); // 3

 

【 기존의 함수 선언 방식에서 화살표 함수로 바꾸는 과정】

function mysum1(x, y) {
  return { x: x, y: y };
}
console.log(mysum1(1, 2)); // { x: 1, y: 2 }

const mysum2 = function (x, y) {
  return { x: x, y: y };
};
console.log(mysum2(3, 4)); // { x: 4, y: 3 }

const mysum3 = (x, y) => {
  return { x: x, y: y };
};
console.log(mysum3(5, 6)); // { x: 5, y: 6 }

const mysum4 = (x, y) => ({ x: x, y: y });
console.log(mysum4(7, 8)); // { x: 7, y: 8 }