TIL : Javascript 최신문법(ES6,ES11)
ES6
모르면 손해!! 더욱 간편해진 최신 문법을 공부해뷰쟈!
Destructing assignment
'구조분해 할당' 이라고 불린다. 배열이나 object내 값들을 정해진 변수에 할당하여 편하게 호출 가능하다!
const student = {
name: "gyng",
age: 20,
};
{
const name = student.name;
const age = student.age;
}
- 기존에는 이렇게 하나하나 변수에 나눠서 할당해 줘야하지만
- destructing assignment를 활용한다면!?
{
const { name, age } = student;
console.log(name, age);
}
- name과 age말고 다른 이름을 입력할 수도 있다!
{
const { name: studentName, age: studentAge } = student;
console.log(studentName, studentAge);
}
모르면 손해!! 더욱 간편해진 최신 문법을 공부해뷰쟈!
'구조분해 할당' 이라고 불린다. 배열이나 object내 값들을 정해진 변수에 할당하여 편하게 호출 가능하다!
const student = {
name: "gyng",
age: 20,
};
{
const name = student.name;
const age = student.age;
}
{
const { name, age } = student;
console.log(name, age);
}
{
const { name: studentName, age: studentAge } = student;
console.log(studentName, studentAge);
}
Object 뿐만 아니라 배열도 가능!
{
const animals = ["cat", "dog"];
const [first, second] = animals;
console.log(first, second);
}
배열에는 [ ], Object는 { } 기억!
spread syntax
배열, Object 값을 손쉽게 복사,추가,병합 할 수 있다!
{
const obj1 = { key1: "key1" };
const obj2 = { key2: "key2" };
const array = [obj1, obj2];
const arrayCopy = [...array];
console.log(arrayCopy);
//복사 + 새로운 값 추가 하고싶다면!?
const arrayCopy2 = [...array, 4];
// 주소값을 복사해온 것이기 때문에, obj1의 값을 만약 변경한다면 복사한 배열의 값도 다 변경된다
console.log(arrayCopy2);
}
{
//spread 문법 통해 배열,객체 합치기도 가능
const dogs = ["진돗개", "풍산개"];
const cats = ["페르시안,스핑크스"];
const animals = [...dogs, ...cats];
console.log(animals);
// 키값이 중복되면 더 나중에 선언한 값으로 덮어씌워지는 것 유의
const fruit = { key1: "apple" };
const fruit2 = { key1: "banana" };
const fruits = { ...fruit, ...fruit2 };
console.log(fruits);
}
- 이 때, 복사된 값은 값을 하나하나 복사하는게아니다.
- 각 배열,object가 할당된 주소값을 복사하는 것이다!!
- 때문에 당연히 원래 object나 배열의 값이 변경된다면, 복사된 배열이나 object값도 바뀌게 된다!! 이점 유의하자!!
ES11
optional chaining
객체 내 요소를 호출할 때, 번거롭게 연산자를 사용하여 예외처리를 해주는 것을 더욱 손쉽게 해주는 문법!
const person1 = {
name: "gyong",
job: {
title: "s/w engineer",
manager: {
name: "bob",
},
},
};
const person2 = {
name: "json",
};
// 코드가 너무 중복되는 방식
function managerName(person) {
console.log(
person.job && person.job.manager && person.job.manager.name
);
}
- 위의 방식은 딱 봐도 동일한 코드가 계속해서 반복되어 지저분해보인다.
- person1은 정상적으로 'bob'이 출력
- person2는 선언된 값이 없어 에러가 발생한다.
- 요럴때 사용할 수 있는 문법이 optional chaining
// optional chaining
function managerName(person) {
console.log(person.job?.manager?.name);
}
managerName(person1);
managerName(person2);
- 코드가 훨씬 간결해졌다!😗
nullish coalescing operator
or(||) 연산자의 모지란(?) 부분을 해결해 줄 수 있는 연산자(??)
//or 연산자는 앞에 것이 false여야 뒤에것이 실행된다.
const name = "gyong";
const userName = name || "Guest";
// 여기서 문제점 발생!
const num = 0;
const number = num || "numbering";
console.log(number); // 0을 대입하고 싶으나, 숫자ㅏ 0은 false로 처리되기때문에 numbering이 출력된다.
- false : 0,' ',false,undefined
- 나는 숫자 0을 출력하고 싶어! 하지만 or연산자를 사용하면 0도 false이기 때문에 or연산자(||) 뒤에 있는 numbering을 출력해버린다.
- 이럴때 사용할 수 있는 연산자가
??
연산자
'??' 연산자는 왼쪽의 피연산자가 null, undefined 일때 오른 쪽을 return한다!
const num = 0;
const number = num ?? "numbering";
console.log(number);
??
연산자를 사용하면 왼쪽의 피연산자(num)의 값이 null,undefined가 아니기 때문에 0을 정상적으로 출력해준다!!!
Author And Source
이 문제에 관하여(TIL : Javascript 최신문법(ES6,ES11)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@pgy93/TIL-Javascript-최신문법ES6ES11
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
객체 내 요소를 호출할 때, 번거롭게 연산자를 사용하여 예외처리를 해주는 것을 더욱 손쉽게 해주는 문법!
const person1 = {
name: "gyong",
job: {
title: "s/w engineer",
manager: {
name: "bob",
},
},
};
const person2 = {
name: "json",
};
// 코드가 너무 중복되는 방식
function managerName(person) {
console.log(
person.job && person.job.manager && person.job.manager.name
);
}
// optional chaining
function managerName(person) {
console.log(person.job?.manager?.name);
}
managerName(person1);
managerName(person2);
or(||) 연산자의 모지란(?) 부분을 해결해 줄 수 있는 연산자(??)
//or 연산자는 앞에 것이 false여야 뒤에것이 실행된다.
const name = "gyong";
const userName = name || "Guest";
// 여기서 문제점 발생!
const num = 0;
const number = num || "numbering";
console.log(number); // 0을 대입하고 싶으나, 숫자ㅏ 0은 false로 처리되기때문에 numbering이 출력된다.
??
연산자'??' 연산자는 왼쪽의 피연산자가 null, undefined 일때 오른 쪽을 return한다!
const num = 0;
const number = num ?? "numbering";
console.log(number);
??
연산자를 사용하면 왼쪽의 피연산자(num)의 값이 null,undefined가 아니기 때문에 0을 정상적으로 출력해준다!!!Author And Source
이 문제에 관하여(TIL : Javascript 최신문법(ES6,ES11)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@pgy93/TIL-Javascript-최신문법ES6ES11저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)