Composite design pattern in Javascript

Question

I wanted to understand more about composite design pattern. I code in JS so I was going through it's example when I stumbled upon this article.

function File(name) {
    this.name = name;
}

File.prototype.display = function () {
    console.log(this.name);
}

function Directory(name) {
    this.name = name;
    this.files = [];
}

Directory.prototype.add = function (file) {
    this.files.push(file);
}

Directory.prototype.remove = function (file) {
    for (let i = 0, length = this.files.length; i < length; i++) {
        if (this.files[i] === file) {
            this.files.splice(i, 1);
            return true;
        }
    }
    
    return false;
}

Directory.prototype.getFileName = function (index) {
    return this.files[index].name;
}

Directory.prototype.display = function() {
    console.log(this.name);
    for (let i = 0, length = this.files.length; i < length; i++) {
        console.log("   ", this.getFileName(i));
    }
}

directoryOne = new Directory('Directory One');
directoryTwo = new Directory('Directory Two');
directoryThree = new Directory('Directory Three');

fileOne = new File('File One');
fileTwo = new File('File Two');
fileThree = new File('File Three');

directoryOne.add(fileOne);
directoryOne.add(fileTwo);

directoryTwo.add(fileOne);

directoryThree.add(fileOne);
directoryThree.add(fileTwo);
directoryThree.add(fileThree);

directoryOne.display();
directoryTwo.display();
directoryThree.display();

From this article

I am still not clear with composite design pattern and would love if someone could explain it to me using the above code snippet.

What exactly is unclear? The article explains it quite well. — connexo
– connexo, Commented Nov 11, 2020 at 21:05
Also note that modern JS has had "normal" class syntax for a fairly long time now (it's still prototypical inheritance, but the code is much easier to work with for OOP purposes). class File { constructor(name) { this.name = name; } display() { console.log(this.name); }} etc. — Mike 'Pomax' Kamermans
– Mike 'Pomax' Kamermans, Commented Nov 11, 2020 at 21:08

Clish · Accepted Answer · 2020-11-12 07:37:14Z

1

Lets imagine you're writing a js class, the below would be a constructor function


function File(name) {
    this.name = name;
}

to call it you would use const myName = new File('Salim')

The below would be a method in a class, though if there was a method defined inside the class with the same name it would be evaluated instead of this one.

File.prototype.display = function () {
    console.log(this.name);
}

myName.display() would evaluate to Salim. If you understood that, then the rest should be self explanatory. The above can also be rewritten as

class File{
  constructor(name){
     this.name=name
}
 display=()=>{
  console.log(this.name)
 }
}

edited Nov 12, 2020 at 7:37

answered Nov 11, 2020 at 22:06

Clish

385 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Composite design pattern in Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related