Learning to Code with Lego

Comparing coding to playing with Lego is a well accepted analogy in the software development space. I think there is good reason for this as each function, variable, conditional statement, ect. can be viewed as a block of Lego that can be used to create a larger composition. I think you could take the analogy a step further and bring it into the real world where you could teach the fundamentals of coding structure using Lego as the framework.

After learning the basics of coding as well as observing others around me learn to code I think people pick up very quickly how each individual component of code work. It is rather easy to remember the syntax of a for loop or how to declare a variable but its a much bigger step to know how to assemble those parts into a functioning piece of code. This is where a Lego framework could be used as a stepping stone into how all of these pieces work together.

Below is an example of how you could represent the two sum algorithm with legos as a way to ease into the problem.

Two Sum description from LeetCode

Given an array of integers nums and an integer target, 
return indices of the two numbers such that they add 
up to target.

You may assume that each input would have exactly 
one solution, and you may not use the same element twice.

Problem Illustrated in Lego

Here someone would be presented with all of the lines of the Two Sum problem represented as a pile of lego and a framework that needs to be filled out.

Problem Solved in Lego

It would be up to the person to fit the bricks into the framework in the correct order to make the code run smoothly.

Code Solution

var twoSum = function(nums, target) {

  const obj = {};

  for (let i = 0; i < nums.length; i++) {
    const complement = target - nums[i];

    if (obj[complement] !== undefined) {
      return [obj[complement], i];
    }

    obj[nums[i]] = i;
  }

  return [];
};

Creating Product Cards from an API

This format could also be scaled up to visualize more complex code such as adding javascript to a webpage. The next example shows a more involved coding problem where we need to display text content from an array provided by an API.

Problem Illustrated in Lego

Problem Solved in Lego

Code Solution

fetch("APIurl")
.then(resp => resp.Json())
.then(data => {

let containerDiv = document.querySelector("div")

for(let i = 0; i < data.length; i++){
let newCard = document.createElement("p")
newCard.textContent = data[i].content
containerDiv.appendChild(newCard)
}
})

In summary I think you could use an analogy like the above to bridge the gap between memorizing code syntax and actually using code to create desired outcomes. The problems could be scaled up or down based on where you were at in your coding journey and the lego bricks could represent code of varying size as well. There is also potential here for adaption to an educational game or web application.