Forem: oki99doki

Introduction to Object-Oriented Programming in Python

oki99doki — Thu, 12 Sep 2024 22:07:23 +0000

The Python Programming Language

Python is an interpreted, object-oriented programming language. Thanks to its high-level built-in data structures and dynamic typing, it has been popular for fast development of new applications and also scripting code to combine existing components written in different languages.

Python's simple, easy to learn syntax emphasizes readability and thus reducing the cost and complication of long-term program maintenance. It supports various packages for containing code, which encourages program modularity and code reuse. The Python interpreter and the extensive standard library are available at no cost for all major platforms.

Every programming language was originally designed to solve a specific problem or shortcoming. Python was developed because Guido van Rossum and his team found it exhausting to develop in C and Unix Shell scripts. Development in these languages was slow, and it took time even for experienced engineers to understand code that they had not seen before.

Learning Python allows you to build different kinds of programs and it also means that its user has a new set of tools and features available. Python can do many things including but not limited to:

Web-based

Read and write files
Listen for network requests and send responses
Connect to a database to access and update data

Non Web-based

Command line interfaces (CLIs)
Servers
Web scrapers
Games

References:
About Python
The Early Years of Python (Guido van Rossum)

Object-Orientation Programming Paradigm

Object-oriented programming (OOP) is a programming paradigm that is based on the concept of objects, which can contain data, in the form of fields, which are called attributes or properties, and code, in the form of procedures, which are called functions or methods. OOP emphasizes data structure and for the user to be able to structure code so that its functionality can be shared throughout the application. This is opposed to procedural programming, in which programs are built in a sequential order and procedures are called or invoked when a specific sequence of statements is to be shared and reused within the program.

References:
Object-Oriented Programming in Python
Differences Between Object-Oriented and Procedural Programming

OOP Terms

Here are some key terms that relevant to OOP and will be illustrated by examples later in this article.

Classes and Instances
Instance Methods
Attributes

Some Implementation Examples in Code

Classes and Instances:
A class is a blueprint for creating instances a.k.a. objects that share similar characteristics and behaviors. It defines a set of attributes and methods a.k.a. functions that the objects can have and perform.

A class acts as a template or a structure that allows you to create multiple instances of objects with the same properties and behaviors. Therefore, it encapsulates data and functions into a single unit, promoting code reusability and organization.

Here is an example for the class Pet:

class Pet:
    def __init__(self, name, species):
        self.name = name
        self.species = species

    def introduce(self):
        print(f"Hi, my name is {self.name} and I am a {self.species}.")

    def eat(self, food):
        print(f"{self.name} is eating {food}.")

Instance Methods

In the above example, the Pet class has three methods:

my_pet = Pet("Max", "dog")
my_pet.introduce()  # Output: Hi, my name is Max and I am a dog.
my_pet.eat("bones")  # Output: Max is eating bones.

The init()-method is a special method called a constructor. It is executed automatically when a new instance of the Pet class is created. It initializes the name and species attributes for each instance.

The introduce()-method prints out a message introducing the pet with its name and species.

The eat()-method takes a parameter, food, and prints out a message indicating that the pet is eating the specified food.

Note that multiple instances of the Pet class can be created and each instance will have its own name and species attributes.

Attributes

The table below shows some potential attributes a pet of class Pet may have.

class Pet:

id	name	age	species
1	Colleen	5	Dog
2	Rowdy	2	Dog
3	Whiskers	11	Cat

The different columns correspond to different attributes or properties i.e. pieces of data that all Pets have but may be different among each individual pet. Here is an example for the class Pet with id, name, age and species as attributes.

class Pet:
    def __init__(self, id, name, age, species):
        self.id = id
        self.name = name
        self.age = age
        self.species = species

Calling or instantiating the different pets can be done as follows.

