[D+38] ν¨μ κ³ κΈ, κ°μ²΄
κ΅λΉμ§μ D+38
- ν¨μ κ³ κΈ, κ°μ²΄ -
ν¨μκ³ κΈ
• Arrow ν¨μ
- νμ΄νν¨μλΌκ³ λ λΆλ¦¬λ©° μ ν΅μ μΈ ν¨μ ννλ°©μμ κ°λ¨νκ² λ§λ μκ°μ½λμ΄λ€.
- νμ΄νν¨μλ ννλ°©μμ΄μ§ λ©μλκ° μλλ€.
// κΈ°λ³Έ ν¨μ ννλ°©μ
const numbers = [ 10, 20, 30, 40, 50];
const newNumbers = numbers.map(function(value, index, array) {
return value + 5;
});
console.log(newNumbers);
// νμ΄ν ν¨μ ννλ°©μ
const numbers = [10, 20, 30, 40, 50];
const newNumbers = numbers.map((value, index, array) => value + 5);
console.log(newNumbers);
• Method Chaining
- μμκ°μ²΄λ₯Ό μ¬μ©ν΄μ λ©μλλ₯Ό μ°μμ μΌλ‘ νΈμΆνλ μ½λ©κΈ°λ²μ΄λ€.
- λ©μλμ λν΄ νλ² μ€νλ κ²°κ³Όλ¬Όμ μ»΄νμΌλ¬κ° μμλ³μλ₯Ό μ¬μ©ν΄ λ΄μλ λ€μμ κ·Έλ€μ '.' λ€μ λΆμ΄μλ λ©μλλ₯Ό μ€ννλ λ°©μμ΄λ€.
- λ¨, κ³Όλν λ©μλ 체μ΄λμ μ½λμ 볡μ‘λλ₯Ό μ€νλ € μ¬λ¦¬κΈ° λλ¬Έμ 3λ²μ λκΉμ§λ§ μ¬μ©νλ κ²μ΄ μ’λ€.
// λ°°μ΄μ κ° μμμ 5λ₯Ό λν λ€ 30λ³΄λ€ ν° κ°λ§ λ½μλ΄μμ€.
const numbers = [27, 40, 25, 30, 77];
const newNumbers = numbers.map((value) => value + 5)
.filter((value) => value > 30);
console.log(newNumbers);
// [32, 45, 35, 82]
• μ¦μ νΈμΆ
- μμκ°μ²΄λ₯Ό μ¬μ©ν΄μ ν¨μμ μ μΈκ³Ό λμμ νΈμΆνλ κΈ°λ²μ΄λ€.
- 볡μκ°μ <script>μ λν λ 립μ±μ 보μ₯νλ€.
(function dummy(x)
{
console.log('Dummy!');
})(10);
κ°μ²΄
• κ°λ
- ν리미ν°λΈ νμ μ μ μΈν λλ¨Έμ§ λ°μ΄ν° νμ μ λ² μ΄μ€ μΈμ€ν΄μ€μ΄λ€.
- μλ°μ€ν¬λ¦½νΈμμ κ±°μ λͺ¨λ κ°μ²΄λ κΈ°λ³ΈμΌλ‘ Objectμ νμ μΈμ€ν΄μ€ μ΄λ€.
- "{ }"λ‘ λ°μ΄ν°λ€μ κ°μΈλ©° key-valueνμμΌλ‘ λ°μ΄ν°λ₯Ό κ°μ§κ³ μλ€.
- key-valueνμμμ keyλ κ°μ²΄ μμμ μ λν¬ν κ°μ΄μ΄μΌνλ€.
• κ°μ²΄νμ μ μΈ λ° νΈμΆ
- "{ }"μμ key-value νμμΌλ‘ λ£μ΄μ μ μΈν΄μ€λ€.
- κ°μ²΄μμ valueκ°μλ primitive type λΏλ§ μλλΌ κ°μ²΄νλ λ€μ΄κ° μ μλ€.
- κ°μ²΄μμ κ°μ νΈμΆνκ³ μΆμλμλ "κ°μ²΄λͺ ['keyμ΄λ¦']" λλ "κ°μ²΄λͺ .keyμ΄λ¦"μΌλ‘ κ°μ λΆλ¬μ¬ μ μλ€.
const product =
{
name : 'mouse',
type : 'wireless',
color : 'black',
buttons : 6,
scroll : true
};
console.log(product.name);
console.log(product['type']);
• κ°μ²΄ μμ±μ λ³κ²½
- μμ±λ³κ²½ : λ³κ²½νκ³ μΆμ μμ±μ λΆλ¬μ κ°μ μλ‘ μ λ ₯νλ©΄ λλ€.
- μμ± μΆκ° : μμ± λ³κ²½κ³Ό κ°μ λ°©μμ΄λ©° μμ±μ΄ μλ€λ©΄ μλμΌλ‘ μΆκ°λλ€.
- μμ±μ μμ : deleteλ₯Ό μ¬μ©ν΄ μμ ν μ μλ€.
// μμ± λ³κ²½
product.buttons = 8;
// μμ± μΆκ°
product.ligth = true;
// μμ± μμ
delete product.light;
• κ°μ²΄ν λ©μλ
- κ°μ²΄μ ν¬ν¨λλ ν¨μλ₯Ό μλ―Ένλ€.
- this : ν΄λΉλ©μλλ₯Ό κ°μ§κ³ μλ κ°μ²΄μ μ°Έμ‘°κ°μ λνλΈλ€.
- νμ΄ν ν¨μμ κ²½μ° thisλ₯Ό μ¬μ©ν μ μκΈ° λλ¬Έμ κ°κΈμ λ©μλμμλ μ¬μ©νμ§ μλλ€. → κΈ°μ‘΄ ν¨μμ κ²½μ° thisλ₯Ό μ½μμ μ°μΌλ©΄ ν΄λΉ λ©μλλ₯Ό κ°μ§κ³ μλ κ°μ²΄κ° λμ€μ§λ§, νμ΄νν¨μμ κ²½μ° thisλ₯Ό μ½μμ μ°μ΄μ νμΈν΄λ³΄λ©΄ λ©μλλ₯Ό μμ νκ³ μλ κ°μ²΄κ° μλλΌ κ°μ₯ μμκ°μ²΄μΈ windowλ₯Ό λνλ΄κΈ° λλ¬Έμ thisλ₯Ό μ¬μ©ν μ μλ€.
const product =
{
name : 'mouse',
type : 'wireless',
color : 'black',
buttons : 6,
scroll : true,
getName : function() {
return this.name;
// getNameμ μμ νκ³ μλ κ°μ²΄ productμ name --> 'mouse'
}
};
console.log(product.getName()); // mouse
• κ°μ²΄λ₯Ό λ§λλ μ¬λ¬κ°μ§ λ°©λ² ( Object literal )
- ES6μμ Object literalμ΄λΌλ κ°μ²΄λ₯Ό λ§λλ μλ‘μ΄ λ°©λ²μ΄ λ±μ₯νμλ€.
1. μμ±(property) μΆμ½
- μμ±κ°μΌλ‘ λ³μλ₯Ό μ¬μ©νλ κ²½μ° λ³μμ΄λ¦κ³Ό μμ±μ΄λ¦μ΄ κ°λ€λ©΄ ν€λ₯Ό μλ΅ν μ μλ€.
2. λ©μλ μΆμ½
- λ©μλμ μ΄λ¦κ³Ό ν€λ₯Ό λμΌν μ΄λ¦μΌλ‘ μ¬μ©ν κ²½μ°μ λ©μλλ₯Ό μΆμ½νμ¬ ννν μ μλ€.
3. κ³μ°λ μμ±μ΄λ¦
- ννμμ μ¬μ©ν΄ keyλ₯Ό λμ μΌλ‘ μμ±ν μ μλ€.
4. κ°μ²΄μ μν
- Objectλ λ°°μ΄κ³Ό λ¬λ¦¬ μΈλ±μ€λ₯Ό κ°μ§κ³ μμ§ μκΈ° λλ¬Έμ μμμ±μ΄ μλ€λ νΉμ§μ κ°μ§κ³ μμ΄ κΈ°μ‘΄ forλ¬Έμ μ¬μ©ν μ μλ€.
- for~inμ μ¬μ©ν΄μ λ§μΉ λ°°μ΄μ²λΌ λ°λ³΅λ¬Έμ μ¬μ©ν μ μλ€.
• Primitive typeμ Object typeμΌλ‘ λ³ννκΈ°
κΈ°μ‘΄μ μ°λ¦¬κ° μ¬μ©νλ Numberνκ³Ό κ°μ ν리미ν°λΈ νμ κ°μ κ²½μ° μ€νμ λ©λͺ¨λ¦¬λ₯Ό μ‘μμ λ°μ΄ν°κ°μ λ£μ΄μ κ°μ 보κ΄νλ€.
κ·Έλ°λ° λ°μ΄ν°κ°μ μ€νμ΄ μλ νμλ€κ° μ‘κ³ μΆμ λμλ newλΌλ ν€μλλ₯Ό μ¬μ©ν΄ λ°μ΄ν° κ°μ νμλ€κ° μ μ₯ν μ μλ€.
λ§μ½ κ°μ²΄ μμ μλ κ°μ λΆλ¬μ€κ³ μΆμ λμλ valueOfλ₯Ό μ¬μ©ν΄ κ°μ²΄μμ μλ κ°μ λΆλ¬μ¬ μ μλ€.
• Primitive typeμ μΌμμ Object type λ³ν
μ°λ¦¬κ° str.lengthμμ .lengthλ strμ λ©μλλ₯Ό μλ―Ένλ€.
κ·Έλ°λ° κΈ°λ³Έ μλ£ν κ°μ κ²½μ°λ λ©μλλ μμ±μ κ°μ§ μ μλ€.
νμ§λ§ μ°λ¦¬κ° μΌμͺ½μ μ¬μ§μ²λΌ μ½λλ₯Ό μμ±ν΄μ£Όλ©΄ μ»΄νμΌ νλ©΄μ μ»΄νμΌλ¬κ° strμμ λ¬Έμμ΄μ μ λ ₯ν λ newλ₯Ό λΆμ¬μ strλ₯Ό μΌμμ μΌλ‘ κ°μ²΄νμμΌμ λ©μλλ₯Ό μ¬μ©ν μ μκ²ν΄ κ°λ°μμκ² νΈμμ±μ μ 곡νλ€.