ABOUT ME

Today
Yesterday
Total
  • [Javascript] ๊ฐ์ฒด, ๋ฐฐ์—ด, ์›์‹œํƒ€์ž…, ์ฐธ์กฐํƒ€์ž…
    ์›น/JavaScript 2023. 1. 10. 11:54
    ๋ฐ˜์‘ํ˜•

    ๐Ÿ’ก ๊ฐ์ฒด์™€ ๋ฐฐ์—ด์€ ์›์‹œํƒ€์ž…์ด ์•„๋‹Œ ์ฐธ์กฐ reference ํƒ€์ž…

    • ์•ž์„œ ๋‹ค๋ฃฌ ์ž๋ฃŒํ˜•๋“ค์€ ์›์‹œ primitive ํƒ€์ž…
    • ๋‘˜์˜ ์ฐจ์ด๋Š” ๋‹ค์Œ ๊ฐ•์—์„œ ๋‹ค๋ฃฐ ๊ฒƒ

     

    I. ๊ฐ์ฒด ๋ฏธ๋ฆฌ๋ณด๊ธฐ

    • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ์›์‹œ ํƒ€์ž…์ด ์•„๋‹Œ ๋ชจ๋“  ๋ฐ์ดํ„ฐ๋Š” ๊ทผ๋ณธ์ ์œผ๋กœ ๊ฐ์ฒด
    • ๋ณตํ•ฉ์ ์ธ ์ •๋ณด๋ฅผ ํ”„๋กœํผํ‹ฐ property - (ํ‚ค์™€ ๊ฐ’์˜ ์กฐํ•ฉ)์œผ๋กœ ์ €์žฅํ•˜๋Š” ์ž๋ฃŒํ˜•
    const objName = {
    key1: value1,
    key2: value2,
    ...
    };
    // โš ๏ธ ๋ธ”๋ก์ด ์•„๋‹˜!
     
     

    1. ํ”„๋กœํผํ‹ฐ ์ ‘๊ทผ

    ๐Ÿ’ก ์†์„ฑ๊ฐ’์— ์ ‘๊ทผํ•˜๋Š” ๋‘ ๋ฐฉ๋ฒ•

     

    //1. ๊ฐ์ฒด๋ช….key
    console.log(
      person1.name,
      person1.age,
      person1.married
    );
    
    //2 ๊ฐ์ฒด๋ช…[key]
    console.log(
      person1['name'], // ์†์„ฑ๋ช…์„ string์œผ๋กœ
      person1['age'],
      person1['married'],
    );

    ๐Ÿ’ก ์กด์žฌํ•˜์ง€ ์•Š๋Š” ํ‚ค๋กœ ์ ‘๊ทผ์‹œ undefined ๋ฐ˜ํ™˜

    console.log(person1.birthdate);
    console.log(person1['job']);

     

    ๐Ÿ’ก (ํ‚ค) in (๊ฐ์ฒด) - ํŠน์ • ํ‚ค ํฌํ•จ ์—ฌ๋ถ€ ํ™•์ธ

    console.log(
    'age' in person1,
    'job' in person1
    );

    2. ํ”„๋กœํผํ‹ฐ ์ˆ˜์ • ๋ฐ ์ถ”๊ฐ€

    // ํŠน์ • ํ”„๋กœํผํ‹ฐ์˜ ๊ฐ’ ๋ณ€๊ฒฝ
    person1.age = 26;
    person1['married'] = true
    โ€‹
    console.log(person1);

     

    // ์ƒˆ ํ”„๋กœํผํ‹ฐ ์ถ”๊ฐ€
    person1.job = 'developer';
    person1['bloodtype'] = 'AB'
    โ€‹
    console.log(person1);
    • ๐Ÿ’ก const์ž„์—๋„ ๊ทธ ๋‚ด์šฉ์€ ์ˆ˜์ •ํ•  ์ˆ˜ ์žˆ์Œ์— ์ฃผ๋ชฉ!

    II. ๋ฐฐ์—ด ๋ฏธ๋ฆฌ๋ณด๊ธฐ

    const winners = [12, 592, 7, 48];
    const weekdays = ['์›”', 'ํ™”', '์ˆ˜', '๋ชฉ', '๊ธˆ', 'ํ† ', '์ผ'];
    โ€‹
    // ์ž๋ฃŒํ˜•์— ๊ด€๊ณ„์—†์ด ํ•œ ๋ฐฐ์—ด์— ๋„ฃ์„ ์ˆ˜ ์žˆ์Œ
    const randoms = ['ํ™๊ธธ๋™', -24, true, null, undefined];
    โ€‹
    console.log(typeof winners);
    console.log(winners, weekdays, randoms);

     

    1. ๊ฐ’๊ณผ ๊ธธ์ด ์ ‘๊ทผ

    // ํŠน์ • ์ˆœ์„œ์˜ ๊ฐ’์— ์ ‘๊ทผํ•˜๋Š” ๋ฒ• (0๋ถ€ํ„ฐ ์‹œ์ž‘)
    console.log(winners[0], weekdays[6], randoms[3]);

     

    // ๋ฐฐ์—ด์˜ ๊ธธ์ด(์š”์†Œ์˜ ๊ฐฏ์ˆ˜)๋ฅผ ์–ป๋Š” ๋ฒ•
    console.log(winners.length, weekdays.length, randoms.length);

     

    // ๋งˆ์ง€๋ง‰ ์š”์†Œ ์–ป๊ธฐ
    console.log(winners[winners.length - 1]);



    2. ์ˆ˜์ • ๋ฐ ์ถ”๊ฐ€

    const numbers = [1, 2, 3];
    โ€‹
    // ํŠน์ • ์œ„์น˜์˜ ๊ฐ’ ์ˆ˜์ •
    numbers[2] = 5;
    โ€‹
    console.log(numbers);

     

    // ๋งจ ๋์— ๊ฐ’ ์ถ”๊ฐ€
    numbers.push(10);
    โ€‹
    console.log(numbers);
    • ๐Ÿ’ก const์ž„์—๋„ ๊ทธ ๋‚ด์šฉ์€ ์ˆ˜์ •ํ•  ์ˆ˜ ์žˆ์Œ์— ์ฃผ๋ชฉ!
    • ๊ธฐํƒ€ ๋ฐฉ๋ฒ•๋“ค์€ ๋ฐฐ์—ด ์„น์…˜์—์„œ ๋ฐฐ์šฐ๊ฒŒ ๋  ๊ฒƒ



    ๐Ÿ’ก ๋ฐฐ์—ด์˜ ๋ฒ”์ฃผ ๋„ˆ๋จธ๋กœ ์ ‘๊ทผ์‹œ undefined ๋ฐ˜ํ™˜

    const winners = [12, 592, 7, 48];
    console.log(winners[winners.length]);




     

    โญ๏ธ ์ค‘์ฒฉ ์‚ฌ์šฉ ๊ฐ€๋Šฅ

    const person2 = {
    name: '๊น€๋‹ฌ์ˆœ',
    age: 23,
    languages: ['Korean', 'English', 'French'],
    education: {
    school: 'ํ•œ๊ตญ๋Œ€',
    major: ['์ปดํ“จํ„ฐ๊ณตํ•™', '์ „์ž๊ณตํ•™'],
    graduated: true,
    }
    };
    โ€‹
    console.log(person2.languages[2]);
    console.log(person2.education.graduated);

     

    const groups = [[1, 2], [3, 4, 5], [6, 7, 8, 9]];
    โ€‹
    const weapons = [
    { name: '๋กฑ์†Œ๋“œ', damage: 30, design: ['ํ™”๋ฃก๊ฒ€', '๋‡Œ์‹ ๊ฒ€'] },
    { name: 'ํ™œ', damage: 12 },
    { name: '์›Œํ•ด๋จธ', damage: 48 },
    ];
    โ€‹
    console.log(groups[1][2]);
    console.log(weapons[2].damage);
    console.log(weapons[0].design[0]);
     

    I. ๊ฐ’ ๋ณต์‚ฌ ๊ฒฐ๊ณผ ๋น„๊ต

    1. ์›์‹œ ํƒ€์ž…

    ๐Ÿ‘‰ MDN ๋ฌธ์„œ ๋ณด๊ธฐ

    • ๊ฐ’์— ์˜ํ•œ ๋ณต์‚ฌ copy by value
    let number1 = 1;
    let string1 = 'ABC';
    let bool1 = true;
    โ€‹
    let number2 = number1;
    let string2 = string1;
    let bool2 = bool1;
    โ€‹
    number2 = 2;
    string2 = '๊ฐ€๋‚˜๋‹ค';
    bool2 = false;
    โ€‹
    console.log('~1:', number1, string1, bool1);
    console.log('~2:', number2, string2, bool2);



    2. ์ฐธ์กฐ ํƒ€์ž…

    • ์ฐธ์กฐ์— ์˜ํ•œ ๋ณต์‚ฌ copy by reference
    const obj1 = {
    num: 1, str: 'ABC', bool: true
    };
    const obj2 = obj1;
    // obj2 = {}; // โš ๏ธ ์˜ค๋ฅ˜

     

    console.log('obj1:', obj1);
    console.log('obj2:', obj2);

     

    // โญ๏ธ const์ž„์—๋„ ๋‚ด๋ถ€ ๊ฐ’์€ ๋ณ€๊ฒฝ ๊ฐ€๋Šฅํ•จ ์ฃผ๋ชฉ
    // ๋‚ด๋ถ€ ๋ณ€๊ฒฝ ๋ฐฉ์ง€๋Š” ์ดํ›„ ๋ฐฐ์šธ Object.freeze ํ•จ์ˆ˜๋กœ
    obj2.num = 2;
    obj2.str = '๊ฐ€๋‚˜๋‹ค';
    obj2.bool = false;
    โ€‹
    console.log('obj1:', obj1);
    console.log('obj2:', obj2);




    const array1 = [1, 'ABC', true];
    const array2 = array1;
    // array2 = []; // โš ๏ธ ์˜ค๋ฅ˜

     

    console.log('array1:', array1);
    console.log('array2:', array2);

     

    // โญ๏ธ const์ž„์—๋„ ๋‚ด๋ถ€ ๊ฐ’์€ ๋ณ€๊ฒฝ ๊ฐ€๋Šฅํ•จ ์ฃผ๋ชฉ
    array2[0] = 3;
    array2[1] = 'def';
    array2[2] = false;
    โ€‹
    console.log('array1:', array1);
    console.log('array2:', array2);




     

    II. ๋ฉ”๋ชจ๋ฆฌ ์ƒ์„ธ

    1. ์›์‹œ ํƒ€์ž…

    let number1 = 1;
    number2 = number1;
    number2 = 2;
    โ€‹
    console.log(number1, number2);

     

     



    2. ์ฐธ์กฐ ํƒ€์ž…

    a. ๊ฐ์ฒด

    const obj1 = {
    num: 1,
    str: 'ABC',
    bool: true
    };
    โ€‹
    const obj2 = obj1;
    โ€‹
    obj2.num = 2;
    โ€‹
    console.log(obj1, obj2);



    b. ๋ฐฐ์—ด

    const array1 = [1, 'ABC', true];
    const array2 = array1;
    โ€‹
    array2[1] = '๊ฐ€๋‚˜๋‹ค';
    โ€‹
    console.log(array1, array2);

    ๋ฐ˜์‘ํ˜•
Designed by Tistory.