# Creating instances of Pet class
dog1 = Pet(1, “Colleen", 5, "dog”)
dog2 = Pet(2, “Rowdy", 2, “dog”)
cat3 = Pet(3, “Whiskers”, 11, “cat")

Benefits of OOP

Some key benefits of OOP are:

Modularity & Reusability
Encapsulation
Maintainability
Inheritance & Polymorphism

Modularity and Reusability: OOP allows you to break down your code into smaller, modular objects. These objects can be reused in different parts of your program or in other programs, promoting code reusability and reducing duplication.

Encapsulation: OOP encapsulates data and functions into objects, which helps to organize and manage complex codebases. It allows the developer to hide the internal implementation details of an object and only expose a clean interface for interacting with it.

Maintainability: OOP promotes a clear and organized code structure. Objects and their interactions can be easily understood and modified, making it easier to maintain and debug your code.

Inheritance and Polymorphism: Inheritance allows you to create new classes based on existing classes, inheriting their attributes and behaviors. This promotes code reuse and helps to create a hierarchical structure of classes. Polymorphism allows objects of different classes to be used interchangeably, providing flexibility and extensibility.

Flexibility and Scalability: OOP provides a flexible and scalable approach to programming. You can easily add new features by creating new classes or modifying existing ones, without affecting other parts of your code.

Collaboration: OOP promotes collaboration among developers by providing a common structure and terminology for designing and implementing software. It allows multiple developers to work on different parts of a program simultaneously, using a shared understanding of objects and their interactions.

Testing and Debugging: OOP makes testing and debugging easier. Objects can be tested individually, making it easier to isolate and fix issues. Additionally, OOP encourages the use of modular and loosely coupled code, which makes it easier to write unit tests.

Summary

Given all the benefits of OOP in Python in the previous section that contributes to writing more organized, maintainable, and scalable code, which can improve productivity and code quality.

React Hooks and Benefits

oki99doki — Thu, 12 Sep 2024 22:07:02 +0000

React

As a front-end JavaScript library for building interfaces based on components, React has gained popularity among front-end developers. It was launched by Facebook in 2013 and is now maintained by Meta. React is open-source and its main use case is the development of single-page web applications with a focus on the user interface and rendering components to the DOM.

React applications rely on libraries for routing and other client-side functionality. A key advantage of React is that it only re-renders those parts of a page that have changed thus avoiding unnecessary re-rendering of unchanged DOM elements.

Key Features

Declarative
Following the declarative programming paradigm, in React developers design views for each state of an application, which is then updated and components rendered as data changes. Compared to imperative programming, the focus is on “what” should be done and how the final page should look like, as opposed to “how" it is done step-by-step.

Components
The code in React consists of components, which are modular and reusable entities. Applications usually have multiple layers of components and they are rendered to a so-called root element in the DOM. During rendering of a component values are passed between components through properties a.k.a. props. Values internal to a component are referred to as state.

React Hooks
Available since React 16.8 (2019), React Hooks are functions that allow developers to hook into React state and life cycle features from function components. Importantly, Hooks let developers use features of React without having to use classes. This is considered a big benefit, because programmers need to rely less on class components.

Class Components
Classes behave similar as functional components. However, instead of using Hooks to manage state and lifecycle events, they use lifecycle methods on React.Component base classes.

Routing
Since React does not have any built-in support for routing, third-party libraries can be used to deal with routing. This allows the developer to easily define routes, manage navigation and handle URL changes.

Virtual DOM
The Virtual Document Object Model (DOM) is an important feature, as React uses an internal data-structure, computes the resulting differences, and updates the displayed DOM efficiently. This allows the developer to write code as if the entire page is rendered on each change while React only renders components that actually change. This provides performance enhancement.

React Hooks

As mentioned earlier, Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.

Reference:
React Docs

useState
useState is a React Hook that lets you add a state variable to your component.

Reference:
useState

Example

import { useState } from ‘react’; function MyComponent() { const [age, setAge] = useState(28); const [name, setName] = useState('Taylor’); const [todos, setTodos] = useState(() => createTodos()); // …

The convention is to name state variables like [something, setSomething] using array destructuring.

Parameters include initialState, which is the value you want the state to be initially. It can be a value of any type, but there is a special behavior for functions. This argument is ignored after the initial rendering.

useState returns an array with exactly two values:

The current state. During the first render, it will match the initialState you have passed.
The set function that lets you update the state to a different value and trigger a re-render.

useEffect
useEffect is a React Hook that lets you synchronize a component with an external system.

Example
useEffect(setup, dependencies)

It is called at the top level of your component to declare an Effect.

setup is the function with the Effect’s logic. The setup function may also optionally return a cleanup function. When your component is added to the DOM, React will run your setup function. After every re-render with changed dependencies, React will first run the cleanup function with the old values, and then run your setup function with the new values.

Dependencies are optional and this is a list of all reactive values referenced inside of the setup code. Reactive values include props, state, and all the variables and functions declared directly inside your component body.

Key Takeaways

One key benefit of React is that it uses JavaScript, which is one of the world’s most popular programming languages. React is easy to use, generally easy to learn, and improves your web applications’ performance and interoperability.

Overview of Functions in JavaScript for Beginners

oki99doki — Fri, 02 Aug 2024 10:02:24 +0000

The JavaScript Language

JavaScript as one of the core technology of the Web, alongside HTML and CSS, is a high-level, interpreted language that supports dynamic typing, prototype-based object-orientation and first-class functions. Moreover, it is multi-paradigm, supporting event-driven, functional, and imperative programming styles. It has application programming interfaces (APIs) for working with text, dates, regular expressions, standard data structures, and the Document Object Model (DOM).
Reference: Java Script

Use of Functions

A function is a block of code that performs a specific task or action. It takes in inputs, called parameters or arguments, and returns an output. Functions are used to organize code, improve readability, and promote code reusability. Functions can be thought of as mini-programs within a larger program. They can be called and executed multiple times from different parts of the program and be used to perform complex operations or calculations.

In JavaScript, for example, a function is defined using the function keyword, followed by the function name, parentheses for parameters (if any), and curly braces to enclose the code block. Here's a simple example of a JavaScript function that adds two numbers:

function addNumbers(num1, num2) {
  return num1 + num2;
}

In this example, the function addNumbers takes in two parameters num1 and num2. It then adds them together using the + operator and returns the result.

Functions can be called by their name followed by parentheses, and the values passed as arguments inside the parentheses. For example:

let result = addNumbers(5, 3); console.log(result); // Output: 8

Here, the function addNumbers is called with the arguments 5 and 3, and the returned result is stored in the variable result. The console.log statement then outputs the result to the console.

Types of Functions in JavaScript

In JavaScript, there are several types of functions that can use based on your specific needs. Here are some common types of functions:

Named Functions: These are standard functions that have a name and can be defined using the function keyword. For example:

function multiply(num1, num2) {
  return num1 * num2;
}

Anonymous Functions: These functions do not have a name and are assigned to a variable or used as a callback function. They are defined using the function keyword without a name. For example:

let greet = function(name) {
  console.log(`Hello, ${name}!`);
};

Arrow Functions: Introduced in ES6, arrow functions provide a more concise syntax for writing functions. They are often used for shorter, one-line functions. For example:

let square = num => num * num;

Higher-Order Functions: These functions take one or more functions as arguments or return a function as a result. They are used for functional programming paradigms and can provide powerful abstractions. For example, the map, filter, and reduce functions are higher-order functions.

let numbers = [1, 2, 3, 4, 5];

let doubled = numbers.map(num => num * 2);

Constructor Functions: These functions are used to create objects using the new keyword. They typically have an uppercase first letter to indicate that they should be used with the new keyword.

Side-by-Side Comparison of different Types of Functions

To illustrate the differences and commonalities in syntax between above-mentioned types of functions, the following example uses the same functionality i.e. addition of two numbers.

// Named Function
function addNamedFn(num1, num2) {
  return num1 + num2;
}

// Anonymous Function
let addAnonymousFn = function(num1, num2) {
  return num1 + num2;
}

// Arrow Function
let addArrowFn = (num1, num2) => {
  return num1 + num2;
}

// Arrow Function (short)
let addArrowFn = (num1, num2) => num1 + num2);

A named function begins with the key word ‘function’, which declares the function, is common to many programming languages and typically the firs type of function that someone new to programming might encounter. This is followed by the ’name’ given to the specific function being defined, after which are parentheses which enclose the parameters, which are passed as arguments into the function, in this case the numbers num1 and num2. The actual content or body of the function, which is what it does after being called is enclosed by curly brackets. Here as in all cases shown it is the return of addition of num1 and num2.

An anonymous function differs in that there is no name given to the function. Therefore it can be used inline or as a callback right away or if used in other places it needs to be assigned to a variable, which serves as a pointer to the location in memory where the variable is held and can be accessed. The ‘let’ key word is followed by the specific variable name given here. Note that after function keyword there is no function name but just a pair of parentheses with parameters followed by curly brackets with the return statement.

An arrow function is a neat feature that recently was added to JavaScript. Instead of using the function keyword, here the ‘=>’ symbol/ operator is used, which indicates the arrow function. One of the benefits of arrow function is that it can often be shortened and be abbreviated to one line like shown above. Note that no curly brackets are required for a one-line statement and that the typically mandatory return statement is not necessary to make the result available outside of the function or to perform the same task.

Conclusions

As shown there is quite some flexibility to the programmer in using the various types of functions to performing the same task. This article is only touching on those concepts at a high-level for awareness but there is certainly much more details to explore. Arrow functions and anonymous functions are often used as short-hand implementation (fewer lines of code) and/ or when the function is called directly (call-back or inline). Note that neither of those allow for hoisting, which is a feature that is available only to named functions, which can be called regardless of where they are defined as long as they are declared.