ES6에 추가된 기능

01. Shorthand property names

{
	const ellie1 = {
		name: "Ellie",
		age: "18",
	};

	const name = "Ellie";
	const age = "18";

	// ba~~~~~~~~~~d
	const ellie2 = {
		name: name,
		age: age,
	};

	// key와 value의 값이 동일하면 축약해서 사용할 수 있다!
	const ellie3 = {
		name,
		age,
	};

	console.log(ellie1, ellie2, ellie3);
}

02. Destructuring Assignment

• 비구조 할당을 하는 블록에 맞춰야 한다
  • 객체 {}, 배열 []

{
	// Objcet
	const student = {
		name: "Anna",
		level: 1,
	};

	// boop
	{
		const name = student.name;
		const level = student.level;
		console.log(name, level);
	}

	// Destructuring Assignment, 구조 분해 할당
	{
		const { name, level } = student;
		console.log(name, level);

		// 객체 내부의 이름 외에도 지정해서 변경 가능 ':' 사용
		const { name: studentName, level: studentLevel } = student;
		console.log(studentName, studentLevel);
	}

	// Array
	const animals = ["dog", "cat"];

	// boop
	{
		const first = animals[0];
		const second = animals[1];
		console.log(first, second);
	}

	// Destructuring Assignment, 구조 분해 할당
	{
		const [firset, second] = animals; // 순서에 맞게 할당이 된다
		console.log(first, second);
	}
}

03. Spread Syntax

• 객체의 주소 참조 값만 복사된다

{
	const obj1 = { key: "key1" };
	const obj2 = { key: "key2" };
	const array = [obj1, obj2];

	// array copy
	// ... 각 각 낱개로 가져와서 복사 된다
	const arrayCopy = [...array];
	console.log(array, arrayCopy);

	// 복사 + 새로운 값 추가
	const arrayCopy2 = [...array, { key: "key3" }];
	console.log(array, arrayCopy, arrayCopy2);
	// 복사가 되었어도 객체이기 때문에 모두 같은 객체를 가진다

	//Object copy
	const obj3 = { ...obj1 };
	console.log(obj3);

	// array concatenation
	const fruits1 = ["peach", "strawberry"];
	const fruits2 = ["banana", "kiwy"];
	const fruits = [...fruits1, ...fruits2]; // 하나로 병합
	console.log(fruits);

	// object merge
	// 만약에 Object의 key 값이 동일하면 뒤에 오는 값이 앞에 대입된 값을 덮어 씌운다!
	const dog1 = { dog1: "dog1" };
	const dog2 = { dog2: "dog2" };
	const dog = { ...dog1, ...dog2 };
	console.log(dog);
}

04. Default parameters

{
	// boop
	function printMessage(message) {
		if (message == null) {
			message = "default message";
		}
		console.log(message);
	}

	printMessage("hello"); // hello
	printMessage(); // undefined, default message

	// Default parameters
	function printMessage(message = "default message") {
		console.log(message);
	}

	printMessage("hello"); // hello
	printMessage(); // default message
}

05. Ternary Operator (삼항 연산자)

{
	const isCat = true;

	// boop
	{
		let component;
		if (isCat) {
			component = "cat";
		} else {
			component = "dog";
		}
		console.log(component);
	}

	// Ternary Operator
	{
		const component = isCat ? "cat" : "dog";
		console.log(component);
	}
}

06. Template Literal

{
	const weather = "sunny";
	const temperature = "16deg";

	// boop
	console.log(
		"Today weather is " + weather + " and temparature is " + temperature
	);

	// Template Literal
		console.log(`Today weather is ${weather} and temparetuer is ${temperature}`);
}

ES11

01. Optional Chaining (ES11)

{
	constperson1={
		name:'Ellie',
		job:{
			title:'S/Wenginner',
			manager:{
				name:'Bob',
			},
		},
	};

	constperson2={
		name:'Bob',
	}

	//boopboopboop
	{
		functionprintManager(person){
			console.log(person.job.manager.name);
		}
		printManager(person1);//Bob
		printManager(person2);//error
	}

	//boopboop
	{
		functionprintManager(person){
			console.log(
				person.job
				?person.job.manager
				?person.job.manager.name
				:undefined
				:undefined
			);
		}
		printManager(person1);//Bob
		printManager(person2);//undefined
	}

	//boop
	{
		functionprintManager(person){
			console.log(person.job&&person.job.manager&&person.job.manager.name);
		}
		printManager(person1);//Bob
		printManager(person2);//undefined
	}

	//OptionalChaining(withKotlin,swift)
	{
		functionprintManager(person){
			console.log(person.job?.manager?.name);
		}
		printManager(person1);//Bob
		printManager(person2);//undefined
	}
}

02. Nullish Coalescing Operator (ES11)

{
	//LogicalORoperator
	//false:false,'',0,null,undefined
	//notbadbutcarefullaerror
	{
		constname='Ellie';
		constuserName=name||'Guest';
		console.log(userName);//Ellie
	}

	{
		constname=null;
		constuserName=name||'Guest';
		console.log(userName);//Guest

		constnum=0;
		constmessage=num||'undefined';
		console.log(message);//undifined
	}
	//문제,아무것도지정되지않을때만false의값을호출하고싶은데
	//문자열이비어있을경우에도false가할당된다...사용자가아무값도넣기싫은데도잘못된값이들어갈수있다
	//그리도숫자0도flase로간주된다

	//NullishCoalescing
	{
		constname='';
		constuserName=name??'Guest';
		console.log(userName);

		constnum=0;
		constmessage=num??'undefined';
		console.log(message);
	}
}