JavaScript - 새로운 es6 문법

🫠 새로운 es6 문법

1. 객체 초기화 방법

let name = "yuna";
let age = 31;
let person = { name: name, age: age }; // 까악 올드한 방식이야

<해결책>
let person = { name, age };
// 변수의 이름을 가지고 객체 기값을 자동으로 만든다.
console.log(person) 
> { name: "yuna", age: 31 };
// 변수 이름이 키값이였으면 좋겠다.

but! 
키값을 다르게 설정하고 싶을때는 다시 옛날 방식을 적어주어야 한다.
let person = {nameValue:name , ageValue:age}
console.log(person)
> {nameValue:"yuna", ageValue : 31}

2. 객체를 분해하는 과정

let singer = {
  name: 르세라핌,
  member: 5,
};
// 객체의 값을 꺼내다가 다시 변수로 만들기

let name = singer.name;
let member = singer.member; // 이것도 너무 번거로워 조금더 모던한 자바스크립트가 필요해!
==(똑같아)
let { name, member } = singer;

//객체의 내용과 달리 새로운 이름으로 변수를 선언하고자 한다면  그대로 적어주어야 한다

let nameValue = singer.name;
let memberValue = singer.member;

//> 르세라핌 5

3. ${yoon}님

let name = yoon;
let age = 31;

console.log("제이름은" + name, "입니다. 제 나이는", +age + "입니다"); 
//  과거에 쓰는법

console.log(`제이름은 ${name}입니다. 제 나이는 ${age} 입니다 `);  
//$를 사용하여 변수값을 가져옵니다.

4. 배열

let array = [1, 2, 3, 4];

// 배열의 있는 내용을 따로따로 변수를 저장하고 싶다
// 과거
let a = array[0];
let b = array[1];
let c = array[2];
let d = array[3];

// console.log(a, b, c, d);

//현재 
let [a, b, c, d] = array;
// 한번에 적어줘도 가능 ! 

Q> 그럼 배열에 하나만 변수로 처리하고 싶은데 그런 경우에는 어떻게 할까요 ??

let array = [1, 2, 3, 4];

//spread 연산자를 사용 해보자
let [a, ...rest] = array;

console.log(a)
> 1
console.log(rest);
>[2,3,4]
// a를 뺀 나머지가 rest에 들어가있다.

<객체인경우>

let singer = {
  name: "르세라핌",
  member: 5,
  popular: true,
};

//let { name, member, popular } = singer;

// 추출하고 싶은 것만 변수로 만들고 싶을 때

let { name, ...rest } = singer;
console.log(name,rest);
//>르세라핌 {member: 5, popular: true}

• … spread 연산자의 또다른 이용법

let a = [1, 2];
let b = [3, 4];
let c = [5, 6];

let result = a.concat(b, c);
let result = [...a, ...b, ...c]; 

//a/b/c/의 내용을 전부 들고와라
// ...을 이용하면 변수에 내용을 복사해온다

console.log(result);
//[1, 2, 3, 4, 5, 6] 
//concat이라는 함수를 통해서 변수의 내용을 합칠 수 있고 스프레드 연산자를 사용해서도 똑같은 결과를 얻을 수 있다.

5. 함수 선언방식

// 과거
function foo() {
  console.log("hello");
}

// 새로운 선언 방식

let foo = () => {
  console.log("hello");
};

선언방식에 따른 차이점을 살펴보자

// 과거
function foo() {
  return "hello";
}

// 새로운 선언 방식

let foo = () => "hello";
//함수가 한줄이면 return 생략이 가능하고 중괄호도 생략이 가능하다

console.log(foo);

// 일반함수에는 this를 사용이 가능하지만, 새로운 화살표 함수에는 this를 사용할 수 없다 .