Jieunny์˜ ๋ธ”๋กœ๊ทธ

Unit 9. [JS]ES6 ์ฃผ์š”๋ฌธ๋ฒ• ๋ณธ๋ฌธ

CodeStates/learning contents

Unit 9. [JS]ES6 ์ฃผ์š”๋ฌธ๋ฒ•

Jieunny 2022. 12. 23. 10:47

๐Ÿ“ฃ ES6 (ECMAScript ):  JS์˜ ํ‘œ์ค€

โœ”๏ธ 2015๋…„์— ์ถœ์‹œ๋ฌ์ง€๋งŒ ๊ฐ€๋…์„ฑ๊ณผ ์œ ์ง€๋ณด์ˆ˜์„ฑ์ด ๋›ฐ์–ด๋‚œ ๋ฌธ๋ฒ•์ด ๋งŽ์ด ์ถ”๊ฐ€๋˜์—ˆ๋‹ค.

โœ”๏ธ let, const, ํ…œํ”Œ๋ฆฟ ๋ฆฌํ„ฐ๋Ÿด ๋“ฑ

 

๐Ÿ“ฃ spread/rest ๋ฌธ๋ฒ•

โœ”๏ธ spread ๋ฌธ๋ฒ•

๋ฐฐ์—ด์„ ํ’€์–ด์„œ ์ธ์ž๋กœ ์ „๋‹ฌํ•˜๊ฑฐ๋‚˜, ๊ฐ๊ฐ์˜ ์š”์†Œ๋กœ ๋„ฃ์„ ๋•Œ ์‚ฌ์šฉ
function sum(x, y, z) {
	return x + y + z;
    }
    
const numbers = [1. 2. 3];
sum(...numbers)	// 6์„ ๋ฆฌํ„ด

โžฐ ๋ฐฐ์—ด ์•ž์— ...์„ ์‚ฌ์šฉํ•ด์„œ x, y, x์— ๊ฐ๊ฐ 1, 2, 3 ์„ ์ „๋‹ฌํ•œ๋‹ค.

 

โœ”๏ธ rest ๋ฌธ๋ฒ•

ํŒŒ๋ผ๋ฏธํ„ฐ๋ฅผ ๋ฐฐ์—ด์˜ ํ˜•ํƒœ๋กœ ๋ฐ›์•„์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.
ํŒŒ๋ผ๋ฏธํ„ฐ ๊ฐœ์ˆ˜๊ฐ€ ๊ฐ€๋ณ€์ ์ผ ๋•Œ ์œ ์šฉ
function sum(...theArgs) {
  return theArgs.reduce((previous, current) => {
    return previous + current;
  });
}

sum(1,2,3) 	// 6
sum(1,2,3,4)	// 10

โžฐ ํŒŒ๋ผ๋ฏธํ„ฐ ์•ž์— ...์„ ๋ถ™์—ฌ ๋ฐฐ์—ด์„ ๋ฐ›์•„์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

โžฐ ์ด์ „ ๊ฐ’๊ณผ ํ˜„์žฌ ๊ฐ’์„ ๋”ํ•ด ๋ฆฌํ„ดํ•œ๋‹ค.

 

๐Ÿ“ฃ spread/rest ๋ฐฐ์—ด์—์„œ ์‚ฌ์šฉํ•˜๊ธฐ

โœ”๏ธ ๋ฐฐ์—ด ํ•ฉ์น˜๊ธฐ

let parts = ['shoulders', 'knees'];
let lyrics = ['head', ...parts, 'and', 'toes'];

lyrics	// ['head', 'shoulders', 'knees', 'and', 'toes']
let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1 = [...arr1, ...arr2];	// [0, 1, 2, 3, 4, 5]

โžฐ spread ๋ฌธ๋ฒ•์€ ๊ธฐ์กด ๋ฐฐ์—ด์„ ๋ณ€๊ฒฝํ•˜์ง€ ์•Š์œผ๋ฏ€๋กœ ์ƒˆ๋กœ arr1=~ ์ฒ˜๋Ÿผ ํ• ๋‹นํ•ด์ค˜์•ผ ํ•œ๋‹ค.

 

โœ”๏ธ ๋ฐฐ์—ด ๋ณต์‚ฌ

let arr = [1, 2, 3];
let arr2 = [...arr]; // arr.slice() ์™€ ์œ ์‚ฌ
arr2.push(4);	
arr // [1, 2, 3]
arr2	// [1, 2, 3, 4]

 

 

๐Ÿ“ฃ spread/rest ๊ฐ์ฒด์—์„œ ์‚ฌ์šฉํ•˜๊ธฐ

