[HTML/CSS/JS] ES6 ν•¨μˆ˜ κΈ°λŠ₯

ES6의 ν•¨μˆ˜

JavaScript ES6의 ν•¨μˆ˜ κΈ°λŠ₯κ³Ό μΆ”κ°€λœ 것을 μ•Œμ•„λ³Έλ‹€.

νƒ€μž… 선언이 지원 x

Function log(message){
	console.log(message);
}

μœ„μ™€ 같이 λ©”μ‹œμ§€λ₯Ό 좜λ ₯ν•˜λŠ” ν•¨μˆ˜λ₯Ό λ§Œλ“ λ‹€κ³  ν•˜μž.
μžλ°”μŠ€ν¬λ¦½νŠΈλŠ” ν•¨μˆ˜λ₯Ό μ„ μ–Έν•  λ•Œ 인자의 νƒ€μž… 선언이 μ§€μ›λ˜μ§€ μ•ŠλŠ”λ‹€.
κ·ΈλŸ¬λ―€λ‘œ, μœ„μ˜ messageλΌλŠ” νŒŒλΌλ―Έν„°λ₯Ό λ§Œλ“€ λ•Œ ν•¨μˆ˜μ˜ μΈν„°νŽ˜μ΄μŠ€λ§Œ 봐선 κ°œλ°œμžκ°€ μ–΄λ–€ νƒ€μž…μ„ μ›ν•˜κ³  μ„ μ–Έν–ˆλŠ”μ§€ μ•Œ 수 μ—†λ‹€.
μ΄λŸ¬ν•œ νƒ€μž… 선언은 νƒ€μž… 슀크립트둜 λ„˜μ–΄κ°€μ•Ό μ§€μ›λœλ‹€.

Default Parameters

ES6둜 λ„˜μ–΄μ˜€λ©° νŒŒλΌλ―Έν„°μ— μ΄ˆκΉƒκ°’μ„ 쀄 수 μžˆλŠ” Default Parametersκ°€ μΆ”κ°€λ˜μ—ˆλ‹€.

Function testFunc(param1, param2){
  console.log(`${param1} ${param2}`);
}

μœ„μ²˜λŸΌ 두 개의 인자λ₯Ό 좜λ ₯ν•˜λŠ” ν•¨μˆ˜κ°€ μžˆμ„ λ•Œ, νŒŒλΌλ―Έν„°μ˜ 값이 μ—†λ‹€λ©΄ 쑰건문 등을 κ±Έμ–΄μ„œ λ”°λ‘œ μ²˜λ¦¬ν•΄ 쀬어야 ν–ˆλ‹€.
ν•˜μ§€λ§Œ λ””ν΄νŠΈ νŒŒλΌλ―Έν„°μŠ€μ˜ κΈ°λŠ₯을 μ‚¬μš©ν•˜λ©΄ μ΄ˆκΉƒκ°’μ„ 미리 μ„ μ–Έν•  수 μžˆλ‹€.

Function testFunc(param1, param2 = "Default Setting"){
  console.log(`${param1} ${param2}`);
}

μœ„μ²˜λŸΌ μ„ μ–Έν•΄ μ£Όλ©΄, param2의 값이 λ“€μ–΄μ˜€μ§€ μ•ŠλŠ”λ‹€λ©΄ λ””ν΄νŠΈ 값이 λ“€μ–΄κ°€κ²Œ λœλ‹€.

Rest Parameters

Rest Parameters μ—­μ‹œ ES6에 μΆ”κ°€λœ κΈ°λŠ₯이닀.
ν•¨μˆ˜μ˜ 인자λ₯Ό μ—¬λŸ¬ 개둜 λ°›κ³  싢을 λ•Œ, ... 인자 μ΄λ¦„μœΌλ‘œ μ„ μ–Έν•˜λ©΄ 배열을 μ—¬λŸ¬ 개 받을 수 μžˆλ‹€.

Function printAll(…args){
	for(const arg of args){
		console.log(arg);
	}
}

μœ„ 식과 같이 ... args둜 λ°›κ²Œ λœλ‹€λ©΄, args둜 μ—¬λŸ¬ 개의 인자λ₯Ό 받을 수 있고, for 문을 톡해 μˆœνšŒν•  수 μžˆλ‹€.

Arrow Function

기쑴의 ν•¨μˆ˜ 선언에 λŒ€ν•œ μ½”λ“œ 양을 μ€„μ—¬μ£ΌλŠ” Arrow Function이 μžˆλ‹€.

Function testFunc(param1, param2){
  console.log(`${param1} ${param2}`);
}

μœ„μ—μ„œ μ˜ˆμ‹œλ‘œ λ“€μ—ˆλ˜ ν•¨μˆ˜λ₯Ό Arrow Function으둜 μˆ˜μ •ν•˜μž.

Const testFunc = (param1, param2) => console.log(`${param1} ${param2}`);

μœ„μ™€ 같은 ν˜•μ‹μœΌλ‘œ μ½”λ“œ 양을 μ€„μ—¬μ„œ ν‘œν˜„ν•  수 μžˆλ‹€.
ν•¨μˆ˜ μ•ˆμ— μ—¬λŸ¬ μ€„μ˜ λ‚΄μš©μ΄ 블둝 μ•ˆμ— λ“€μ–΄κ°€ μžˆλ‹€λ©΄ return ν‘œμ‹œκ°€ ν•„μš”ν•˜λ‹€.