New ?? Operator

• or (||) 연산자와 달리, 왼쪽 피연산자가 null 또는 undefined가 아닌 falsy값이면 반환.
• 즉 다른 변수 에게 기본값을 제공하기 위해 ||을 사용할 경우 falsy값("" 또는 0)을 사용하는 것을 고려한다면 예기치 않는 동작이 발생할수 있다.

const foo =  null  ??  'default string';
console.log(foo);  // default string

const baz =  0  ??  42;
console.log(baz);  // 0

• 왼쪽 표현식이 null또는 undefined인 경우, 오른쪽 표현식의 결과를 반환한다.

변수에 기본값 할당

let myText =  '';

let notFalsyText = myText ||  'Hello world';
console.log(notFalsyText);  // Hello world


let preservingFalsy = myText ??  'Hi neighborhood';
console.log(preservingFalsy);  // ''

Nullish coalescing operator mdn

Optional Chaning

const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah'
  }
};

const dogName = adventurer.dog?.name;
// adventurer.dog && adventurer.dog.name 을 간략화한것.

console.log(dogName); // undefined
console.log(adventurer.someNonExistentMethod?.()); //undefined

Optional chaining(?.) mdn

padStart and padEnd

구문

padStart

str.padStart(targetLength,padString)

padStart mdn

padEnd

str.padEnd(targetLength,padString)

padEnd mdn

• targetLength : 묙표 문자열 길이
  ( 현재 문자열의 길이보다 작다면 채워넣지 않고 그대로 반환.)
• padString : 현재 문자열에 채워넣을 다른 문자열
  ( 문자열이 너무 길어 목표 문자열 길이를 초과한다면 좌측 일부를 잘라서 넣음. 기본값은 "")

예시

padStart

'abc'.padStart(10);         // "       abc"
'abc'.padStart(10, "foo");  // "foofoofabc"
'abc'.padStart(6,"123465"); // "123abc"
'abc'.padStart(8, "0");     // "00000abc"
'abc'.padStart(1);          // "abc"

padEnd

'abc'.padEnd(10);          // "abc       "
'abc'.padEnd(10, "foo");   // "abcfoofoof"
'abc'.padEnd(6, "123456"); // "abc123"
'abc'.padEnd(1);           // "abc"

응용

let hours =  12,
    minutes =  3,
    seconds =  2;

// let time = `${hours}h:${minutes < 10 ? `0${minutes}` : minutes}m:${seconds}s`

minutes = String(minutes).padStart(2,"0").padEnd(3,"s") // 03s
// minutes = "a".padStart(2,"0") // 0a

trim, trimStart, trimEnd

let str =  "     hello!          ";

console.log(str.trimStart()); // 앞쪽 빈공간을 자른다.
console.log(str.trimEnd()); // 뒤쪽 빈공간을 자른다.
console.log(str.trim());  // 앞뒤 빈공간을 자른다.

trim mdn | trimStart mdn | trimEnd mdn

Object entries, Object values, Object fromEntries

Object

let person =  {
	name:'ga young',
	age:26
}

◾ value값을 알고 싶을때

Object values

let values =  Object.values(person) // ["ga young", 26]

Object values mdn

◾ key와 value을 모두 알고 싶을때

Object entries

let entries =  Object.entries(person).forEach(item  => console.log(item[0],item[1]))

Object entries mdn

◾ 배열을 객체로 변환 하고 싶을때

Object fromEntries

let fromEntries =  Object.fromEntries([["name",  "ga young"],["age",  26],["F","k"],["hello",true]])

console.log(fromEntries);  // {name: "ga young", age: 26, F: "k", hello: true}

• 옛날코드를 수정할때 많이 사용한다.

  Object fromEntries mdn

Array flat

구문

cosnt newArr = arr.flat([depth])

• depth: 중첩 배열 구조를 일차화 할때 사용할 깊이값 (기본값은 1이다)_optional

예시

let newArray = [1,[2],[[3],[4]],[[4,5],[7,8]]]
  
console.log(newArray.flat());  // [1, 2, Array(1), Array(1), Array(2), Array(2)]
console.log(newArray.flat(2));  // [1, 2, 3, 4, 4, 5, 7, 8]

Array.flat() mdn

Array sort

배열 일때

let fruits = ["apple","strawberry",  "avocado",  "orange","banana"];

let sortFruitByLength = fruits.sort((a,b)=> a.length - b.length)

console.log(sortFruitByLength);  // ["apple", "orange", "banana", "avocado", "strawberry"]

객체 일때

const profile = [
	{
		name:"gayoung",
		age:26
	},
	{
		name:"woo",
		age:24
	}
]

const  orderPeopleByAge  = (a,b) => b.age - a.age;

console.log(profile.sort(orderPeopleByAge));
// 0: {name: "gayoung", age: 26}
// 1: { name: "woo", age: 24 }

Array.sort() mdn