let obj1 = { foo: 'bar', x: 42 };
let obj2 = { foo: 'baz', y: 13 };

let clonedObj = { ...obj1 };
let mergedObj = { ...obj1, ...obj2 };

clonedObj	// { foo: 'bar', x: 42 }
mergedObj	// { foo: 'baz', x: 42, y: 13 }

โžฐ spread๋กœ ํ•ฉ์น  ๋•Œ, key๊ฐ’์ด ๊ฐ™์œผ๋ฉด ๋‚˜์ค‘์— ์˜ค๋Š” ๊ฐ’์ด ์ ์šฉ๋œ๋‹ค.

 

๐Ÿ“ฃ spread/rest ํ•จ์ˆ˜์—์„œ ๋‚˜๋จธ์ง€ ํŒŒ๋ผ๋ฏธํ„ฐ ๋ฐ›์•„์˜ค๊ธฐ

function myFun(a, b, ...manyMoreArgs) {
  console.log("a", a);	// a one
  console.log("b", b);	// b two
  console.log("manyMoreArgs", manyMoreArgs);	// manyMoreArgs['three', 'foue', 'five', 'six']
}

myFun("one", "two", "three", "four", "five", "six");

โžฐ ํŒŒ๋ผ๋ฏธํ„ฐ ์ˆœ์„œ๋Œ€๋กœ ๋ฐฐ์—ด ์š”์†Œ๊ฐ€ ํ• ๋‹น๋œ๋‹ค.

 

๐Ÿ“ฃ ์—ฐ์Šต๋ฌธ์ œ

let arr = ['code', 'states']
let value = [
  ...arr,
  'pre',
  ...['course', 'student']
]

value	// ['code', 'states', 'pre', 'course', 'student']

โžฐ spread๋Š” ๋ฐฐ์—ด์˜ ์š”์†Œ๋ฅผ ํŽผ์ณ์„œ ๋„ฃ์–ด์ฃผ๋Š” ๊ฒƒ. []๋Š” ๋“ค์–ด๊ฐ€์ง€ ์•Š์Œ!

 

 

๐Ÿ“ฃ ๊ตฌ์กฐ๋ถ„ํ•ดํ• ๋‹น

โœ”๏ธ ๋ถ„ํ•ด ํ›„ ์ƒˆ ๋ณ€์ˆ˜์— ํ• ๋‹น

 

โœ”๏ธ ๋ฐฐ์—ด

const [a, b, ...rest] = [10, 20, 30, 40, 50];
a	// 10
b	// 20
rest	// [30, 40, 50]

 

โœ”๏ธ ๊ฐ์ฒด

2
const {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}
a	// 10
b	// 20
rest	// { c: 30, d: 40 }

โžฐ ๊ฐ์ฒด์—์„œ ๊ตฌ์กฐ ๋ถ„ํ•ด ํ• ๋‹น์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ, ์„ ์–ธ๊ณผ ํ•จ๊ป˜ ์‚ฌ์šฉํ•ด๋ผ

 

โœ”๏ธ ํ•จ์ˆ˜

function whois({displayName: displayName, fullName: {firstName: name}}){
  console.log(displayName + " is " + name);
}

let user = {
  id: 42,
  displayName: "jdoe",
  fullName: {
      firstName: "John",
      lastName: "Doe"
  }
};

whois(user)

 

๐Ÿšจ ์ฐธ์กฐ : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

 

๊ตฌ์กฐ ๋ถ„ํ•ด ํ• ๋‹น - JavaScript | MDN

๊ตฌ์กฐ ๋ถ„ํ•ด ํ• ๋‹น ๊ตฌ๋ฌธ์€ ๋ฐฐ์—ด์ด๋‚˜ ๊ฐ์ฒด์˜ ์†์„ฑ์„ ํ•ด์ฒดํ•˜์—ฌ ๊ทธ ๊ฐ’์„ ๊ฐœ๋ณ„ ๋ณ€์ˆ˜์— ๋‹ด์„ ์ˆ˜ ์žˆ๊ฒŒ ํ•˜๋Š” JavaScript ํ‘œํ˜„์‹์ž…๋‹ˆ๋‹ค.

developer.mozilla.org

 

๐Ÿ“ฃ JavaScript Koans

โœ”๏ธ ๊ฒฐ๋ก ์„ ๋‚ด๋ฆฌ๊ธฐ ์ „์— ์ด๊ฒŒ ์™œ ๋งž๋Š”์ง€ ๊นŠ๊ฒŒ ๊ณ ๋ฏผํ•˜์ž.