관리 메뉴

Hey Tech

[JavaScript] μƒμ„±μž ν•¨μˆ˜ ν™œμš©λ²•μ— λŒ€ν•΄ μ•Œμ•„λ³΄μž! λ³Έλ¬Έ

SW 개발/Vanilla JS

[JavaScript] μƒμ„±μž ν•¨μˆ˜ ν™œμš©λ²•μ— λŒ€ν•΄ μ•Œμ•„λ³΄μž!

Tony Park (ν† λ‹ˆ) 2021. 12. 1. 08:27
728x90
λ°˜μ‘ν˜•

πŸ’‘λͺ©ν‘œ

JavaScriptμ—μ„œ μƒμ„±μž ν•¨μˆ˜μ˜ ν™œμš©λ²•μ— λŒ€ν•΄ μ΄ν•΄ν•œλ‹€.

μƒμ„±μž ν•¨μˆ˜ μ •μ˜

Java, Python λ“± μ—¬λŸ¬ ν”„λ‘œκ·Έλž˜λ° μ–Έμ–΄μ—μ„œ μ‚¬μš©ν•˜λŠ” 클래슀(Class)κ°€ JavaScriptμ—μ„œ 곧 μƒμ„±μž(Constructor)μž…λ‹ˆλ‹€.

JavaScriptμ—μ„œλŠ” ν•¨μˆ˜λͺ…μ˜ 첫 κΈ€μžλ₯Ό λŒ€λ¬Έμžλ‘œ ν‘œμ‹œν•˜μ—¬ μƒμ„±μžλ₯Ό μ •μ˜ν•©λ‹ˆλ‹€.

일반적인 ν΄λž˜μŠ€μ™€ λ§ˆμ°¬κ°€μ§€λ‘œ μƒμ„±μž ν•¨μˆ˜λŠ” ν•„λ“œ, ν•¨μˆ˜λ₯Ό ν¬ν•¨ν•©λ‹ˆλ‹€.

μ˜ˆμ‹œ μ½”λ“œ

μ•„λž˜ μ˜ˆμ‹œ μ½”λ“œμ™€ ν•¨κ»˜ μ‚΄νŽ΄λ³΄κ² μŠ΅λ‹ˆλ‹€.

// ν•¨μˆ˜λͺ…μ˜ 첫 κΈ€μžκ°€ λŒ€λ¬ΈμžμΈ 경우 = μƒμ„±μž ν•¨μˆ˜
function ConstructorExample(){
    // ----ν•„λ“œ μ‹œμž‘----
    this.name = 'Tony';
    this.age = 20; // 멀버 λ³€μˆ˜(ν•„λ“œ)
    // ----ν•„λ“œ 끝----

    // ----멀버 ν•¨μˆ˜ μ‹œμž‘--- 
    this.functionA = function(){
        console.log("function A");
    }
    
    this.functionB = () =>{
        console.log("function B");
    }
    // ----멀버 ν•¨μˆ˜ 끝----
}

ν•„λ“œ(field)μ—μ„œλŠ” 멀버 λ³€μˆ˜ μ •μ˜λ₯Ό μœ„ν•΄ thisλ₯Ό ν™œμš©ν•˜μ—¬ λ³€μˆ˜λͺ… μ•žμ— μž…λ ₯ν•΄ μ€λ‹ˆλ‹€.

thisλŠ” 객체 자기 μžμ‹ μ„ κ°€λ¦¬ν‚€λŠ” λ¬Έλ²•μž…λ‹ˆλ‹€.

멀버 ν•¨μˆ˜ μ—­μ‹œ ν•¨μˆ˜λͺ… μ•žμ— thisλ₯Ό λΆ™μ—¬ μ •μ˜ν•©λ‹ˆλ‹€.

μƒμ„±μž ν•¨μˆ˜ 호좜의 잘λͺ»λœ μ˜ˆμ‹œ

// μƒμ„±μž ν•¨μˆ˜λŠ” ν•¨μˆ˜ ν˜ΈμΆœν•˜λ“―μ΄ μ‚¬μš©ν•˜μ§€ μ•ŠμŒ
//ConstructorExample();

μƒμ„±μž ν•¨μˆ˜λŠ” 일반적인 ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•˜λ“―μ΄ μ‚¬μš©ν•˜μ§€ μ•ŠλŠ”λ‹€λŠ” 점을 μœ λ…ν•΄ μ£Όμ„Έμš”.

객체 생성

// 객체 생성
let obj = new ConstructorExample();

μƒμ„±μž ν•¨μˆ˜λ₯Ό ν™œμš©ν•˜μ—¬ μƒˆλ‘œμš΄ 객체λ₯Ό 생성해 μ€λ‹ˆλ‹€.

멀버 λ³€μˆ˜ 호좜

// 멀버 λ³€μˆ˜ 호좜
console.log("이름: ", obj.name);
console.log("λ‚˜μ΄: ", obj.age);

 

 

멀버 λ³€μˆ˜λŠ” μƒμ„±ν•œ 객체λͺ… 뒀에 dot(.)을 λΆ™μ—¬μ£Όκ³  λ³€μˆ˜λͺ…을 μž…λ ₯ν•˜λ©΄ ν˜ΈμΆœν•  수 μžˆμŠ΅λ‹ˆλ‹€.

μ‹€ν–‰κ²°κ³Ό

이름:  Tony
λ‚˜μ΄:  20

멀버 ν•¨μˆ˜ 호좜

// 멀버 ν•¨μˆ˜ 호좜
obj.functionA();
obj.functionB();

멀버 ν•¨μˆ˜ μ—­μ‹œ μƒμ„±ν•œ 객체λͺ… 뒀에 dot(.)을 λΆ™μ—¬μ£Όκ³  ν•¨μˆ˜λͺ…을 μž…λ ₯ν•˜λ©΄ ν˜ΈμΆœν•  수 μžˆμŠ΅λ‹ˆλ‹€.

μ‹€ν–‰κ²°κ³Ό

function A
function B

μ˜€λŠ˜μ€ JavaScriptμ—μ„œ μƒμ„±μž ν•¨μˆ˜μ˜ ν™œμš©λ²•μ— λŒ€ν•΄ μ•Œμ•„λ΄€μŠ΅λ‹ˆλ‹€.

ν¬μŠ€νŒ… λ‚΄μš©μ— 였λ₯˜κ°€ μžˆλ‹€λ©΄ μ•„λž˜μ— λŒ“κΈ€ λ‚¨κ²¨μ£Όμ„Έμš”.

그럼 μ˜€λŠ˜λ„ 즐겁고 멋진 ν•˜λ£¨ λ§Œλ“œμ‹œκΈΈ λ°”λžλ‹ˆλ‹€.

κ³ λ§™μŠ΅λ‹ˆλ‹€ :)

 

728x90
λ°˜μ‘ν˜•