[Javascript] 과제: 객체

https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Test_your_skills:_Object_basics

Test your skills: Object basics - Learn web development | MDN

 

 

목차

• 과제1
• 과제2
• 과제3
• 과제4

과제1

• Store the value of the name property inside the catName variable, using bracket notation.
• Run the greeting() method using dot notation (it will log the greeting to the browser's console).
• Update the color property value to black.

코드

const cat = {
  name : 'Bertie',
  breed : 'Cymric',
  color : 'white',
  greeting: function() {
    console.log('Meow!');
  }
}

// Put your code here
const catName = cat['name'];
cat.greeting();
cat.color = 'black';


// Don't edit the code below here

let para1 = document.createElement('p');
let para2 = document.createElement('p');

para1.textContent = `The cat's name is ${ catName }.`;
para2.textContent = `The cat's color is ${ cat.color }.`;

section.appendChild(para1);
section.appendChild(para2);

과제1 결과

 

과제1 결과

과제2

문제

• name: A string representing the band name.
• nationality: A string representing the country the band comes from.
• genre: What type of music the band plays.
• members: A number representing the number of members the band has.
• formed: A number representing the year the band formed.
• split: A number representing the year the band split up, or false if they are still together.
• albums: An array representing the albums released by the band. Each array item should be an object containing the following members:
  • name: A string representing the name of the album.
  • released: A number representing the year the album was released.

Include at least two albums in the albums array.

Once you've done this, you should then write a string to the variable bandInfo, which will contain a small biography detailing their name, nationality, years active, and style, and the title and release date of their first album.

코드

let bandInfo;

// Put your code here
const band = { name : 'DAY6', nationality : 'South Korea', genre : 'POP/ROCK', members : 4, formed : 2015, split : false, albums : [ {name : 'Fourever', released : 2024}, { name : 'Every DAY6 February', released : 2017} ] };

bandInfo = `My favorite band is ${band.name}, which all people in it are from ${band.nationality}. The genre of the most songs are ${band.genre}, and there're ${band.members} members. They debuted in ${band.formed}, still on TV. There're a lot of songs which i like, for example, ${band.albums[0].name} in ${band.albums[0].released} and ${band['albums'][1]['name']} in ${band['albums'][1]['released']}. I hope you guys also like those. Thank you for your time.`;

// Don't edit the code below here

let para1 = document.createElement('p');
para1.textContent = bandInfo;
section.appendChild(para1);

과제2 결과

 

과제3

문제

In this task, we want you to return to the cat object literal from Task 1. We want you to rewrite the greeting() method so that it logs "Hello, said Bertie the Cymric." to the browser's console, but in a way that will work across any cat object of the same structure, regardless of its name or breed.

When you are done, write your own object called cat2, which has the same structure, exactly the same greeting() method, but a different name, breed, and color.

Call both greeting() methods to check that they log appropriate greetings to the console.

 

코드

const cat = {
  name : 'Bertie',
  breed : 'Cymric',
  color : 'white',
  greeting: function() {
    console.log(`Hello, said ${this.name} the ${this.breed}.`);
  }
}
    
const cat2 = {
  name : 'Catte',
  breed : 'Cymric',
  color : 'black',
  greeting: function() {
    console.log(`Hello, said ${this.name} the ${this.breed}.`);
  }
}

cat.greeting();
cat2.greeting();

과제3 결과

 

과제4

문제

In this task we want you to improve the code so greeting() is only defined once, and every cat instance gets its own greeting() method. Hint: you should use a JavaScript constructor to create cat instances.

코드

function Cat(name, breed, color) {
  this.name = name;
  this.breed = breed;
  this.color = color;
  this.greeting = function() {
    console.log(`Hello, said ${ this.name } the ${ this.breed }.`);
  };
}

const cat = new Cat('Bertie', 'Cymric', 'white');

const cat2 = new Cat('Elfie', 'Aphrodite Giant', 'ginger');

cat.greeting();
cat2.greeting();

과제4 결과

 

 

 

 

오류 있으면 댓글 남겨주세요! 감사합니다!!