[5주차] 리액트입문: React 필수 ES6 문법

1. 상수와 변수

let b = 3;
b = 4;
console.log("a", a); // 1
console.log("b", b); // 4

 

var를 쓰지 않아야 하는 이유는 block lefel scope을 가지고 있지 않기 때문이다.

if ( 1 === 1 ) {
  // 항상 여기로 들어옴
  var a = 3;
  console.log(a);
}

console.log(a);
//밖에서도 a가 3이 나옴
//왜 이런일이? const&let은 block level scope를 가진다. var은 아님.

 

---

2. 얕은 복사

얕은 복사를 조심해야 한다.

 

---

 

3. template literal

• `백틱` 안에는 자바스크립트 변수를 넣을 수 있다.
• 백틱안에서는 multiple line을 쓸 수 있다.

// `백틱` 안에는 자바스크립트 변수를 넣을 수 있다.
const number = 3;
console.log(`문자열 ${number}입니다.`);

//문자열 3입니다.

---

 

4. 구조분해할당 Destructuring

• 객체 비구조화

const person = {
	name: '르탄',
	age: '21'
}

//name과 age로 분해하기

const {name, age, notFound} = person;

console.log(name); //르탄
console.log(age); //21
console.log(notFound);//undefined

 

 

• 배열 비구조화

//  배열 비구조화 (Array Destructuring)

const testArr = [1, 2, 3, 4, 5];
const [one, two, three, four, five, six] = testArr;

console.log(one); //1
console.log(two); //2
console.log(three); //3
console.log(four); //4
console.log(five); //5 
console.log(six); // undefined

---

 

5. 전개연산자 (Spread Operator)

• 일반 배열에서 요소값 하나씩 빼오기, rest는 나머지 요소들의 묶음인 배열로 반환

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

 

• 배열 a 와 배열 b를 합치기 => 배열 반환

let names = ["Steve", "John"];
let students = ["Tom", ...names, ...names ];

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

 

• 객체 a의 key-value 값을 객체 b 안에 넣기

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

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

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

---

6. 화살표함수

일반 함수에서 화살표 함수로 3단 변화

function mysum1 (x, y) {
  return x+y;
}

const mysum2 = (x, y) => {
  return x + y;
}

const mysum3 = (x, y) => x + y; //function, return, {} 빼기


console.log(mysum1(1,2)); //3
console.log(mysum2(1,2)); //3
console.log(mysum3(1,2)); //3

**마지막 한줄 함수는 return문이 1줄일때만 가능