๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๐ŸŒŒ | WEB DEV/Vanilla JS

JS_๊ธฐ๋ณธ๋ฌธ๋ฒ• (3)_๊ฐ์ฒด

by KASSID 2022. 2. 10.

๋ชฉ์ฐจ

    728x90

    ๊ฐ์ฒด

    JS๋Š” ๊ฐ์ฒด์ง€ํ–ฅ์–ธ์–ด์ด๋‹ค.

    ๊ฐ์ฒด๋Š” ํ”„๋กœํผํ‹ฐ์™€ ๋ฉ”์„œ๋“œ๋กœ ์ด๋ฃจ์–ด์ ธ ์žˆ๋Š”๋ฐ

    ๋˜ํ•œ ํ”„๋กœํผํ‹ฐ๋Š” key: value๋กœ ๊ตฌ์„ฑ์ด ๋˜์–ด์žˆ๋‹ค.

     -> key(๋ฌธ์ž์—ดor์‹ฌ๋ณผ), value(์ €์žฅํ•  ๋ฐ์ดํ„ฐ)

     

    ์ฐธ๊ณ ๋กœ ํ•จ์ˆ˜์™€ ๋ฐฐ์—ด์€ ๊ฐ์ฒด์— ์†ํ•œ๋‹ค.

    ๊ฐ์ฒด ์ƒ์„ฑ ๋ฐฉ๋ฒ•

     

    ๊ฐ์ฒด ๋ฆฌํ„ฐ๋Ÿด ๋ฐฉ์‹

    "{ }"๋กœ ๊ฐ์ฒด๋ฅผ ํ‘œํ˜„ํ•˜๋Š” ๊ฒƒ์„ ๋ฆฌํ„ฐ๋Ÿด ๋ฐฉ์‹์ด๋ผ๊ณ  ํ•œ๋‹ค.  (ํŒŒ์ด์ฌ dict์™€ ๋น„์Šท)

    const ๊ฐ์ฒด๋ช… = {
        key : value,
        ...
    };

    ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•  ๋•Œ์—๋Š” ๋ณดํ†ต const๋ฅผ ์ด์šฉํ•ด ์ƒ์ˆ˜ ์„ ์–ธ์„ ํ•ด์ค€๋‹ค.

    ๊ทธ์— ๋”ฐ๋ผ ๊ฐ์ฒด ์ž์ฒด๋ฅผ ๋ฐ”๊ฟ€ ์ˆ˜ ์—†์ง€๋งŒ,

    ๋‚ด๋ถ€์˜ ํ”„๋กœํผํ‹ฐ, ๋ฉ”์„œ๋“œ ๋“ฑ์€ ๋ณ€๊ฒฝ์ด ๊ฐ€๋Šฅํ•˜๋‹ค!

    (let์„ ์ด์šฉํ•ด ์ƒ์„ฑํ•˜๋ฉด ๊ฐ์ฒด ์ž์ฒด๋„ ๋ฐ”๊ฟ€ ์ˆ˜ ์žˆ๋‹ค.)

     

    key

    ํ”„๋กœํผํ‹ฐ๋ช…(key)์€

    ๋”ฐ์˜ดํ‘œ๋ฅผ ๋ถ™์ด์ง€ ์•Š์•„๋„ ๋˜๊ณ  ์ด๋Ÿฌํ•œ ๊ฒฝ์šฐ,

    ๋ฌธ์ž, ์–ธ๋”๋ฐ”, ๋‹ฌ๋Ÿฌ ๊ธฐํ˜ธ($) ๋กœ ์‹œ์ž‘ํ•ด์•ผํ•˜๋ฉฐ

    ํ•˜์ดํ”ˆ๊ณผ ๋„์–ด์“ฐ๊ธฐ๋Š” ํ•  ์ˆ˜ ์—†๋‹ค.

    ๋˜ํ•œ

    ํ‚ค์— ๋”ฐ์˜ดํ‘œ('')๋ฅผ ๋ถ™์—ฌ์•ผํ•˜๋Š”  ๊ฒฝ์šฐ๊ฐ€ ์žˆ๋Š”๋ฐ

    "์ˆซ์ž๋กœ ์‹œ์ž‘ํ•˜๋Š” ๊ฒฝ์šฐ, ํŠน์ˆ˜๋ฌธ์ž, ํ•˜์ดํ”ˆ, ๋„์–ด์“ฐ๊ธฐ๊ฐ€ ์žˆ๋Š” ๊ฒฝ์šฐ" ์ด๋‹ค.

     

    value

    ํ”„๋กœํผํ‹ฐ์˜ ๊ฐ’(value)์€

    ๋ชจ๋“  ์ž๋ฃŒํ˜•์ด ๊ฐ€๋Šฅํ•˜๋‹ค.

     

    - ์˜ˆ์‹œ

    const newObject = {
        title : "newtitle", //key, value
        author : "Kassid",
        "Y-M-D" : "20XX-0X-XX",
        say : function(){   //๋ฉ”์„œ๋“œ
            console.log("Hi!");
        }
    };
    
    console.log(newObject.title); //๊ฐ์ฒด ํ”„๋กœํผํ‹ฐ์— ์ ‘๊ทผ
    console.log(newObject.author);
    newObject.say(); //๋ฉ”์„œ๋“œ
    
    >>>
    newtitle
    Kassid
    Hi!

     


    ๊ฐ์ฒด์˜ CRUD

    ๊ฐ์ฒด ์ ‘๊ทผ๋ฒ• (Read)

    ๊ฐ์ฒด๋กœ์˜ ์ ‘๊ทผ์€ ์ ํ‘œ๊ธฐ๋ฒ•๊ณผ ๋Œ€๊ด„ํ˜ธํ‘œ๊ธฐ๋ฒ•์ด ์žˆ๋‹ค.

    const newObject = {
        title : "newtitle",
        author : "Kassid",
    };
    
    console.log(newObject.title); // ๋ฐฉ๋ฒ• 1
    console.log(newObject['title']); // ๋ฐฉ๋ฒ• 2
    
    >>>
    newtitle
    newtitle

    ์ ํ‘œ๊ธฐ๋ฒ• ์‚ฌ์šฉ ์‹œ

    ๋”ฐ์˜ดํ‘œ๋ฅผ ํ™œ์šฉ์„ ํ•œ key๋Š” ์ ‘๊ทผํ•  ์ˆ˜ ์—†๋‹ค.

    ์ด๋Ÿฌํ•œ ๊ฒฝ์šฐ ๋Œ€๊ด„ํ˜ธํ‘œ๊ธฐ๋ฒ•์„ ํ™œ์šฉํ•˜์—ฌ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋‹ค.

     

    ๋Œ€๊ด„ํ˜ธ ํ‘œ๊ธฐ๋ฒ• ํ™œ์šฉ์‹œ

    ์—ฐ์‚ฐ์ž๋‚˜ ๋ณ€์ˆ˜๋„ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

    let obj = {
        'next Year' : 2023,
    };
    
    console.log(obj['next '+'Year']) //์—ฐ์‚ฐ์„ ํ†ตํ•ด์„œ๋„ ์ ‘๊ทผ ๊ฐ€๋Šฅ
    let name = 'next Year'
    console.log(obj[name])	//๋ณ€์ˆ˜๋ฅผ ์ด์šฉํ•ด๋„ ์ ‘๊ทผ ๊ฐ€๋Šฅ
    
    --------
    2023
    2023

     

    ๋งŒ์•ฝ ์กด์žฌํ•˜์ง€ ์•Š๋Š” ํ”„๋กœํผํ‹ฐ์— ์ ‘๊ทผํ•˜๋ฉด undefined๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋‹ค.

     

    ํ”„๋กœํผํ‹ฐ ์ถ”๊ฐ€, ์ œ๊ฑฐ , ์ˆ˜์ • (C, U, D)

    - ์ถ”๊ฐ€

    ๊ฐ์ฒด.key = value ํ˜น์€ ๊ฐ์ฒด['key'] = value ๋ฅผ ์ด์šฉํ•˜์—ฌ

    ์ƒˆ๋กœ์šด ํ”„๋กœํผํ‹ฐ๋ฅผ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ๋‹ค. (๊ฐ์ฒด์— ๋Œ€ํ•œ ์ž‘์—…๋„ ๊ฐ€๋Šฅ)

    const newObject = {
        title : "newtitle", //key, value
        author : "Kassid",
    };
    
    // ํ”„๋กœํผํ‹ฐ ์ถ”๊ฐ€
    newObject.content = "newContents";
    console.log(newObject.content);
    
    // ๊ฐ์ฒด ์ถ”๊ฐ€
    newObject.get = function(){ //ํ•จ์ˆ˜ ๊ฐ์ฒด๋ฅผ ์ถ”๊ฐ€
        console.log('Hello!');
    };
    newObject.get();
    
    >>>
    newContents
    Hello!

     

    - ์ˆ˜์ •

    ์ˆ˜์ • ์—ญ์‹œ ๊ฐ์ฒด.key = value ํ˜น์€ ๊ฐ์ฒด['key'] = value ๋ฅผ ์ด์šฉํ•œ๋‹ค.

    const newObject = {
        title : "newtitle", //key, value
        author : "Kassid",
    };
    
    // ํ”„๋กœํผํ‹ฐ ์ˆ˜์ •
    newObject.title = "My Post";
    console.log(newObject.title);
    
    >>>
    My Post

     

    - ์ œ๊ฑฐ

    ์ œ๊ฑฐ๋ฅผ ํ•  ๋•Œ์—๋Š” "delete"๋ฅผ ์ด์šฉํ•œ๋‹ค.

    ์ œ๊ฑฐ๋œ ํ”„๋กœํผํ‹ฐ์— ์ ‘๊ทผํ•˜๋ฉด undefined๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋‹ค.

    const newObject = {
        title : "newtitle", //key, value
        author : "Kassid",
    };
    
    // ํ”„๋กœํผํ‹ฐ ์ œ๊ฑฐ
    delete newObject.author;
    console.log(newObject.author);
    
    >>>
    undefined //์กด์žฌํ•˜์ง€ ์•Š์œผ๋ฏ€๋กœ undefined

     

    ๊ฐ์ฒด ์•ˆ์— ๊ฐ์ฒด

    const newObject = {
        title : "newtitle",
        author : "Kassid",
        say : function(){
            console.log("Hi!");
        },
        moreInfo : {
            date : "2022-02-09",
            pages : 1
        }
    };
    
    console.log(newObject.moreInfo);
    console.log(newObject.moreInfo.date);
    
    >>>
    { date: '2022-02-09', pages: 1 }
    2022-02-09

    ์ ‘๊ทผ ๋ฐฉ์‹์€ ์ ํ‘œ๊ธฐ๋ฒ• ํ˜น์€ ๋Œ€๊ด„ํ˜ธ ํ‘œ๊ธฐ๋ฒ•์œผ๋กœ ํŠธ๋ฆฌ๋ฅผ ๋งŒ๋“ ๋‹ค. 

    ex) obj.Info.name  OR obj.Info['name']

     

    this

    const newObject = {
        title : "newtitle",
        author : "Kassid",
        show : function() {
            console.log("title :",this.title);
            console.log("author :",this.author);
        }
    };
    
    nObject.show();
    
    >>>
    title : newtitle
    author : Kassid

    ํŒŒ์ด์ฌ์˜ self์™€ ๋น„์Šทํ•œ ๊ฐœ๋…์œผ๋กœ

    JS์—๋Š” this๊ฐ€ ์žˆ๊ณ  ํ˜„์žฌ ๊ฐ์ฒด๋ฅผ ๋œปํ•œ๋‹ค!

     

    get, set

    JS์—์„œ ๊ฐ์ฒด์˜ ํ”„๋กœํผํ‹ฐ์— ์ ‘๊ทผํ•˜๋Š” ๋ฐฉ๋ฒ•์œผ๋กœ ์ œ๊ณตํ•˜๋Š” ๊ฒƒ์ด๋‹ค.

     

    (๊ฐ์ฒด ์ง€ํ–ฅ์˜ ์บก์Šํ™” ์ปจ์…‰?)

     


    ๊ฐ์ฒด ๋น„๊ตํ•˜๊ธฐ

    ๊ฐ์ฒด ๊ฐ„์˜ ๋น„๊ต์‹œ ์ฃผ์˜ํ•  ์ ์ด ์žˆ๋‹ค.

    1 === 1
    '1' === '1'
    undefined === undefined
    
    >>>
    true
    true
    true

    ๋Œ€๋ถ€๋ถ„์˜ ๊ฒฝ์šฐ ์œ„์™€ ๊ฐ™์ด ๋น„๊ต๋ฅผ ํ•  ๊ฒฝ์šฐ true๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋‹ค.

     

    ๊ทธ๋Ÿฌ๋‚˜ ๊ฐ์ฒด๋Š” ๋ณ€์ˆ˜์— ํ• ๋‹นํ•˜์ง€ ์•Š๊ณ  ๋ฐ”๋กœ ๋น„๊ต๋ฅผ ํ•˜๋Š” ๊ฒฝ์šฐ

    false๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋‹ค. (ํ•จ์ˆ˜, ๋ฐฐ์—ด๋„ ์—ญ์‹œ ํฌํ•จ)

    {} === {};
    {a : 1} === {a : 1};
    
    >>>
    false
    
    --------
    // ๋ณ€์ˆ˜์— ํ• ๋‹นํ•œ ํ›„ ๋น„๊ต
    let obj = {a : 1}
    obj === obj;
    
    >>>
    true

    ์ด๋Š” { }๋กœ ๋ฌถ๋Š” ๊ฒƒ ์ž์ฒด๊ฐ€ ์ƒˆ๋กœ์šด ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•˜๋Š” ๊ฒƒ์ด๊ธฐ ๋•Œ๋ฌธ์—

    ๋‘˜์€ ์„œ๋กœ ๋‹ค๋ฅธ ๊ฐ์ฒด๊ฐ€ ๋˜๋Š” ๊ฒƒ์ด๋‹ค.

    ๋”ฐ๋ผ์„œ ๋ณ€์ˆ˜์— ํ• ๋‹น์„ ํ•œ ํ›„ ๋น„๊ตํ•ด์•ผ ์›ํ•˜๋Š” ๊ฒฐ๊ณผ๋ฅผ ์–ป์„ ์ˆ˜ ์žˆ๋‹ค.

     

    ๊ฐ์ฒด ๊ฐ„ ์ฐธ์กฐ๊ด€๊ณ„

    const a = {
    	title : 'newTitle',
    }
    const b = a;
    console.log(b.title);
    
    >>>
    newTitle
    
    --------
    a.title = 'newTitle2';
    console.log(b.title);
    
    >>>
    newTitle2 //a๋ฅผ ์ˆ˜์ •ํ•˜์˜€์ง€๋งŒ b์˜ ํ”„๋กœํผํ‹ฐ๋„ ๋ณ€๊ฒฝ๋จ

    ์ด๋Š” ์–•์€ ๋ณต์‚ฌ๊ฐ€ ์ด๋ฃจ์–ด์ง€๋Š” ๊ฒƒ์ด๊ธฐ ๋•Œ๋ฌธ์— "์ฃผ์†Œ๊ฐ’์„ ๋ณต์‚ฌํ•˜๋Š” ๊ฒƒ"์ด๋‹ค.

    ์ด๋Ÿฌํ•œ ์ฐธ์กฐํ•˜๋Š” ๊ฐ’์ด ๊ฐ™์€ a, b์˜ ๊ด€๊ณ„๋ฅผ ๊ฐ์ฒด ๊ฐ„์— ์ฐธ์กฐ๊ด€๊ณ„๊ฐ€ ์žˆ๋‹ค๊ณ  ํ•œ๋‹ค.

     

    ๊ฐ์ฒด๊ฐ€ ์•„๋‹Œ ๊ฐ’๋“ค์€ ์ด๋Ÿฌํ•œ ๊ด€๊ณ„๋ฅผ ๊ฐ€์ง€์ง€ ์•Š๋Š”๋‹ค.

    let a = 'apple';
    b = a;
    a = 'banana';
    console.log(a);
    console.log(b);
    
    >>> banana
    >>> apple

     

    ์œ„๋ฅผ ํ†ตํ•ด b์— a๋ฅผ ํ• ๋‹นํ•˜๊ณ  a์— ์ƒˆ๋กœ์šด ๊ฐ’์„ ๋„ฃ์„ ๊ฒฝ์šฐ

    a๋Š” ์ƒˆ๋กœ์šด ๋ฉ”๋ชจ๋ฆฌ ๊ณต๊ฐ„์„ ํ• ๋‹นํ•˜๋Š” ๊ฒƒ์„ ์•Œ ์ˆ˜ ์žˆ๋‹ค.

     


    class

    ๋‹ค๋ฅธ ๊ฐ์ฒด์ง€ํ–ฅ ์–ธ์–ด๋“ค๊ณผ ์œ ์‚ฌํ•œ class๋ฌธ๋ฒ•์ด ์žˆ๋‹ค!

     

    constructor๋Š” ์ƒ์„ฑ์ž์ด๋‹ค.

    class Product {
        constructor(subject, name, price) {
            this.subject = subject;
            this.name = name;
            this.price = price;
        }
    }
    const apple = new Product('Fruits','apple',1000);
    console.log(apple);
    
    >>>
    Product { subject: 'Fruits', name: 'apple', price: 1000 }

     

    ์ƒ์†, ๋‹คํ˜•์„ฑ๋„ ์ง€์›ํ•œ๋‹ค.

    class Product {
        constructor(name, price) {
            this.name = name;
            this.price = price;
        }
        show() {
            console.log('Unknown subject');
        }   
    }
    
    class Food extends Product {
        constructor(subject, name, price, color){
            super(name,price);
            this.subject = subject;
            this.color = color;
        }
        show() {
            console.log("suject :",this.subject, "name :",this.name, "price :",this.price, "color :",this.color);
            return this;
        }
    }
    
    
    const apple = new Food("Fruits", "apple", 1000, "red"); //new ํ•จ์ˆ˜()๋ฅผ ์‚ฌ์šฉํ•ด ๊ฐ์ฒด๋กœ ์„ ์–ธํ•  ์ˆ˜ ์žˆ๋‹ค.
    apple.show()

    extends๋ฅผ ์ด์šฉํ•ด์„œ ์ƒ์†์„ ๋ฐ›์„ ์ˆ˜ ์žˆ๋‹ค.

    ๋˜ํ•œ functionํ‚ค์›Œ๋“œ ์—†์ด ๊ทธ๋ƒฅ ๋ฐ”๋กœ ๋ฉ”์„œ๋“œ๋ฅผ ์„ ์–ธํ•œ๋‹ค.

    ๋‹คํ˜•์„ฑ ๋ถ€๋ถ„์—์„œ๋Š”

    ์ธ์ž ๊ฐœ์ˆ˜ ๋“ฑ์— ์ƒ๊ด€์—†์ด ๊ทธ๋ƒฅ ํ•จ์ˆ˜๊ฐ€ ๋ฎ์–ด์”Œ์›Œ์ง„๋‹ค.

     

     

    ๋Œ“๊ธ€