μ‹œλ„/ꡭ비지원

[D+38] ν•¨μˆ˜ κ³ κΈ‰, 객체

πŸ‡λ°•λ΄‰λ΄‰πŸ‡ 2022. 11. 15. 05:24

 

 

ꡭ비지원 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λ₯Ό μΌμ‹œμ μœΌλ‘œ κ°μ²΄ν™”μ‹œμΌœμ„œ λ©”μ†Œλ“œλ₯Ό μ‚¬μš©ν•  수 μžˆκ²Œν•΄ κ°œλ°œμžμ—κ²Œ νŽΈμ˜μ„±μ„ μ œκ³΅ν•œλ‹€.

λ°˜μ‘ν˜•