본문 바로가기

DEV/javascript4

옵셔널 체이닝 '?.' let user = {}; // 주소 정보가 없는 사용자 alert( user && user.address && user.address.street ); // undefined, 에러가 발생하지 않습니다. let user = {}; // 주소 정보가 없는 사용자 alert( user?.address?.street ); // undefined, 에러가 발생하지 않습니다. let user1 = { admin() { alert("관리자 계정입니다."); } } let user2 = {}; user1.admin?.(); // 관리자 계정입니다. user2.admin?.(); 옵셔널 체이닝 문법 ?.은 세 가지 형태로 사용할 수 있습니다. obj?.prop – obj가 존재하면 obj.prop을 반환하고, 그렇지.. 2022. 3. 20.
스프레드 문법 let arr = [3, 5, 1]; let arr2 = [8, 9, 15]; let merged = [0, ...arr, 2, ...arr2]; alert(merged); // 0,3,5,1,2,8,9,15 (0, arr, 2, arr2 순서로 합쳐집니다.) let obj = { a: 1, b: 2, c: 3 }; let objCopy = { ...obj }; // 객체를 펼쳐서 각 요소를 분리후, 매개변수 목록으로 만든 다음에 // 매개변수 목록을 새로운 객체에 할당함 // 객체 복사본의 프로퍼티들이 기존 객체의 프로퍼티들과 진짜 같을까요? alert(JSON.stringify(obj) === JSON.stringify(objCopy)); // true // 두 객체는 같을까요? alert(obj =.. 2022. 3. 20.
구조 분해 할당 let options = { title: "Menu", width: 100, height: 200 }; let {title, width, height} = options; alert(title); // Menu alert(width); // 100 alert(height); // 200 let options = { title: "Menu", width: 100, height: 200 }; // { 객체 프로퍼티: 목표 변수 } let {width: w, height: h, title} = options; // width -> w // height -> h // title -> title alert(title); // Menu alert(w); // 100 alert(h); // 200 2022. 3. 20.
nullish - 널리쉬 병합 연산자 '??' nullish - 병합 연산자 '??' let x = (a !== null && a !== undefined) ? a : b; let firstName = null; let lastName = null; let nickName = "바이올렛"; // null이나 undefined가 아닌 첫 번째 피연산자 alert(firstName ?? lastName ?? nickName ?? "익명의 사용자"); // 바이올렛 let height = 0; alert(height || 100); // 100 alert(height ?? 100); // 0 2022. 3. 19.

티스토리툴바