[js] Post ES6

Post ES6

nullish coalescing

논리 연산

string - '' === false
number - 0 & NaN === false

&&

const c1 = 123;
const c2 = 'abc';
const v1 = c1 && c2;
const v2 = c1 && c2 && 0;
const v3 = c1 && 0 && c2;
console.log({ v1, v2, v3 });

const v4 = c1 || c2;
const v5 = '' || c2;
console.log({v4, v5});

// 논리 연산자의 값은 boolean이 아닐 수 있다. 
// 왜냐하면 v4, v5의 경우 아래와 같은 값을 가지기 때문이다. 
// { v4: 123, v5: 'abc'} 

// 이경우 !!를 붙여주면 boolean 값이 된다. 
const v6 = !!(c1 && 0 && c2);
const v7 = !!(c1 || c2);
console.log({ v6, v7});
>>> { v6: false, v7: true }

||

const price = 0; 
const name = '';

// 뒤에 부분이 기본값 처럼 사용될 수 있다. 
// 아래 nullish coalescing 참고
const price2 = price || 1000; 
const name2 = name || '이름을 입력해주세요';

nullish coalescing

const person = {};

// nullish coalescing
const name = person.name ?? 'unknown';

// 동작 방식
const name = 
	person.name === undefined || person.name === null 
	? 'unknown' : person.name;

nullish coalescing vs ||

빈문자열이나 0의 경우에는 둘이 다르게 동작한다.

const product = { name: '', price: 0};

const name1 = product.name ?? '상품명을 입력하세요';
const price1 = product.price ?? 1000;
console.log({ name1, price1 });
>>> {name1: "", price1: 0}

const name2 = product.name || '상품명을 입력하세요';
const price2 = product.price || 1000;
console.log({ name2, price2 });
>>> {name2: "상품명을 입력하세요", price2: 1000}

Short hand property

const name = 'pius';

// before
const obj = {
	age: 29,
	name : name, 
	getName: function getName() {
		return this.name;
	}
};

// after
const obj = {
	age: 29,
	name,
	getName() {
		return this.name;
	}

Computed Property

// before ??
function makeObject1(key, value) {
	const obj = {};
	obj[key] = value;
	return obj;
}
// after
function makeObj2(key, value) {
	return { [key] : value };
}

Spread operator

// before. 각각 입력
Math.max(1, 3, 7, 9);

// after 
const numbers == [1, 3, 7, 9];
Math.max(...numbers);
const arr1 = [1, 2, 3];
const obj1 = { age: 23, name: 'pius'};

// 아래 처럼 복사 가능
const arr2 = [...arr1];
const obj2 = {...obj1};
arr2.push(4); // arr1 영향 X
obj2.age = 29;  // obj1 영향 X
const obj1 = { age: 21, name: 'pius' };
const obj2 = { hobby: 'programming' };

const obj3 = { ...obj1, ...obj2 };
console.log(obj3);
>>> { age: 21, name: 'pius', hobby: 'programming' };
const obj1 = {x:1, x:2, y: 'a' }};
const obj2 = {...obj1, y:'b'};
console.log({ obj1, obj2 });

{ obj1: { x2, y: 'a'}, obj2: { x: 2, y: 'b' }};

Destructuring

배열 비구조화 할당

const arr = [1, 2];

const [a, b] = arr;
console.log(a);
console.log(b);
const arr = [1, 2];

let a, b;
[a, b] = arr;
const arr = [1];
// 기본값 설정. undefined -> 기본값 사용
const [a = 10, b = 20] = arr;
console.log({a, b});
>>> {a: 1, b = 20}
let a = 1;
let b= 2;

// swap 기능 사용 가능.
[a, b] = [b, a];
console.log({a, b});
>>> { a: 2, b: 1 } 
console arr = [1,2,3];
const [a, ,c] = arr;
console.log({a, c});
>>> {a: 1, c: 3 };
const arr = [1,2,3];
const [first, ...rest1] = arr;
console.log(rest1);
>>> [2, 3]

const [a,b,c ...rest2] = arr;
console.log(rest2);
>>> []

객체 비구조화 할당

const obj = { age: 29, name: 'pius' };
const { age, name } = obj;
console.log({ age, name});
>>> { age: 29, name: 'pius' }

객체 비구조화 할당은 순서가 중요하지 않다.

const obj = { age: 29, name: 'pius' };
const { age, name } = obj;
const { name, age } = obj;
const { a, b } = obj; // a,b 모두 undefined  

원래 속성과 다른 이름으로 변수 생성

const obj = { age : 29, name: 'pius'};
const {age: myAge, name} = obj;
console.log(myAge);
console.log(age); // reference Error

undefined인 경우에만 기본값 설정된다.

const obj = { age: undefined, name: null, job: 'programmer'};
const { age = 0, name = 'noName', job = 'lawyer' } = obj;
console.log({age, name, job});
>>> {age: 0, name: null, job: "programmer"}
function getDefaultAge() {
	console.log('hello');
	return 0;
}
const obj = { age: undefined, grade: 'A' };
const { age = getDefaultAge(), grade } = obj;
console.log(age);
>>> hello
>>> 0 
const obj = { age: 29, name: 'pius', job: 'programmer'};
const { age, ...rest } = obj;
console.log(rest);
>>> { name: pius, job: 'programmer' };
const people = [ 
	{ age: 29, name: 'pius' },
	{ age: 20, name: 'bius' },
];
for (const {age, name} of people ){
	// ...
}

고급

const obj = { name: 'pius', univ: { name: 'cau' }};
const {
	name, 
	univ: { name: univName},
} = obj;
console.log({name, univName}); 
>>> {name: 'pius', univName: 'cau'}
console.log(univ); // reference Error
const [ {props: x} = { props: 123} ] = [];
console.log(x);
>>> 123

// 아이템이 하나 있기 때문에, 기본 값이 할당되지 않는다. 
// 하지만 빈 객체에는 props 속성값이 없기 때문에, 
// x는 undefined
const [ {props: x} = { props: 123} ] = [{}];
console.log(x);

with computed property 반드시 별칭 사용.

const idx = 1;
const {[`key${idx}`]: valueOfTheIdx} = {key1: 123};
console.log(valueOfTheIdx);
>>> 1
const obj = {};
const arr = [];
({foo : obj.prop, bar: arr[0]} = {foo : 123, bar: true});
console.log(obj);
>>> { prop: 123 }
console.log(arr);
>>> [123]

Optional Chaining

const person = null;
// before
const nmae = person && person.name;
// after
const name2 = person?.name;

// 동작 방식
const name = person === null || person === undefined ? undefined : person.name;

함수에 사용

const person = {
	getName: () => 'abc',
}
const name = person.getName?.();
console.log(name); 
function loadData(onComplete) {
	console.log('loading...');
	onComplete?.();
}
loadData();

배열에 사용

const person = {friends: null, mother: null };

const firstFriend = person.friends?.[0];
// firstFriend - undefined
const prop = 'name';
const name = person.mother?.[prop]

// =============
const person = {friends: [1,2,3], mother: {name: 'pius'} };

const firstFriend = person.friends?.[0];
// firstFriend - 1
const prop = 'name';
const name = person.mother?.[prop]
// name - pius
const name = 
	person && 
	person.friends && 
	person.friends[0] && 
	person.friends[0].mother &&
	person.friends[0].mother.name; 
	
const name2 = person?.friends?.[0]?.mother?.name;

Generator



Nullish Coalescing


#javascript/Post_ES6