ES6 문법 정리 (REACT)

React 에서 자주 사용하는 필수 ES6 문법 정리!

---

📖 상수와 변수

상수 : const ( constant : 변함없는 수 )
변수 : let

Var는 쓰면 안 되는 이유 -> 오해가 많이 생김
If 문 안에서 var를 선언하는 경우 중괄호 밖에서 콘솔 찍어도 출력됨
혼동을 줄 수 있어서 쓰지 않는다.

Let과 const는 Block level scope이다
Block level scope는 중괄호 안에서만 선언한 변수가 유효하다.

정리

• Var은 암묵적 전역 변수를 양산할 가능성이 크기 때문에 사용하지 않는다.
• let과 const는 블록 레벨 스코프여서 중괄호 안에서 선언한 변수만
  유효하다. ( 지역변수 )

---

📖 Object

javascript에서 말하는 object
Object는 Key - Value pair이다. 꼭 기억하자 !!
Value에는 어떤 것도 다 올 수 있음 ( 심지어 함수도 )

📖 Object의 단축속성

Key와 Value가 같은 모양이면 생략할 수 있다.

const age = 21; 
Const testObj = {
  name = '영수',
  age = 21,
}
   //21은 age니까 
Const testObj = {
  name = '영수',
  age = age
}

  // age 생략가능 
Const testObj = {
  name = '영수',
  age,
} 

---

🫨 얕은 복사

const obj1 = {
  value1: 10,
};
const obj2 = obj1;

console.log("obj1", obj1); 
console.log("obj1", obj2); 

여기서 만약 Obj1을 복사한 Obj2를 바꾸면 어떻게 될까?
Obj2도 바꿔주면 될 거라고 예상했지만 결과는 둘 다 11이 나왔다.

const obj1 = {
  value1: 10,
};
const obj2 = obj1;
obj2.value1 += 1; 

console.log("obj1", obj1); // 11
console.log("obj1", obj2); // 11 

obj1 , obj2 모두 11이 나왔다.
왜 그럴까?

사실 obj2는 obj1의 value1 : 10 값을 복사한 게 아니라,
obj1 의 1,2,3,4,5의 주소값을 복사한 것이다.
이 1,2,3,4,5는 value1 : 10이라는 메모리를 바라보고 있다

obj2도 같은 메모리를 복사한 것이므로 둘 다 같은 값이 나온 것이다.
이런 현상을 얕은 복사라고 한다.

✋ Q1. )

예를 들어 집문서가 있다고 가정하자,
명의는 나로 되어있는데, 친구가 집문서 복사본을 달라고 요청했다.
그래서 복사본을 만들어줬는데, 웬걸 명의가 친구의 이름으로 변해버린 상황인거다..

const 집문서 = {
	name : "본인"
 	price : "10억"
}
let 복사본 = 집문서 
복사본.name = "친구"
console.log (집문서); // name : 친구 , price : 10억
console.log (복사본); // name : 친구 , price : 10억 

친구 : 이 집은 이제 제껍니다 제 마음대로 할 수 있는 것이죠.

💻 Solution

이 사건을 해결할 방법은 두가지이다 .

• 1. 아예 새로운 주소 값을 생성해서 집문서를 지켜주는 방법

const save = JSON.parse(JSON.Stringigy(집문서원본));

집문서 원본으로부터 새로 받아서 다시 Parse로 묶어주게 되면
새로운 객체를 만들어내서 아예 다른 주소값을 생성해냄

• 2. Spread Operator : 전개연산자 (...) 사용하기

const 집문서 = {
 	 name: "본인",
 	 price: "10억",
};
let 복사본 = { ...집문서 };
복사본.name = "친구";
console.log(집문서); // name : 본인 , price : 10억
console.log(복사본); // name : 친구 , price : 10억

전개연산자로 겹치지 않게 복사할 수 있다!

[ ... ] , { ... } => 복사할 때
(...) 매개변수(파라미터)에 얼마나 많은 인수(아규먼트)가 들어올지 모를때나 배열로 처리해서 먼가 쉽게 원하는 값을 return 시키고 싶을 때 보통 쓰는듯 한다.

var str = "Hello world !";
console.log(...str); // H E L L O W O R L D !
console.log(str); // Hello world !

문자열도 가능 !

---

화살표 함수 : Arrow Function

	// 기본 함수 
	function test (a, b) {
     	 return a + b
    }
	console.log(name(2, 3)); //5 

기본 함수의 기본적인 모습이다.

	// 화살표 함수 
	let test = (a, b) => {
    	return a + b 
    }
    console.log(test(2, 3)); // 5

화살표 함수를 사용하면 , function이 생략된다.

	let test = (a, b) => a + b;
    console.log(test(2, 3)); // 5

만약 return문이 한 줄이면 중괄호 생략 가능하다.
주의할 점은 중괄호를 생략할 때 return도 생략해주어야 한다.
깜빡하지 않도록 꼭 주의 해야한다~

---