Las funciones flecha (llamadas también “funciones de flecha gorda”) son indudablemente una de las características más populares de ES6 (EcmaScript 6). Ellas introducen una nueva forma de escribir funciones concisas.

He aquí una función escrita en sintaxis ES5:

function porDos(parametros) {  return parametros * 2}function porDos(parametros) {
  return parametros * 2
}

porDos(4);  // 8

Ahora, he aquí la misma función expresada como una función flecha:

var porDos = parametros => parametros * 2

porDos(4);  // 8

¡Es mucho más corto! Podemos omitir las llaves y la sentencia return debido a los retornos implícitos (pero sólo si no hay bloque — más sobre esto más adelante).

Es importante entender cómo la función flecha se comporta de manera diferente comparada con las funciones ES5 regulares.

Variaciones

Una cosa que notarás rápidamente es la variedad de sintaxis disponibles en las funciones flecha. Repasemos algunas de las más comunes:

1. Sin parámetros

Si no hay parámetros, puedes colocar paréntesis vacíos antes de =>.

() => 42

De hecho, ¡ni siquiera se necesitan los paréntesis!

_ => 42

2. Un solo parámetro

Con estas funciones, los paréntesis son opcionales:

x => 42  || (x) => 42

3. Muchos parámetros

Los paréntesis son obligatorios para estas funciones:

(x, y) => 42

4. Sentencias (a diferencia de las expresiones)

En su forma más básica, una expresión de función produce un valor, mientras que una sentencia de función realiza una acción.

Con la función flecha, es importante recordar que las sentencias deben tener llaves. Una vez que las llaves están presentes, siempre necesitas escribir return también.

A continuación un ejemplo de la función flecha usada con una sentencia if:

var alimentaAlGato = (gato) => {
  if (gato === 'hambriento') {
    return 'Alimenta al gato';
  } else {
    return 'No alimentes al gato';
  }
}

5. “Cuerpo del bloque”

Si tu función está en un bloque, debes usar también la sentencia return explícita:

var sumarValores = (x, y) => {
  return x + y
}

6. Objetos literales

Si estás devolviendo un objeto literal, debe ir entre paréntesis. Esto obliga al intérprete a evaluar lo que hay dentro de los paréntesis, y se devuelve el objeto literal.

x =>({ y: x })

Sintácticamente anónimas

Es importante notar que las funciones flecha son anónimas, lo que significa que no tienen nombre.

Este anonimato crea algunos problemas:

1. Más difíciles de depurar

Cuando obtengas un error, no serás capaz de rastrear el nombre de la función o el número de línea exacto donde ocurrió.

2. Sin autorreferencia

Si tu función necesita tener autorreferencia en algún punto (por ejemplo, recursión, controlador de evento que necesita desvincularse), no funcionará.

Principal beneficio: la no vinculación de 'this'

En las expresiones de función clásicas, la palabra reservada this está vinculada a diferentes valores en función del contexto en el que se llama. Sin embargo, con las funciones flecha, this está vinculada léxicamente. Esto significa que usa this desde el código que contiene la función flecha.

Por ejemplo, mira la función setTimeout:

// ES5
var objeto = {
  id: 42,
  contador: function contador() {
    setTimeout(function() {
      console.log(this.id);
    }.bind(this), 1000);
  }
};

En el ejemplo de ES5, es obligatorio .bind(this) para ayudar a pasar el contexto de this a la función. De lo contrario, this sería indefinido por defecto.

// ES6
var objeto = {
  id: 42,
  contador: function contador() {
    setTimeout(() => {
      console.log(this.id);
    }, 1000);
  }
};

Las funciones flecha de ES6 no pueden estar vinculadas a la palabra reservada this, así que léxicamente irán un ámbito arriba y usarán el valor de this en el ámbito en el que fue definido.

Cuándo no deberías usar las funciones flecha

Después de aprender un poco más sobre las funciones flecha, espero que entiendas que no reemplazan a las funciones regulares.

Aquí hay algunos casos donde probablemente no quieras usarlas:

1. Métodos de objetos

Cuando llamas a gato.saltos, el número de vidas no disminuye. Esto es porque this está vinculado a nada, y heredará el valor de this de su ámbito padre.

var gato = {
  vidas: 9,
  saltos: () => {
    this.vidas--;
  }
}

2. Funciones callback con contexto dinámico

Si necesitas que tu contexto sea dinámico, las funciones flecha no son la elección correcta. Mira este controlador de evento a continuación:

var boton = document.getElementById('press');
boton.addEventListener('click', () => {
  this.classList.toggle('on');
});

Si pulsamos el botón, obtendremos un TypeError. Esto es porque this no está vinculado al botón, sino a su ámbito padre.

3. Cuando hace tu código menos legible

Vale la pena tomar en consideración la variedad de sintaxis que cubrimos anteriormente. Con las funciones regulares, la gente sabe qué esperar. Con las funciones flecha, puede ser difícil de descifrar lo que estás viendo inmediatamente.

Cuándo debes usar las funciones flecha

Las funciones flecha brillan mejor con cualquier cosa que requiera que this esté vinculado al contexto, y no a la función en sí.

A pesar del hecho de que son anónimas, también me gusta usarlas con métodos como map y reduce, porque creo que hace mi código más legible. Para mí, los pros superan a los contras.

Gracias por leer mi artículo, ¡y compártelo si te gustó!

¿Qué es un Algoritmo de Grafos?

Los algoritmos de grafos son un conjunto de instrucciones que recorren (visitan los nodos de) un grafo.

Algunos algoritmos son usados para hallar un nodo específico o el camino entre dos nodos dados.

¿Por qué son Importantes los Algoritmos de Grafos?

Los grafos son estructuras de datos muy útiles que se usan para modelar varios problemas. Estos algoritmos tienen aplicaciones directas en sitios de redes sociales, modelado de máquinas de estado y más.

Algunos Algoritmos de Grafos Comunes

Algunos de los algoritmos de grafos más comunes son:

• Búsqueda en Amplitud o Anchura (Breadth First Search, BFS)
• Búsqueda en Profundidad (Depth First Search, DFS)
• Dijkstra
• Algoritmo de Floyd-Warshall

Algoritmo de Bellman Ford

El algoritmo de Bellman Ford es un algoritmo de búsqueda del camino más corto para grafos que puede tener pesos negativos. El algoritmo de Bellman Ford es también ideal para detectar ciclos de pesos negativos, ya que el algoritmo converge hacia una solución óptima en O(V*E) pasos. Si la resultante no es óptima, entonces el grafo contiene un ciclo de pesos negativos.

Aquí está una implementación en Python:

infinito = 1e10

def bellman_ford(grafo, inicio, fin):
    num_vertices = grafo.get_num_vertices()
    aristas = grafo.get_edges()

    distancia = [infinito para vértice en range(num_vertices)]
    previo = [ninguno para vértice en range(num_vertices)]

    distancia[inicio] = 0
    for i range(fin+1):
        for (u, v) in aristas:
            if distancia[v] > distancia[u] + grafo.get_weight(u, v):
                distancia[v] = distancia[u] + grafo.get_weight(u, v)
                previo[v] = u

    for (u,v) in aristas:
        if distancia[v] > distancia[u] + grafo.get_weight(u, v):
            raise ErrorCicloPesoNegativo()
    return distancia, previo
# 'distancia' es la distancia desde el inicio hasta ese nodo en el camino más corto, útil para imprimir la distancia más corta.
# Previo es un arreglo que muestra el nodo que es anterior al actual, útil para imprimir el camino.

Búsqueda en Profundidad (Depth First Search, DFS)

La Búsqueda en Profundidad es uno de los algoritmos de grafos más sencillos. Recorre el grafo revisando primero el nodo actual y moviéndose después a uno de sus sucesores para repetir el proceso. Si el nodo actual no tiene sucesor a revisar, regresamos a su predecesor y el proceso continúa (moviéndose a otro sucesor). Si la solución es encontrada, la búsqueda termina.

Visualización

Implementación (C++14)

#include <iostream> 
#include <vector> 
#include <queue>  
#include <algorithm>
using namespace std; 
 
class Grafo{ 
   int v;    // número de vértices 
 
   // puntero a un vector que contiene listas de adyacencia
   vector < int > *adj;
public: 
   Grafo(int v);  // Constructor 
 
   // función para añadir una arista al grafo
   void agregar_arista(int v, int w);  
 
   // imprime el recorrido dfs a partir de una fuente `s` dada
   void dfs();
   void dfs_util(int s, vector < bool> &visitado);   
}; 
 
Grafo::Grafo(int v){ 
   this -> v = v; 
   adj = new vector < int >[v]; 
} 
 
void Grafo::agregar_arista(int u, int v){ 
   adj[u].push_back(v); // agregar v a la lista de u
   adj[v].push_back(v); // agregar u a la lista de v (¡elimina esta declaración si el grafo es dirigido!)
} 
void Grafo::dfs(){
   // vector visitado - para llevar registro de los nodos visitados durante la búsqueda en profundidad)
   vector < bool > visitado(v, false);  // marcar todos los nodos/vértices como no visitados
   for(int i = 0; i < v; i++)
       if(!visitado[i])
           dfs_util(i, visitado);
} 
// ¡observa el uso de la llamada por referencia aquí!
void Grafo::dfs_util(int s, vector < bool > &visitado){ 
   // marcar el nodo/vértice actual como visitado
   visitado[s] = true;
    // enviarlo a la salida estándar(pantalla)
   cout << s << " ";
   
   // ¡recorrer su lista de adyacencia y llamar recursivamente a dfs_util para todos sus vecinos! 
   // (¡solo si el vecino aún no ha sido visitado!)
   for(vector < int > :: iterator itr = adj[s].begin(); itr != adj[s].end(); itr++)
       if(!visitado[*itr])
           dfs_util(*itr, visitado); 
} 
 
int main() 
{ 
   // crear un grafo usando la clase Grafo que definimos anteriormente
   Grafo g(4); 
   g.agregar_arista(0, 1); 
   g.agregar_arista(0, 2); 
   g.agregar_arista(1, 2); 
   g.agregar_arista(2, 0); 
   g.agregar_arista(2, 3); 
   g.agregar_arista(3, 3); 
 
   cout << "A continuación el recorrido de la búsqueda en profundidad del grafo proporcionado"
        << "(a partir del vértice 0): "; 
   g.dfs(); 
   // la salida sería: 0 1 2 3
   return 0; 
} 

Evaluación

Complejidad del Espacio: O(n)

Complejidad del Tiempo en el Peor de los Casos: O(n) La Búsqueda en Profundidad es completa en un conjunto finito de nodos. Funciona mejor en árboles poco profundos.

Implementación de DFS en C++

#include<iostream>
#include<vector>
#include<queue>

using namespace std;

struct Grafo{
	int v;
	bool **adj;
	public:
		Grafo(int conteov);
		void agregarArista(int u,int v);
		void borrarArista(int u,int v);
		vector<int> DFS(int s);
		void DFSUtil(int s,vector<int> &dfs,vector<bool> &visitado);
};
Grafo::Grafo(int conteov){
	this->v = conteov;
	this->adj=new bool*[conteov];
	for(int i=0;i<conteov;i++)
		this->adj[i]=new bool[conteov];
	for(int i=0;i<conteov;i++)
		for(int j=0;j<conteov;j++)
			adj[i][j]=false;
}

void Grafo::agregarArista(int u,int w){
	this->adj[u][w]=true;
	this->adj[w][u]=true;
}

void Grafo::borrarArista(int u,int w){
	this->adj[u][w]=false;
	this->adj[w][u]=false;
}

void Grafo::DFSUtil(int s, vector<int> &dfs, vector<bool> &visitado){
	visitado[s]=true;
	dfs.push_back(s);
	for(int i=0;i<this->v;i++){
		if(this->adj[s][i]==true && visitado[i]==false)
			DFSUtil(i,dfs,visitado);
	}
}

vector<int> Grafo::DFS(int s){
	vector<bool> visitado(this->v);
	vector<int> dfs;
	DFSUtil(s,dfs,visitado);
	return dfs;
}

Algoritmo de Floyd Warshall

El algoritmo de Floyd Warshall es un gran algoritmo para encontrar la distancia más corta entre todos los vértices del grafo. Tiene un algoritmo muy conciso y complejidad del tiempo O(V^3) (donde V es el número de vértices). Puede ser usado con pesos negativos, aunque los ciclos de pesos negativos no deben estar presentes en el grafo.

Evaluación

Complejidad del Espacio: O(V^2)

Complejidad del Tiempo en el Peor de los Casos: O(V^3)

Implementación en Python

# Un valor grande como infinito
inf = 1e10 

def floyd_warshall(pesos):
    V = len(pesos)
    matriz_distancia = pesos
    for k in range(V):
        siguiente_matriz_distancia = [list(row) for row in matriz_distancia] # hacer una copia de matriz de distancia
        for i in range(V):
            for j in range(V):
                # Elegir si el vértice k puede funcionar como un camino con menor distancia
                siguiente_matriz_distancia[i][j] = min(matriz_distancia[i][j], matriz_distancia[i][k] + matriz_distancia[k][j])
        matriz_distancia = siguiente_matriz_distancia # actualizar
    return matriz_distancia

# Un grafo representado como matriz de adyacencia
grafo = [
    [0, inf, inf, -3],
    [inf, 0, inf, 8],
    [inf, 4, 0, -2],
    [5, inf, 3, 0]
]

print(floyd_warshall(grafo))

Búsqueda en Amplitud o Anchura (Breadth First Search, BFS)

Búsqueda en Amplitud o Anchura es uno de los algoritmos de grafos más sencillo. Recorre el grafo al primero comprobar el nodo actual y luego expandirlo al agregar sus sucesores al siguiente nivel. El proceso se repite para todos los nodos del nivel actual  antes de moverse al siguiente. Si se encuentra la solución, la búsqueda termina.

Visualización

Evaluación

Complejidad del Espacio: O(n)

Complejidad del Tiempo en el Peor de los Casos: O(n)

La Búsqueda en Amplitud o Anchura es completa en un conjunto finito de nodos y es óptima si el costo de moverse de un nodo a otro es constante.

Código C++ para la implementación de BFS

// Programa para imprimir el recorrido BFS desde un 
// vértice origen dado. BFS(int s) recorre los vértices  
// alcanzables desde s. 
#include<iostream> 
#include <list> 
  
using namespace std; 
  
// Esta clase representa un grafo dirigido
// utilizando la representación de listas de adyacencias 
class Grafo 
{ 
    int V;    // No. de vértices 
  
    // Puntero a un arreglo que contiene listas de adyacencia
    list<int> *adj;    
public: 
    Grafo(int V);  // Constructor 
  
    // función para agregar una arista al grafo
    void agregarArista(int v, int w);  
  
    // imprime el recorrido de BFS desde una fuente s dada
    void BFS(int s);   
}; 
  
Grafo::Grafo(int V) 
{ 
    this->V = V; 
    adj = new list<int>[V]; 
} 
  
void Grafo::agregarArista(int v, int w) 
{ 
    adj[v].push_back(w); // Agregar w a la lista de v.
} 
  
void Grafo::BFS(int s) 
{ 
    // Marcar todos los vértices como no visitados
    bool *visitado = new bool[V]; 
    for(int i = 0; i < V; i++) 
        visitado[i] = false; 
  
    // Crear una cola para BFS 
    list<int> cola; 
  
    // Marcar el nodo actual como visitado y ponerlo en cola
    visitado[s] = true; 
    cola.push_back(s); 
  
    // 'i' será usado para obtener todos los vértices
    // adyacentes de un vértice 
    list<int>::iterator i; 
  
    while(!cola.empty()) 
    { 
        // Sacar de la cola un vértice e imprimirlo
        s = cola.front(); 
        cout << s << " "; 
        cola.pop_front(); 
  
        // Obtener todos los vértices adyacentes del
        // vértice s sacado de la cola. Si un adyacente
        // no ha sido visitado, entonces marcarlo como 
        // visitado y ponerlo en la cola
        for (i = adj[s].begin(); i != adj[s].end(); ++i) 
        { 
            if (!visitado[*i]) 
            { 
                visitado[*i] = true; 
                cola.push_back(*i); 
            } 
        } 
    } 
} 
  
// Programa controlador para probar métodos de la clase grafo
int main() 
{ 
    // Crear un grafo como el del diagrama anterior
    Grafo g(4); 
    g.agregarArista(0, 1); 
    g.agregarArista(0, 2); 
    g.agregarArista(1, 2); 
    g.agregarArista(2, 0); 
    g.agregarArista(2, 3); 
    g.agregarArista(3, 3); 
  
    cout << "A continuación se muestra el recorrido en amplitud o anchura "
         << "(empezando desde el vértice 2) \n"; 
    g.BFS(2); 
  
    return 0; 
}

Algoritmo de Dijkstra

El Algoritmo de Dijkstra es un algoritmo de grafo presentado por E. W. Dijkstra. Encuentra el camino más corto de origen único en un grafo con aristas no negativas. (¿Por qué?)

Creamos dos arreglos: visitado y distancia, que registran si un vértice es visitado y cuál es la mínima distancia desde el vértice origen, respectivamente. Inicialmente, el arreglo visitado se asigna como falso y distancia como infinito.

Partimos del vértice origen. Dejemos que el vértice actual sea u y sus vértices adyacentes sean v. Ahora, por cada v que es adyacente a u, la distancia se actualiza si no ha sido visitado antes y la distancia desde u es menor que su distancia actual. Luego seleccionamos el siguiente vértice con la menor distancia y que no haya sido visitado.

La Cola de Prioridad se usa a menudo para cumplir este último requerimiento en el menor tiempo posible. Abajo se ve una implementación de la misma idea usando la cola de prioridad en Java.

import java.util.*;
public class Dijkstra {
    class Grafo {
	LinkedList<Pair<Integer>> adj[];
	int n; // Número de vertices.
	Grafo(int n) {
	    this.n = n;
	    adj = new LinkedList[n];
	    for(int i = 0;i<n;i++) adj[i] = new LinkedList<>();
	}
	// agregar una arista dirigida entre los vértices a y b con el costo como peso
	public void agregarAristaDirigida(int a, int b, int costo) {
	    adj[a].add(new Pair(b, costo));
	}
	public void agregarAristaNoDirigida(int a, int b, int costo) {
	    agregarAristaDirigida(a, b, costo);
	    agregarAristaDirigida(b, a, costo);
	}
    }
    class Pair<E> {
	E first;
	E second;
	Pair(E f, E s) {
	    first = f;
	    second = s;
	}
    }

    // Comparador para ordenar Pares en la Cola de Prioridad
    class ComparadorPar implements Comparator<Pair<Integer>> {
	public int comparar(Pair<Integer> a, Pair<Integer> b) {
	    return a.second - b.second;
	}
    }

    // Calcular el camino más corto para cada vértice del origen y devuelve la distancia
    public int[] dijkstra(Grafo g, int src) {
	int distancia[] = new int[g.n]; // la distancia más corta de cada vértice desde src
	boolean visitado[] = new boolean[g.n]; // el vértice es visitado o no
	Arrays.fill(distancia, Integer.MAX_VALUE);
	Arrays.fill(visitado, false);
	PriorityQueue<Pair<Integer>> pq = new PriorityQueue<>(100, new ComparadorPar());
        pq.add(new Pair<Integer>(src, 0));
	distancia[src] = 0;
	while(!pq.isEmpty()) {
	    Pair<Integer> x = pq.remove(); // Extraer el vértice con la distancia más corta desde src
	    int u = x.first;
	    visitado[u] = true;
	    Iterator<Pair<Integer>> iter = g.adj[u].listIterator();
	    // Iterar sobre los vecinos de u y actualizar sus distancias
	    while(iter.hasNext()) {
		Pair<Integer> y = iter.next();
		int v = y.first;
		int peso = y.second;
		// Comprobar si el vértice v no es visitado
		// Si el nuevo camino a través de u ofrece menos costo, entonces actualizar el arreglo de distancia y agregarlo a cp
		if(!visitado[v] && distancia[u]+peso<distancia[v]) {
		    distancia[v] = distancia[u]+peso;
		    pq.add(new Pair(v, distancia[v]));
		}
	    }
	}
	return distancia;
    }

    public static void main(String args[]) {
	Dijkstra d = new Dijkstra();
	Dijkstra.Grafo g = d.new Grafo(4);
	g.agregarAristaNoDirigida(0, 1, 2);
	g.agregarAristaNoDirigida(1, 2, 1);
	g.agregarAristaNoDirigida(0, 3, 6);
	g.agregarAristaNoDirigida(2, 3, 1);
	g.agregarAristaNoDirigida(1, 3, 3);

	int dist[] = d.dijkstra(g, 0);
	System.out.println(Arrays.toString(dist));
    }
}

Algoritmo de Ford  Fulkerson

El algoritmo de Ford Fulkerson resuelve el problema de grafo de flujo máximo. Encuentra la mejor organización del flujo mediante las aristas de grafos, de tal modo que obtienes el flujo máximo de salida en el otro extremo. La fuente tiene una tasa específica de entrada y cada arista tiene un peso asociado que es la sustancia máxima que puede pasar a través de esa arista.

Al algoritmo Ford Fulkerson también se le conoce como algoritmo Edmund-Karp, ya que fue provisto en especificación completa por Jack Edmonds y Richard Karp.

Trabaja creando caminos de aumento, es decir, caminos desde el origen hasta el sumidero que tienen flujo no cero. Pasamos el flujo a través de los caminos y actualizamos los límites. Esto puede llevar a una situación donde no tenemos más movimientos. Es aquí donde la habilidad 'deshacer' de este algoritmo juega un papel importante. En caso de quedarse atorado, disminuimos el flujo y abrimos la arista para pasar nuestra sustancia actual.

Pasos

1. Establecer flujo cero para todas las aristas.
2. Mientras haya un camino del origen al hundimiento hacer,
3. Hallar el peso mínimo en el camino, que sea el límite.
4. Para todas las aristas (u, v) en el camino hacer,
   1. Agregar límite al flujo de u a v. (Para el movimiento actual)
   2. Restar límite  al flujo de v a u. (Para deshacer en un movimiento posterior)

Evaluación

Complejidad del tiempo: O(V*E^2)

Implementación en Python

# Número grande como infinito
inf = 1e10

def flujo_maximo(grafo, fuente, destino):
  flujo_maximo = 0
  padre = bfs(grafo, fuente, destino)
  while camino:
    limite = inf
    v = destino
    while v != fuente:
        u = padre[s]
        flujo_camino = min(limite, grafo[u][v])
        v = padre[v]
    flujo_maximo += flujo_camino

    v = destino
    while v != fuente:
        u = padre[v]
        grafo[u][v] -= flujo_camino
        grafo[v][u] += flujo_camino
        v = padre[v]

    camino = bfs(grafo, fuente, destino)
  return flujo_maximo

Me quedaban 15 minutos, y sabía que iba a reprobar.

Había pasado dos meses estudiando para mi primera entrevista técnica.

Pensé que estaba preparada, pero a medida que la entrevista llegaba a su fin, me di cuenta: no tenía idea de cómo resolver problemas de codificación.

De todos los tutoriales que había tomado cuando estaba aprendiendo a programar, ninguno incluía un enfoque para resolver problemas de código.

Tuve que encontrar un método para resolver problemas; mi carrera como desarrolladora dependía de ello.

Empecé inmediatamente a buscar métodos. Y encontré uno. De hecho, lo que descubrí fue una estrategia invaluable. Era un método de cuatro pasos comprobado que de algún modo pasaba desapercibido en el ecosistema del desarrollador.

En este artículo, repasaré este método de resolución de problemas en cuatro pasos que puedes usar para empezar a resolver problemas de codificación con seguridad.

Resolver problemas de código no es solo parte del proceso de entrevista de trabajo para desarrolladores—es lo que un desarrollador hace todo el día. Después de todo, escribir código es resolver problemas.

Un método para resolver problemas

Este método es del libro How to Solve It de George Pólya. Salió originalmente en 1945 y ha vendido más de un millón de copias.

Su método de resolución de problemas ha sido usado e impartido por muchos programadores, desde profesores de ciencias de la computación (mira el curso de Introduccion a las Ciencias de la Computación de Udacity impartido por el profesor David Evans) hasta modernos maestros del desarrollo web moderno como Colt Steele.

Veamos cómo resolver un problema sencillo de codificación usando el método de resolución de problemas en cuatro pasos. Esto nos permitirá ver el método en acción mientras lo aprendemos. Usaremos JavaScript como nuestro lenguaje de elección. El problema es el siguiente:

Crea una función que sume dos números y devuelva ese valor.

Hay cuatro pasos para el método de resolución de problemas:

1. Entender el problema.
2. Diseñar un plan.
3. Llevar a cabo el plan.
4. Mirar atrás.

Empecemos con el paso uno.

Paso 1: Entender el problema

Cuando te plantean un problema de código en una entrevista, es tentador el apresurarse a tirar código. Es difícil evitarlo, en especial si tienes un límite de tiempo.

No obstante, trata de contener ese impulso, Asegúrate que de verdad entiendes el problema antes de empezar a resolverlo.

Lee el problema. Si estás en una entrevista, puedes leer el problema en voz alta si eso te ayuda a ir más despacio.

A medida que leas el problema, aclara cualquier parte que no entiendas. Si estás en una entrevista, puedes hacer preguntas a tu entrevistador sobre la descripción del problema. Si estás por tu cuenta, piensa y/o busca en Google las partes de la pregunta que no entiendas.

Este primer paso es vital, ya que con frecuencia no tomamos el tiempo de entender por completo el problema. Cuando no entiendes el problema en su totalidad, te será más difícil resolverlo.

Para ayudarte a entender mejor el problema, pregúntate:

¿Cuáles son los datos de entrada?

¿Qué tipos de datos de entrada tendrá este problema? En este ejemplo, las entradas son los argumentos que tomará nuestra función.

Tan solo de leer la descripción del problema hasta ahora, sabemos que las entradas serán numéricas. Pero para ser más específicos, podemos preguntar:

¿Las entradas siempre serán únicamente dos números? ¿Qué pasaría si nuestra función recibe tres números como entrada?

Aquí podríamos pedirle al entrevistador que nos lo aclare, o examinar la descripción del problema con más detalle.

El problema de codificación puede que tenga una nota que diga, "Solo debes esperar dos entradas para la función." Si es así, ya sabes como proceder. Puedes ser más específico, ya que te darás cuenta de que necesitas preguntar más sobre qué tipo de entradas podrías estar recibiendo.

¿Las entradas siempre serán números? ¿Qué debería hacer nuestra función si recibe las entradas "a" y "b"? Aclara si nuestra función siempre recibirá números o no.

Opcionalmente, puedes escribir las posibles entradas en un comentario de código para hacerte una idea de cómo serán:

//entradas: 2, 4

A continuación, pregunta:

¿Cuáles son los datos de salida?

¿Qué devolverá esta función? En este caso, la salida será un número que es el resultado de los dos números de entrada. Asegúrate de entender cuales serán tus salidas.

Crea algunos ejemplos.

Una vez que tengas claro el problema y conozcas las posibles entradas y salidas, puedes empezar a trabajar en algunos ejemplos concretos.

Los ejemplos también pueden ser usados como controles de cordura para probar tu problema eventual. La mayoría de los editores de retos de código en los que trabajarás (ya sea en una entrevista o usando un sitio como Codewars o HackerRank) tienen ejemplos o casos de prueba ya escritos para ti. Aun así, escribir tus propios ejemplos puede ayudarte a consolidar tu comprensión del problema.

Empieza con uno o dos ejemplos sencillos de posibles entradas y salidas. Regresemos a nuestra función de suma.

Llamemos a nuestra función "sumar."

¿Cuál es un ejemplo de entrada? Uno podría ser:

// sumar(2, 3)

¿Cuál es la salida de esto? Para escribir la salida de ejemplo, podemos escribir:

// sumar(2, 3) ---> 5

Esto indica que nuestra función tomará una entrada de 2 y 3 y devolverá 5 como salida.

Crear ejemplos complejos.

Recorriendo ejemplos más complejos, puedes tomarte el tiempo para buscar casos extremos que puedas necesitar tener en cuenta.

Por ejemplo, ¿qué debemos hacer si nuestras entradas son cadenas en lugar de números? ¿Y si tenemos como entradas dos cadenas, por ejemplo, sumar('a', 'b')?

Puede que tu entrevistador posiblemente te diga que devuelvas un mensaje de error si hay algunas entradas que no sean números. De ser así, puedes agregar un comentario en el código para manejar este caso si te ayuda a recordar que necesitas hacer esto.

// devolver error si las entradas no son números.

Tu entrevistador puede también decirte que asumas que tus entradas siempre serán números, en cuyo caso no necesitas escribir código extra para manejar esta entrada particular de caso extremo.

Si no tienes un entrevistador y solo estás resolviendo este problema, puede que el problema te diga qué pasa cuando introduces entradas inválidas.

Por ejemplo, alguos problemas dirán, "si hay cero entradas, devuelve undefined (indefinido)." Para casos como este, opcionalmente puedes escribir un comentario.

// revisa si no hay entradas.

// si no hay entradas, devuelve undefined.

Para nuestros propósitos, asumiremos que nuestras entradas siempre serán números. Pero en general, es bueno pensar en casos extremos.

El profesor Evans de informática dice que escribamos lo que los desarrolladores llaman código defensivo. Piensa en lo que podría salir mal y en cómo tu código podría defenderse de posibles errores.

Antes de continuar con el paso 2, resumamos el paso 1, entender el problema:

-Lea a fondo el problema.

-¿Cuáles son las entradas?

-¿Cuáles son las salidas?

Crea ejemplos simples, luego crea ejemplos más complejos.

2. Diseñar un plan para resolver el problema.

A continuación, diseña un plan para resolver el problema. A medida que lo diseñas, escríbelo en pseudocódigo.

El pseudocódigo es una descripción en lenguaje llano de los pasos de un algoritmo. En otras palabras, tu pseudocódigo es tu plan paso a paso de cómo resolver el problema.

Escribe los pasos que necesitas tomar para resolver el problema. Para un problema más complicado, tendrías más pasos. Para este problema, podrías escribir:

// Crea una variable suma.

Suma la primer entrada a la segunda entrada usando el operador de suma.

// Guarda el valor de ambas entradas en la variable suma.

// Devuelve como salida la variable suma.

Ahora tienes tu plan paso a paso para resolver el problema.

Para problemas más complejos, el profesor Evans denota, "considera sistemáticamente cómo un humano resuelve el problema." Eso es, olvídate de cómo tu código podría resolver el problema por un momento, y piensa en cómo lo resolverías tú como un humano. Esto te puede ayudar a ver los pasos más claramente.

3. Llevar a cabo el plan (¡Resolver el problema!)

El siguiente paso en la estrategia de resolución de problemas es resolver el problema en sí. Usando tu pseudocódigo como tu guía, escribe tu código real.

El profesor Evans sugiere enfocarse en una solución sencilla y mecánica. Entre más fácil y simple sea tu solución, más probabilidades habrá de que lo programes correctamente.

Tomando nuestro pseudocódigo, ahora podríamos escribir esto:

function sumar(a, b) {
 const suma = a + b;
 return suma;
}

El profesor Evans añade, recuerda no optimizar prematuramente. Eso es, puede que estés tentado a decir, "¡Espera, estoy haciendo esto y va a ser un código ineficiente!"

Primero, solo saca tu solución simple y mecánica.

¿Y si no puedes resolver el problema entero? ¿Y si hay una parte que aún no sabes como resolver?

Colt Steele da un gran consejo aquí: Si no puedes resolver una parte del problema, ignora esa parte difícil que te está deteniendo. En su lugar, enfócate en lo demás que puedas empezar a escribir.

Ignora temporalmente esa parte difícil del problema que no acabas de entender, y escribe las otras partes. Una vez hecho eso, regresa a la parte más difícil.

Esto te permite terminar al menos algo del problema. Y  a menudo te darás cuenta de cómo abordar esa parte más difícil del problema una vez que regreses a ella.

Paso 4: Revisar lo que has hecho.

Una vez que tu solución esté funcionando, toma tu tiempo para reflexionar sobre ella y descubrir cómo hacerle mejoras. Este podría ser el momento de refactorizar tu solución en una más eficiente.

Cuando analices tu trabajo, aquí tienes algunas preguntas que Colt Steele sugiere te hagas para descubrir cómo puedes mejorar tu solución:

• ¿Puedes obtener el resultado de manera diferente? ¿Qué otros enfoques hay que sean viables?
• ¿Puedes entenderlo a primera vista? ¿Tiene sentido?
• ¿Puedes usar el resultado o método para otro problema?
• ¿Puedes mejorar los rendimientos de tu solución?
• ¿Puedes pensar en otras maneras de refactorizar?
• ¿Cómo han resuelto este problema otras personas?

Una manera en que podríamos refactorizar nuestro problema para hacer nuestro código más conciso: remover nuestra variable y usar un retorno implícito:

function sumar(a, b) {
 return a + b;
}

Con el paso 4, tu problema podría que nunca parezca terminado. Incluso grandes desarrolladores aún escriben código que más tarde lo miran y quieren cambiar. Estas son preguntas guía que pueden ayudarte.

Si todavía tienes tiempo en una entrevista, puedes repasar este paso y mejorar tu solución. Si estás escribiendo código por tu cuenta, toma el tiempo para repasar estos pasos.

Cuando estoy practicando el escribir código por mi cuenta, casi siempre me fijo en las soluciones que hay allá afuera que son más elegantes o efectivas que lo que yo he ideado.

Conclusión

En esta publicación, hemos repasado la estrategia de resolución de problemas de cuatro pasos para resolver problemas de codificación.

Repasémoslas aquí:

• Paso 1: entender el problema.
• Paso 2: diseñar un plan paso a paso de cómo resolverlo.
• Paso 3: llevar a cabo el plan y escribir el código real.
• Paso 4: revisar y posiblemente refactorizar tu solución para mejorarla.

Practicar este método de resolución de problemas me ha ayudado inmensamente  en mis entrevistas técnicas y en mi trabajo como desarrolladora.

Si no te sientes con la confianza a la hora de resolver problemas de escribir código, tan solo recuerda que la resolución de problemas es una habilidad que cualquiera puede mejorar con tiempo y práctica.

¡Buena suerte!

Si tienes comentarios o preguntas sobre esta publicación, siéntete libre de tuitarme @madisonkanna.

Niklaus Wirth, informático suizo, escribió un libro en 1976 titulado Algoritmos + Estructura de Datos = Programas.

40+ años más tarde, esa ecuación se mantiene. Por eso, los candidatos a ingeniería de software tienen que demostrar su entendimiento de las estructuras de datos junto con sus aplicaciones.

Casi todos los problemas requieren que el candidato demuestre un profundo conocimiento de estructura de datos. No importa si recién te has graduado (de la universidad o bootcamp de programación), o si tienes décadas de experiencia.

A veces las preguntas de la entrevista mencionan explícitamente una estructura de datos, por ejemplo, "dado un árbol binario. "Otras veces es implícito, como "queremos rastrear el número de libros asociados a cada autor."

Aprender estructura de datos es esencial, incluso si solo estás tratando de mejorar en tu trabajo actual. Empecemos con entender lo básico.

¿Qué es una Estructura de Datos?

De manera simple, una estructura de datos es un contenedor que almacena datos en una disposición específica. Esta "disposición" permite que una estructura de datos sea eficiente en algunas operaciones e ineficiente en otras. Tu meta es comprender las estructuras de datos para que puedas elegir la que sea más óptima para el problema en cuestión.

¿Por qué necesitamos Estructuras de Datos?

Así como las estructuras de datos son usadas para almacenar datos de una forma organizada, y dado que los datos son la entidad más crucial en informática, el verdadero valor de las estructuras de datos es claro.

No importa qué problema estés resolviendo, de un modo u otro tienes que tratar con datos — ya sea el salario de un empleado, precios de acciones, una lista de compras, o incluso un directorio telefónico simple.

Basado en diferentes escenarios, los datos necesitan ser almacenados en un formato específico. Tenemos un puñado de estructuras de datos que cubren nuestra necesidad de almacenar datos en distintos formatos.

Estructuras de Datos más Usadas

Enlistemos primero las estructuras de datos más usadas, y después las revisaremos una por una:

1. Arreglos
2. Pilas
3. Colas
4. Listas Enlazadas
5. Árboles
6. Grafos
7. Tries (en realidad son árboles, pero es bueno mencionarlos por separado).
8. Tablas Hash

Arreglos

Un arreglo es la más simple y más usada estructura de datos. Otras estructuras de datos, como las pilas y las colas, provienen de los arreglos.

A continuación puedes ver una imagen de un arreglo simple de tamaño 4, que contiene elementos (1, 2, 3 y 4).

A cada elemento de datos se le asigna un valor numérico positivo llamado índice, que corresponde a la posición de ese elemento en el arreglo. La mayoría de los lenguajes definen al 0 (cero) como el índice inicial.

Los dos tipos de arreglos son:

• Arreglos unidimensionales (como el de la imagen de arriba)
• Arreglos multidimensionales (arreglos dentro de arreglos)

Operaciones Básicas con Arreglos

• Insert — Inserta un elemento en un índice dado
• Get — Devuelve el elemento sobre un índice dado
• Delete — Borra un elemento sobre un índice dado
• Size — Obtiene la cantidad total de elementos en un arreglo

Preguntas Frecuentes sobre Arreglos en las Entrevistas

• Encontrar el segundo elemento mínimo de un arreglo
• Los primeros enteros no repetidos en un arreglo
• Combinar dos arreglos ordenados
• Reordenar los valores positivos y negativos en un arreglo

Pilas

Todos conocemos la famosa opción Deshacer(Undo), que está presente en casi todas las aplicaciones. ¿Te has preguntado alguna vez cómo funciona? La idea: almacenas los estados previos de tu trabajo (que están limitados a un número específico) en la memoria en cierto orden tal que el último aparece primero. Esto no se puede hacer solo usando arreglos. Aquí es donde la Pila resulta útil.

Un ejemplo de la vida real del uso de la Pila podría ser una pila de libros colocados en orden vertical. Para obtener el libro que está en algún lugar en medio, necesitarás remover todos los libros que están encima de él. Así es como funciona el método LIFO (Last In First Out; en español UEPS, o Último en Entrar, Primero en Salir).

Abajo puedes encontrar una imagen de una pila que contiene 3 elementos de datos (1, 2 y 3), donde 3 está en la cima y será removido primero:

Operaciones básicas de la pila:

• Push — Inserta un elemento en la cima
• Pop — Devuelve el elemento de la cima después de eliminarlo de la pila
• isEmpty — Devuelve verdadero si la pila está vacía
• Top — Devuelve el elemento que está en la cima sin eliminarlo de la pila

Preguntas Frecuentes sobre Pilas en las Entrevistas

• Evaluar una expresión postfijas usando una pila
• Ordenar valores en una pila
• Comprobar paréntesis equilibrados en una expresión

Colas

Similar a la Pila, la Cola es otra estructura de datos lineal que almacena elementos de manera secuencial. La única diferencia significativa entre la Pila y la Cola es que en lugar de usar el método LIFO, la Cola implementa el método FIFO (First In First Out; en español PEPS, o Primero en Entrar Primero en Salir).

Un ejemplo perfecto de la Cola en la vida real: una fila de personas esperando en taquilla. Si llega una nueva persona, se formará al final de la fila, no al inicio — y la persona situada al inicio de la fila será la primera en conseguir boleto y, por lo tanto, la primera en dejar la fila.

A continuación una imagen de la Cola conteniendo cuatro elementos de datos (1, 2, 3 y 4), donde 1 está al inicio y será removido primero:

Operaciones básicas de la Cola

• Enqueue() — Inserta un elemento al final de la cola
• Dequeue() — Elimina un elemento del inicio de la cola
• isEmpty() — Devuelve verdadero si la cola está vacía
• Top() — Devuelve el primer elemento de la cola

Preguntas Frecuentes sobre Colas en las Entrevistas

• Implementar una pila usando una cola
• Invertir los primeros k elementos de una cola
• Generar números binarios desde 1 hasta n usando una cola

Lista enlazada

Una lista enlazada es otra estructura de datos lineal importante que a primera vista puede lucir similar a los arreglos, pero difiere en la asignación de memoria, la estructura interna y la forma en que se llevan a cabo las operaciones básicas de inserción y eliminación.

Una lista enlazada es como una cadena de nodos, donde cada nodo contiene información como datos y un puntero al siguiente nodo de la cadena. Hay un puntero a la cabecera, que apunta al primer elemento de la lista enlazada, y si la lista está vacía, entonces simplemente apunta a null o nada.

Las listas enlazadas son usadas para implementar sistemas de archivos, tablas hash y listas de adyacencia.

Aquí está una representación visual de la estructura interna de una lista enlazada:

A continuación se muestran los tipos de listas enlazadas:

• Lista Simple Enlazada (Unidireccional)
• Lista Doblemente Enlazada (Bidireccional)

Operaciones básicas de las Listas Enlazadas

• InsertAtEnd — Inserta un elemento dado al final de la lista enlazada
• InsertAtHead — Inserta un elemento dado al inicio/cabeza de la lista enlazada
• Delete — Elimina un elemento dado de la lista enlazada
• DeleteAtHead — Elimina el primer elemento de la lista enlazada
• Search — Devuelve el elemento dado de una lista enlazada
• isEmpty — Retorna verdadero si la lista enlazada está vacía

Preguntas Frecuentes sobre Listas Enlazadas en las Entrevistas

• Invertir una lista enlazada
• Detectar bucle en una lista enlazada
• Devolver el nodo N del final de una lista enlazada
• Eliminar duplicados de una lista enlazada

Grafos

Un grafo es un conjunto de nodos que están conectados entre sí en forma de red. Los nodos son también llamados vértices. Un par(x,y) se denomina arista, que indica que el vértice x está conectado al vértice y. Una arista puede contener peso/costo, mostrando cuánto cuesta viajar del vértice x al y.

Tipos de Grafos:

• Grafo no dirigido
• Grafo dirigido

En lenguaje de programación, los grafos pueden ser representados de dos formas:

• Matriz de adyacencia
• Lista de adyacencia

Algoritmos comunes de recorrido de grafos:

• Recorrido o Búsqueda en Amplitud o Anchura
• Recorrido o Búsqueda en Profundidad

Preguntas Frecuentes sobre Grafos en las Entrevistas

• Implementar Recorrido en Amplitud o Anchura y en Profundidad
• Comprobar si un grafo es un árbol o no
• Contar el número de aristas en un grafo
• Encontrar el camino más corto entre dos vértices

Árboles

Un árbol es una estructura de datos jerárquica que consiste en vértices (nodos) y aristas que los conectan. Los árboles son similares a los grafos, pero la diferencia clave entre ellos es que un ciclo no puede existir en un árbol.

Los árboles son usados extensamente en la Inteligencia Artificial y algoritmos complejos para proveer un mecanismo eficiente de almacenamiento para la resolución de problemas.

Abajo se puede ver la imagen de un árbol simple, y la terminología básica usada en la estructura de datos de un árbol:

Lo siguiente son los tipos de árboles:

• Árbol N-ario
• Árbol Equilibrado
• Árbol Binario
• Árbol de Búsqueda Binaria
• Árbol AVL
• Árbol Rojo Negro
• Árbol 2-3

De todos los mencionados, el Árbol Binario y el Arbol de Búsqueda Binaria son los más comúnmente usados.

Preguntas Frecuentes sobre Árboles en las Entrevistas

• Hallar la altura de un árbol binario
• Hallar el k-ésimo valor máximo en un árbol de búsqueda binaria
• Hallar los nodos a "k" distancia desde la raíz
• Hallar los ancestros de un nodo dado en un árbol binario

Trie

Trie, también conocido como "Árboles de Prefijos", es una estructura de datos en forma de árbol que prueba ser muy eficiente para resolver problemas relacionados con cadenas de caracteres. Proporciona una recuperación rápida y es mayormente usada para buscar palabras en un diccionario, proveer sugerencias automáticas en un motor de búsqueda, e incluso para enrutamiento IP.

Abajo hay una ilustración de cómo las tres palabras “top”, “thus”, y “their” se almacenan en un Trie:

Las palabras son almacenadas de arriba a abajo donde los nodos de color verde “p”, “s” y “r” indican el final de “top”, “thus”, y “their” respectivamente.

Preguntas Frecuentes sobre Tries en las Entrevistas

• Contar el número total de palabras en un Trie
• Imprimir todas las palabras almacenadas en un Trie
• Ordenar los elementos de un arreglo usando un Trie
• Formar palabras a partir de un diccionario usando un Trie
• Construir un diccionario T9

Tabla Hash

El Hashing es un proceso utilizado para identificar objetos de forma única, y almacenar cada objeto en algún índice único precalculado llamado su "llave". Entonces, el objeto es almacenado en forma de un par "llave-valor", y la colección de dichos elementos es llamada "diccionario". Cada objeto puede ser buscado usando esa llave. Hay diferentes estructuras de datos basadas en hashing, pero la más usada es la tabla hash.

Las tablas hash generalmente se implementan usando arreglos.

El rendimiento de la estructura de datos hash depende de estos tres factores:

• Función Hash
• Tamaño de la Tabla Hash
• Método de Manejo de Colisiones

Aquí hay una ilustración de cómo el hash es mapeado en un arreglo. El índice de este arreglo es calculado mediante una Función Hash.

Preguntas Frecuentes sobre Hash en las Entrevistas

• Hallar pares simétricos en un arreglo
• Trazar el camino completo de un viaje
• Hallar si un arreglo es un subconjunto de otro arreglo
• Comproban si arreglos dados son disjuntos

Éstas son las ocho principales estructuras de datos que definitivamente deberías conocer antes de presentarte a una entrevista de programación.

¡Buena suerte y feliz aprendizaje! :)

En JavaScript, los módulos se refieren a un archivo que contiene código JavaScript, el cual realiza un propósito específico.

Los módulos son autocontenidos, lo que facilita agregar, eliminar y actualizar funcionalidades sin afectar a todo tu código, porque están desacoplados de otras piezas de código.

Cuando tienes estos módulos en archivos JavaScript separados, querrás usarlos dentro del archivo JavaScript original.

En este artículo aprenderás lo que la función require() hace, cómo la puedes usar, y algunas diferencias entre las funciones require e import.

Durante mucho tiempo, el sistema de módulo CommonJS ha sido el sistema de módulo por defecto dentro del ecosistema Node.js. Pero un nuevo sistema de módulo fue introducido en Node.js v8.5.0, el cual es el sistema de módulo ES.

Los módulos CommonJS y EMCAScript (módulos ES) ahora trabajan a la perfección en Node.js. La mayor diferencia entre ellos es su ejecución.

Cómo ejecutar los módulos CommonJS y ES

En el navegador, la ejecución del módulo JavaScript depende de las sentencias import y export. Estas sentencias cargan y exportan los módulos ES respectivamente. Esta es la manera estándar y oficial de reusar módulos en JavaScript, y es lo que la mayoría de navegadores web soportan de forma nativa.

Por defecto, Node.js soporta el formato de módulo CommonJS, que carga módulos usando la función require(), y los exporta con module.exports.

¿Qué es la función JavaScript require()?

La función require() es una función de módulo CommonJS incorporada soportada en Node.js que te permite incluir módulos dentro de tu proyecto. Esto se debe a que, por defecto, Node.js trata el código JavaScript como módulos CommonJS.

Cómo Usar la Función require() en JS

La función require() es fácil de usar y entender, ya que todo lo que tienes que hacer es asignar la función a una variable.

En esta función, pasarás el nombre de la ubicación como argumento. Esta es la sintaxis general:

const NombreVariable = require(nombreUbicacion);

Supón que tienes un módulo CommonJS que exporta una función obtenNombreCompleto como se ve a continuación:

// utils.js
const obtenNombreCompleto = (nombre, apellido) => {
    return `Mi nombre completo es ${nombre} ${apellido}`;
};
module.exports = obtenNombrecompleto;

Entonces puedes usar la función require() para usar/incluir este módulo dentro de tu archivo JavaScript:

// index.js
const obtenNombreCompleto = require('./utils.js');
console.log(obtenNombreCompleto('John', 'Doe')); // Mi nombre completo es John Doe

El módulo se encuentra dentro de un archivo local en el código de arriba, razón por la cual se hace referencia a la dirección local usando el nombre del archivo.

Pero en una situación en la que quieras incluir un módulo externo desde la web, entonces haces uso de la localización basada en la web:

const miVar = require('http://modulo-web.localizacion');

Funciones require() vs import()

Las funciones/sentencias require e import son usadas para incluir módulos dentro de tu archivo JavaScript, pero poseen algunas diferencias. Las dos principales son:

• La función require() puede ser llamada desde cualquier parte dentro del programa, mientras que import() no puede ser llamada condicionalmente. Siempre se ejecuta al inicio del archivo.
• Para incluir un módulo con la función require(), ese módulo debe ser guardado con una extensión .js en lugar de una .mjs cuando la sentencia import() es utilizada.

Conclusión

En este artículo, has aprendido lo que hace la función require(), cómo funciona, y cuándo la puedes usar en Node.js.

Es crucial entender que la sentencia import solo está permitida en módulos ES y no puede ser usada en scripts embebidos sin el atributo type="module". Además, para usar módulos ES en Node.js, debes guardar dichos módulos con una extensión .mjs:

// utils.mjs
export const obtenNombrecompleto = (nombre, apellido) => {
    return `Mi nombre completo es ${nombre} ${apellido}`;
};

// index.js
import { obtenNombrecompleto } from './utils.mjs';
console.log(obtenNombreCompleto('John', 'Doe')); // Mi nombre completo es John Doe

¡Diviértete escribiendo código!

Puedes acceder a más de 180 de mis artículos visitando mi sitio web. También puedes usar el campo de búsqueda para revisar si he escrito algún artículo en específico.

map es un contenedor que almacena elementos en pares clave-valor. Es similar a las colecciones en Java, los arreglos asociativos en PHP, o los objetos en JavaScript.

Aquí están los principales beneficios de usar map:

• map solo almacena claves únicas, y las propias claves están ordenadas
• Debido a que las claves están ya ordenadas, el buscar un elemento es muy rápido
• Hay solo un valor para cada clave

Aquí un ejemplo:

#include <iostream>
#include <map>

using namespace std;

int main (){
  map<char,int> primero;
  
  //inicializando
  primero['a']=10;
  primero['b']=20;
  primero['c']=30;
  primero['d']=40;
  
   map<char, int>::iterator eso;
   for(eso=primero.begin(); eso!=primero.end(); ++eso){
      cout << eso->primero << " => " << eso->segundo << '\n';
   }
   
  return 0;
}

Salida:

a => 10
b => 20
c => 30
d => 40

Creación de un objeto map

map<string, int> miMapa;

Inserción

Inserción de datos con la función miembro insert

miMapa.insert(make_pair("Tierra", 1));
miMapa.insert(make_pair("Luna", 2));

También podemos insertar datos en std::map usando el operador [] es decir

miMapa["Sol"] = 3;

Acceso a los elementos de map

Para acceder a los elementos de map, tienes que crear un iterador. Por ejemplo:

map<char, int>::iterator eso;
for(eso=primero.begin(); eso!=primero.end(); ++eso){
  cout << eso->first << " => " << eso->second << '\n';
}

Una introducción a la variable __name__ y su uso en Python

Es muy probable que hayas visto la variable __name__ cuando has revisado código de Python. A continuación puedes ver un fragmento de código de ejemplo de cómo puede lucir:

if __name__ == '__main__':    main()

En este artículo quiero mostrarte cómo puedes hacer uso de esta variable para crear módulos en Python.

¿Por qué se usa la variable _ _name_ _ ?

La variable __name__ (dos guiones bajos antes y después) es una variable especial de Python. Toma su valor dependiendo de cómo se ejecute el script contenedor.

A veces escribes un script con funciones que también pueden ser útiles en otros scripts. En Python, puedes importar ese script como un módulo en otro script.

Gracias a esta variable especial, puedes decidir si quieres ejecutar ese script, o importar las funciones definidas en el mismo.

¿Qué valores puede contener la variable __name__ ?

Cuando ejecutas tu script, la variable __name__ es igual a __main__ . Cuando importas el script contenedor, contendrá el nombre del script.

Veamos estos dos casos de uso y describamos el proceso con dos ilustraciones.

Escenario 1 - Ejecutar el script

Supongamos que escribimos el script nombreScript.py de la siguiente manera:

def miFuncion():    print 'El valor de __name__ es ' + __name__

def main():    miFuncion()

if __name__ == '__main__':    main()

Si ejecutas nombreScript.py, se sigue el proceso de abajo.

Antes de que ejecute cualquier otro código, la variable __name__ se establece a __main__. Después, las sentencias def de main y miFuncion se ejecutan. Debido a que la condición se evalúa a verdadero, la función main es llamada. Esta a su vez llama a miFuncion. Esto imprime el valor de __main__.

Escenario 2 - Importar el script en otro script

Si queremos reusar miFuncion en otro script, por ejemplo importandoScript.py, podemos importar nombreScript.py como un módulo.

El código enimportandoScript.py podría ser el siguiente:

import nombreScript as ns

ns.miFuncion()

Entonces tenemos dos ámbitos: uno de importandoScript y el segundo de nombreScript. En la imagen puedes ver como difiere del primer caso de uso.

En importandoScript.py la variable __name__ se establece a __main__. Al importar nombreScript, Python empieza a buscar un archivo agregando .py al nombre del módulo. Luego ejecuta el código contenido en el archivo importado.

Pero esta vez se establece a nombreScript; de nuevo las sentencias def para main y miFuncion son ejecutadas, pero ahora la condición evalúa a falso y main no es llamado.

En importandoScript.py llamamos a miFuncion que da como salida nombreScript. NombreScript es conocida por miFuncion cuando esa función fue definida.

Si imprimieras __name__ en importandoScript, saldría __main__. La razón de esto es que Python usa el valor conocido en el ámbito de importandoScript.

Conclusión

En este breve artículo, expliqué cómo puedes usar la variable __name__ para escribir módulos. También puedes ejecutar estos módulos por sí mismos. Esto se puede lograr al hacer uso de cómo los valores de estas variables cambian dependiendo de dónde ocurren.

La notación Big O es una manera de describir la rapidez o complejidad de un algoritmo dado. Si tu proyecto actual requiere un algoritmo predefinido, es importante entender qué tan rápido o lento es comparado con otras opciones.

¿Qué es la notación Big O y cómo funciona?

En palabras simples, la notación Big O te dice el número de operaciones que hará un algoritmo. Toma su nombre de la "O grande" en frente del número estimado de operaciones.

Lo que la notación Big O no te dice es la rapidez del algoritmo en segundos. Hay demasiados factores que influyen en el tiempo que tarde en ejecutarse un algoritmo. En su lugar, usarás la notación Big O para comparar diferentes algoritmos por el número de operaciones que hacen.

Big O establece un tiempo de ejecución en el peor de los casos

Imagina que eres un maestro y tienes una estudiante de nombre Jane. Quieres encontrar sus registros, así que usas un algoritmo de búsqueda simple para recorrer la bases de datos de tu distrito escolar.

Sabes que a la búsqueda simple le toma O(n) veces ejecutarse. Esto significa que, en el peor de los casos, tendrás que buscar en cada uno de los registros (representados por n) para encontrar el de Jane.

Pero cuando ejecutas la búsqueda simple, encuentras que los registros de Jane son la primera entrada en la base de datos. No tienes que mirar cada entrada – la encontraste en tu primer intento.

¿Este algoritmo tardó O(n) tiempo? ¿O tardó O(1) porque encontraste los registros de Jane en el primer intento?

En este caso, O(1) es el mejor de los casos: tuviste suerte de que los registros de Jane estuvieran al principio. Pero la notación Big O se enfoca en el peor de los casos, el cual es O(n) para la búsqueda simple. Es una garantía de que la búsqueda simple nunca será más lenta que el tiempo O(n).

Los tiempos de ejecución de los algoritmos crecen a ritmos diferentes

Asume que toma 1 milisegundo revisar cada elemento de la base de datos del distrito escolar.

Con la búsqueda simple, si tienes que revisar 10 entradas, le tomará 10 ms en ejecutarse. Pero con el algoritmo de búsqueda binaria, solo tienes que revisar 3 elementos, lo que toma 3 ms en ejecutarse.

En la mayoría de los casos, la lista o base de datos en la que necesitas buscar tendrá cientos o miles de elementos.

Si hay mil millones de elementos, usar la búsqueda simple tardará hasta 1 mil millones de ms, u 11 días. En cambio, la búsqueda binaria tardará solamente 32 ms en el peor de los casos:

Claramente, los tiempos de ejecución de la búsqueda simple y de la búsqueda binaria no crecen ni de cerca al mismo ritmo. Mientras más aumenta la lista de entradas, a la búsqueda binaria solo le toma un poco más de tiempo en ejecutarse. El tiempo de ejecución de la búsqueda simple crece exponencialmente mientras la lista de entradas aumente.

Por esto es muy importante saber cómo el tiempo de ejecución se incrementa en relación con el tamaño de una lista. Y aquí es exactamente donde la notación Big O es muy útil.

La notación Big O muestra el número de operaciones

Como se mencionó antes, la notación Big O no muestra el tiempo que tardará en ejecutarse un algoritmo. En su lugar, muestra el número de operaciones que procesará. Te dice qué tan rápido crece un algoritmo y te permite compararlo con otros.

He aquí algunos algoritmos comunes y sus tiempos de ejecución en notación Big O:

Ahora ya sabes lo suficiente para ser peligroso con la notación Big O. Sal allá y empieza a comparar algoritmos.

Actualización de enero del 2019: Si estás regresando a este blog después de actualizar a macOS Mojave, por favor consulta este tema de github para solucionar el problema común de pyenv 'zlib no disponible'.

Antes de empezar, repasemos brevemente los términos usados en el título:

• Múltiples versiones de Python: Diferentes instalaciones de Python en la misma máquina, por ejemplo, 2.7 y 3.4.
• Entornos virtuales: entornos independientes aislados que pueden tener tanto una versión específica de Python como de cualesquiera paquetes específicos de proyecto instalados en ellos, sin afectar a otros proyectos.

Aquí se verán tres herramientas diferentes para trabajar con estos, y cuándo puede que se necesite cada una. Exploremos los casos de uso para:

• venv / pyvenv
• pyenv
• pyenv-virtualenv

Si se está usando una sola versión de Python, como la versión 3.3+, y se quieren administrar diferentes entornos virtuales, entonces venv es todo lo que se necesita.

Si se quieren usar múltiples versiones de Python en 3.3+, con o sin entornos virtuales, entonces hay que leer sobre pyenv.

Si también se quiere trabajar con Python 2, entonces pyenv-virtualenv es una herramienta a considerar.

venv

Desde Python 3.3+ el paquete venv está incluido. Es ideal para crear entornos virtuales ligeros.

Hasta Python 3.6 un script llamado pyvenv también se incluyó como envoltorio de  venv, pero ya es obsoleto. Se eliminará por completo en Python 3.8. La misma funcionalidad está disponible cuando se usa venv, y cualquier documentación existente debe ser actualizada. Para quien esté interesado, puede leer las razones detrás de la depreciación de pyvenv.  

venv se usa para crear un nuevo entorno mediante la terminal de comandos:

$ python3 -m venv nombre-del-directorio-a-crear

se activa con:

$ source nombre-dado/bin/activate

y se desactiva simplemente con:

$ deactivate

Si se necesita eliminar el entorno por completo después de desactivarlo, se puede ejecutar:

$ rm -r nombre-dado

Por defecto, el entorno que se crea será de la versión actual de Python que se está usando. Si se está escribiendo documentación y se quiere la seguridad adicional de que la versión correcta de Python está siendo usada por el lector, se puede especificar el número de versión mayor y menor en el comando de este modo:

$ python3.6 -m venv example-three-six

Si el lector utiliza una versión distinta de la 3.6, entonces el comando no tendrá éxito y lo indicará en su mensaje de error. Sin embargo, cualquier versión de parche (por ejemplo 3.6.4) funcionará.

Cuando el entorno está activo, cualquier paquete puede ser instalado ahí mediante pip de manera normal. Por defecto, el entorno recién creado no incluirá ningún paquete ya instalado en la computadora. Como el propio pip no estará necesariamente instalado en la computadora, se recomienda que primero se actualice pip a la última versión usando pip install --upgrade pip.

Los proyectos comúnmente tendrán un archivo requirements.txt especificando sus dependencias. El siguiente comando pip install -r requirements.txt instalará rápidamente todos los paquetes al recién creado entorno virtual. Esos paquetes solo existirán en dicho entorno virtual. No estarán disponible cuando se desactive el entorno virtual, pero persistirán cuando se reactive nuevamente.

Si no se necesita usar versiones adicionales de Python, entonces esto es todo lo que se requiere para crear entornos virtuales aislados y especificos del proyecto.

pyenv

Si se desea usar múltiples versiones de Python en un solo equipo, entonces pyenv es una herramienta comúnmente usada para instalar y cambiar entre versiones. Esto no se debe confundir con el script depreciado pyvenv mencionado anteriormente. No viene de paquete con Python, y debe ser instalado por separado.

La documentación de pyenv incluye una amplia descripción de cómo funciona, por lo que aquí se verá simplemente como usarlo.

Primero se necesita instalarlo. Si se usa Mac OS X, esto se consigue usando Homebrew, de lo contrario hay que considerar otras opciones de instalación.

$ brew update
$ brew install pyenv

Después, se agrega lo siguiente al final de nuestros scripts de shell para permitir que pyenv cambie automáticamente las versiones:

eval "$(pyenv init -)"

Para hacerlo, abre el script de shell en uso mediante $ ~/.zshrc, $ ~/.bashrc o $ ~/.bash_profile y copia y pega la línea anterior.

El ejecutar pyenv versions mostrará qué versiones de Python están actualmente instaladas, con un * al lado de la que está actualmente en uso. pyenv version muestra esto directamente, y python --version puede ser usado para verificarlo.

Para instalar una versión adicional, como la 3.4.0, simplemente se usa pyenv install 3.4.0.

pyenv busca en cuatro lugares para decidir cuál versión de Python usar, en orden de prioridad:

1. La variable de entorno PYENV_VERSION (si se especifica). Se puede usar el comando pyenv shell para establecer esta variable de entorno en la sesión de shell actual.
2. El archivo .python-version específico de la aplicación en el directorio actual (si está presente). Se puede modificar el archivo .python-version del directorio actual con el comando pyenv local.
3. El primer archivo .python-version encontrado (si hay alguno) buscando en cada directorio padre, hasta llegar a la raíz del sistema de archivos.
4. El archivo de versión global. Se puede modificar este archivo usando el comando pyenv global. Si el archivo de versión global no está presente, pyenv asume que se quiere usar el Python del "sistema". (En otras palabras, cualquier versión que se ejecutaría si pyenv no estuviera en el PATH.)

Al crear un nuevo proyecto que va a usar Python 3.6.4, entonces pyenv local 3.6.4 se ejecutaría en su directorio raíz. De este modo, se establecería tanto la versión como la creación de un archivo .python-version , para que los equipos de otros colaboradores lo recojan.

La descripción completa de los comandos pyenv es algo para marcar.

pyenv y venv

Cuando se trabaja con Python 3.3+ ahora se sabe cómo instalar y cambiar entre diferentes versiones de Python, así como crear nuevos entornos virtuales.

Como ejemplo, digamos que se está configurando un proyecto que va a usar Python 3.4.

Primero se podría establecer la versión local usando pyenv local 3.4.0.

Si luego se ejecuta python3 -m venv proyecto-de-ejemplo un nuevo entorno virtual se crearía bajo proyecto-de-ejemplo, usando Python 3.4.0 habilitado localmente.

Se activa usando source proyecto-de-ejemplo/bin/activate y se puede empezar a trabajar.

Luego se podría documentar opcionalmente que un colaborador debería usar python3.4 -m venv <nombre>. Esto significa que incluso si un colaborador no estaba usando pyenv, el comando python3.4 marcaría error si su versión de Python no era la misma versión mayor y menor (3 y 4), como se pretendía.

Como alternativa, se podría elegir a especificar simplemente que la versión 3.4.0 se iba a ser usado, e instruir a python3 -m venv <nombre>. Si se cree que cualquier versión mayor a 3.4 es aceptable, entonces también se puede optar por usar python3 sobre python3.4, ya que si el colaborador estuviera usando 3.6 entonces también recibiría un error. Esta es una decisión específica de proyecto.

pyenv-virtualenv

pyenv puede ser usado para instalar ambas versiones de Python 2 y 3. Sin embargo, como se ha visto, venv está limitado a las versiones de Python superiores a la 3.3.

pyenv-virtualenv es una herramienta para crear entornos virtuales integrada con pyenv, y funciona para todas las versiones de Python. Aun así se recomienda usar el venv oficial de Python donde sea posible. Pero si, por ejemplo, se está creando un entorno virtual basado en 2.7.13, entonces esto complementa a pyenv.

Esto también funciona bien con los ambientes conda de Anaconda y Miniconda si ya se están usando. También existe una herramienta llamada virtualenv . No se cubre aquí, pero hay un enlace al final.

Después de instalar pyenv puede ser instalado usando Homebrew (u otras alternativas) de la siguiente manera:

$ brew install pyenv-virtualenv

Después, en .zshrc, .bashrc, o .bash_profile (dependiendo de la shell que se use) se agregan estas líneas al final:

eval "$(pyenv init -)"
eval "$(pyenv virtualenv-init -)"

Esto permite a pyenv activar y desactivar entornos automáticamente al mover directorios.

Para crear un nuevo entorno virtual, se usa:

$ pyenv virtualenv <version> <nombre-a-dar>

// por ejemplo

$ pyenv virtualenv 2.7.10 mi-entorno-virtual-2.7.10

Los entornos existentes se pueden listar con:

$ pyenv virtualenvs

Activar/desactivar con:

$ pyenv activate <nombre>
$ pyenv deactivate

Al momento de escribir esto, cuando se usa activate la advertencia prompt changing will be removed from future release se muestra en pantalla. Esto es de esperarse y se refiere únicamente al (nombre-entorno) siendo desplegado en el shell, no al uso del comando activate en sí.

La instalación de requerimientos funciona como se describe en  venv. A diferencia de venv, un comando rm -r no es necesario para remover un entorno, pues existe un comando uninstall.

Reflexiones finales

Entre estas tres herramientas, se tiene la habilidad de colaborar en cualquier proyecto, sin importar la versión de Python o de las dependencias requeridas. También se sabe ahora cómo documentar las instrucciones de configuración para que otros las usen para cualquier proyecto en el que se trabaje.

También se puede ver el razonamiento detrás de cuál conjunto usar, ya que no todos los desarrolladores necesitarán los tres.

Espero esto haya sido de ayuda y es una referencia útil en combinación con la documentación cuyos enlaces se muestran a continuación.

¡Gracias por leer!

La declaración de tipo de documento HTML, también conocida como DOCTYPE, es la primera línea de código requerida en todo documento HTML o XHTML. La declaración DOCTYPE es una instrucción al navegador web sobre la versión de HTML en la cual está escrita la página. Esto asegura que la página web sea analizada de la misma manera en diferentes navegadores web.

En HTML 4.01, la declaración DOCTYPE refiere a una definición de tipo de documento (DTD, Document Type Definition). Un DTD define la estructura y los elementos legales de un documento XML. Debido a que HTML 4.01 se basó en el Lenguaje de Marcado Generalizado Estándar (Standard Generalised Markup Language, SGML), referirse a un DTD en la declaración DOCTYPE era necesario.

Además, los doctypes para HTML 4.01 requerían la declaración de un DTD strict, transitional, o frameset, cada uno con un caso de uso diferente, como se indica abajo.

• DTD Estricto (Strict DTD): Usado por páginas web que excluyen atributos y elementos que la W3C espera ir eliminando a medida que crezca la compatibilidad con CSS.
• DTD Transicional (Transitional DTD): Usado por páginas web que incluyen atributos y elementos que la W3C espera ir eliminando a medida que crezca la compatibilidad con CSS.
• DTD Conjunto de marcos (Frameset DTD): Usado por páginas web con marcos.

En cambio, la declaración del DOCTYPE HTML5 es mucho más sencilla: ya no requiere una referencia a los DTDs porque ya no está basado en SGML. En los siguientes ejemplos se puede ver la comparación entre los DOCTYPE HTML 4.01 y HTML5.

Ejemplos

Sintaxis de doctype para HTML5 y posteriores:

<!DOCTYPE html>

Sintaxis de doctype para HTML 4.01 estricto:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Sintaxis de doctype para HTML 4.01 transicional:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Sintaxis de doctype para HTML 4.01 conjunto de marcos (frameset):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Historia

Durante los años de formación de HTML, aún no se había llegado a un acuerdo sobre los estándares de la web. Los fabricantes de los navegadores creaban nuevas funciones a su antojo. Había poca preocupación por la competencia entre navegadores.

El resultado fue que los desarrolladores web tenían que escoger un navegador sobre el cual desarrollarían sus sitios, lo que terminaba en que dichos sitios no se mostraran bien en navegadores no compatibles. Esta situación no podía continuar.

La W3C (Consorcio de la World Wide Web, World Wide Web Consortium) redactó un conjunto de estándares web para manejar esta situación.  Todos los fabricantes de navegadores y desarrolladores web deben apegarse a estos estándares, lo que asegura que los sitios web se muestren bien sin importar el navegador que se use.

Los cambios requeridos por los estándares fueron muy diferentes de algunas prácticas existentes. Apegarse a ellos rompería a los sitios web existentes que no cumplían con los estándares.

Para solucionar este problema, los fabricantes empezaron a programar modos de renderizado en sus navegadores. Los desarrolladores web necesitaban añadir una declaración doctype al principio de un documento HMTL. Dicha declaración le indicaría al navegador qué modo de renderizado usar para ese documento en específico.

Tres modos de renderizado por separado estuvieron generalmente disponibles entre navegadores.

• Modo de estándares completo (Full standards mode) renderiza las páginas de acuerdo a los estándares web de la W3C.
• Modo de peculiaridades (Quirks mode) renderiza las páginas de manera no conforme a los estándares.
• Modo casi estándar (Almost standards mode) se acerca al modo de estándares completos, pero ofrece soporte a un pequeño número de peculiaridades.

En la era moderna de HTML5, los estándares web están totalmente implementados en los principales navegadores. Los sitios web son generalmente desarrollados conforme a los estándares. Por esta razón, la declaración doctype de HTML5 solo existe para indicarle al navegador que renderice el documento en modo de estándares completo.

Utilización

La declaración Doctype debe ser la primera línea de código en un documento HTML, aparte de los comentarios, los cuales pueden ir antes si es necesario. Para los documentos HTML5 modernos, la declaración doctype debe ser la siguiente:

<!DOCTYPE html>

Más Información:

Aunque ya no son de uso general, existen otros tipos de declaración doctype de versiones anteriores de HTML. También existen versiones específicas para documentos XML. Para saber más sobre ellas y ver ejemplos de códigos de cada una, consulta este artículo de Wikipedia.

A note from the W3

Entrada del Glosario MDN

W3Schools

Una explicación rápida del "Modo Quirks" y "Modo Estándar".

En este artículo vas a aprender cómo escribir en mayúscula la primera letra de cualquier palabra en JavaScript. Después de eso, vas a poner en mayúscula la primera letra de todas las palabras de una oración.

Lo hermoso acerca de la programación es que no hay una solución universal para resolver un problema. Por lo tanto, en este artículo verás múltiples maneras de resolver el mismo problema.

Escribir en mayúscula la primera letra de una palabra

En primer lugar, empecemos con escribir en mayúscula la primera letra de una sola palabra. Después de que aprendas cómo hacerlo, iremos al siguiente nivel – hacerlo con cada palabra de una oración. Aquí hay un ejemplo:

const publicacion = "freeCodeCamp";

En JavaScript empezamos a contar desde 0. Es decir, si tenemos un arreglo, la primera posición es 0, no 1.

Además, podemos acceder a cada letra de una cadena de la misma manera que accedemos a un elemento de un arreglo. Por ejemplo, la primera letra de la palabra "freeeCodeCamp" está en la posición 0.

Esto significa que podemos obtener la letra f de freeCodeCamp al ejecutar publicacion[0].

Del mismo modo, puedes acceder a otras letras de la palabra. Puedes reemplazar el "0" con cualquier número, mientras no se exceda la longitud de la palabra. Si se excede dicha longitud, como tratar de ejecutar publicacion[25] , nos arroja un error, pues solo hay 12 letras en la palabra "freeCodeCamp".

Cómo escribir en mayúscula la primera letra

Ahora que sabemos cómo acceder a una letra de una palabra. Vamos a escribirla en mayúscula.

En JavaScript existe un método llamado toUpperCase(), con el cual podemos llamar cadenas o palabras. Como podemos inferir por el nombre, se invoca para una cadena/palabra, y devuelve la misma cosa, pero en mayúsculas.

Por ejemplo:

const publicacion = "freeCodeCamp";
publicacion[0].toUpperCase();

Al ejecutar el código de arriba, vas a obtener una F mayúscula en lugar de f. Para recuperar la palabra completa, podemos hacer esto:

const publicacion = "freeCodeCamp";
publicacion[0].toUpperCase() + publicacion.substring(1);

Ahora se concatena la "F" con "reeCodeCamp", lo que significa que recuperamos la palabra "FreeCodeCamp". ¡Eso es todo!

Recapitulemos

Para asegurarnos que todo queda claro, veamos lo que hemos aprendido hasta ahora:

• En JavaScript, el conteo empieza desde 0.
• Podemos acceder a una letra de una cadena de la misma manera que accedemos a un elemento de un arreglo - por ejemplo. cadena[índice].
• No uses un índice que exceda la longitud de la cadena (usa el método de longitud - cadena.length - para encontrar el rango que puedes usar).
• Usa el método integrado toUpperCase() en la letra que quieres convertir a mayúscula.

Escribir en mayúscula la primera letra de cada palabra de una cadena

El siguiente paso es tomar una oración y poner en mayúsculas cada palabra de esa oración. Tomemos la siguiente oración:

const miOracion = "freeCodeCamp es un recurso impresionante";

Separar en palabras

Necesitamos escribir en mayúscula la primera letra de cada palabra del enunciado  freeCodeCamp es un recurso impresionante.

El primer paso que damos es dividir la oración en una serie de palabras. ¿Por qué? Así que podemos manipular cada palabra individualmente. Podemos hacerlo de la siguiente manera:

const miOracion = "freeCodeCamp es un recurso impresionante";
const palabras = miOracion.split(" ");

Iterar sobre cada palabra

Después de ejecutar el código de arriba, a la variable palabras se le asigna un arreglo con cada palabra de la oración. Dicho arreglo es así:  ["freeCodeCamp", "es", "un", "recurso", "impresionante"].

const miOracion = "freeCodeCamp es un recurso impresionante";
const palabras = miOracion.split(" ");

for (let i = 0; i < palabras.length; i++) {
    palabras[i] = palabras[i][0].toUpperCase() + palabras[i].substr(1);
}

Ahora el siguiente paso es recorrer el arreglo de palabras y convertir a mayúscula la primera letra de cada palabra.

En el código de arriba, cada palabra se toma por separado. Luego convierte a mayúscula la primera letra, y al final, junta la primera letra en mayúscula con el resto de la cadena.

Unir las palabras

¿Qué es lo que hace el código de arriba? Itera sobre cada palabra, y la reemplaza con la primera letra en mayúscula + el resto de la cadena.

Si tomamos "freeCodeCamp" como ejemplo, se parece a esto freeCodeCamp = F + reeCodeCamp.

Después de iterar sobre todas las palabras, el arreglo palabras es ["FreeCodeCamp", "Es", "Un", "Recurso", "Impresionante"]. Sin embargo, tenemos un arreglo, no una cadena, que no es lo que queremos.

El último paso es unir todas las palabras para formar una oración. Pero, ¿cómo lo hacemos?

En JavaScript tenemos un método llamado join, que podemos usar para devolver un arreglo como cadena. El método toma un separador como argumento. Es decir, especificamos qué añadir entre palabras, por ejemplo, un espacio.

const miOracion = "freeCodeCamp es un recurso impresionante";
const palabras = miOracion.split(" ");

for (let i = 0; i < palabras.length; i++) {
    palabras[i] = palabras[i][0].toUpperCase() + palabras[i].substr(1);
}

palabras.join(" ");

En el fragmento de código de arriba, podemos ver el método join en acción. Lo llamamos para el arreglo palabras, y especificamos el separador, que en nuestro caso es un espacio.

Por lo tanto, ["FreeCodeCamp", "Es", "Un", "Recurso", "Impresionante"] se convierte en FreeCodeCamp Es Un Recurso Impresionante.

Otros métodos

Usualmente en programación hay múltiples maneras de resolver el mismo problema. Así que veamos otro enfoque.

const miOracion = "freeCodeCamp es un recurso impresionante";
const palabras = miOracion.split(" ");

palabras.map((palabra) => { 
    return palabra[0].toUpperCase() + palabra.substring(1); 
}).join(" ");

¿Cuál es la diferencia entre la solución de arriba y la solución del inicio? Las dos soluciones son muy similares, siendo la diferencia que en la segunda solución usamos la función map, mientras que en la primera solución usamos un bucle for.

Vayamos más lejos, e intentemos hacerlo en una sola línea. ¡Pero ten cuidado! Las soluciones de una línea pueden lucir geniales, pero en el mundo real son raramente usadas porque es difícil entenderlas.  La legibilidad del código siempre es primero.

const miOracion = "freeCodeCamp es un recurso impresionante";

const OracionFinal = miOracion.replace(/(^\w{1})|(\s+\w{1})/g, letra => letra.toUpperCase());

El código de arriba usa RegEx (Expresión Regular) para transformar las letras. La RegEx puede parecer confusa, así que déjenme explicar lo que pasa:

• ^ coincide con el comienzo de la cadena.
• \w coincide con cualquier carácter de la palabra.
• {1} toma solo el primer carácter.
• Por lo tanto, ^\w{1} coincide con la primera letra de la palabra.
• | funciona como el OR booleano. Coincide con la expresión antes y después del |.
• \s+ coincide con cualquier cantidad de espacios en blanco entre las palabras (por ejemplo, espacios, tabulaciones, o saltos de línea).

Así, con una sola línea, hemos logrado la misma cosa que logramos con las soluciones de arriba. Si quieres jugar con RegEx y aprender más. Puedes usar este sitio web.

Conclusión

¡Felicidades, aprendiste algo nuevo hoy! Como repaso, en este artículo supiste como:

• Acceder a los caracteres de una cadena.
• Escribir en mayúscula la primera letra de una palabra.
• Separar una cadena en un arreglo de palabras.
• Unir de nuevo las palabras de un arreglo para formar una cadena.
• Utilizar RegEx para cumplir la misma tarea.

¡Gracias por leer! Si quieres mantenerte en contacto, conectémonos en Twitter @catalinmpit. También publico artículos de manera regular en mi blog  catalins.tech si quieres leer más contenido mío.

Python es un gran lenguaje de programación para aprender, y puedes usarlo en una variedad de áreas en el desarrollo de software.

Puedes usar Python para desarrollo web, análisis de datos, aprendizaje automático, inteligencia artificial, y más.

En este artículo, se enlistan 15 cursos gratis de Python para principiantes.

1. Aprende Python - Curso completo para principiantes - freeCodeCamp
2. Programación para todos (empezando con Python) - Universidad de Michigan
3. El manual de Python - Flavio Copes
4. Tutoriales de Python para absolutos principiantes por CS Dojo - CS Dojo
5. Tutorial de Python (Python para principiantes) - Programando con Mosh
6. Cursos de Python de Studytonight - Studytonight
7. Curso Intensivo de Python para Principiantes - Traversy Media
8. El Núcleo de Python - SoloLearn
9. Básicos de Python con Sam - freeCodeCamp
10. Tutoriales de Python para principiantes - Pythonspot
11. Tutorial de Python - PythonForBegginers
12. Automatiza las cosas aburridas con Python - Al Sweigart
13. Aprende Python en 12 horas (Tutorial de Python para principiantes) - Edureka
14. Tutorial de Python para principiantes (Aprende Python en 5 horas) - TechWorld con Nana
15. Computación Científica con Python - freeCodeCamp

Aprende Python: Curso completo para principiantes

En este curso en Youtube de freeCodeCamp, aprenderás los básicos de programación, como las listas, condicionales, cadenas, tuplas, funciones, clases y más.

También construirás varios proyectos pequeños, como una calculadora básica, un juego de mad libs, una aplicación de traducción, y un juego de adivinanzas.

Programación para todos (empezando con Python)

En este curso de la Universidad de Michigan, aprenderás acerca de funciones, bucles, condicionales, variables y más de la mano del famoso "Dr. Chuck".

Una vez que aprendas los básicos, puedes continuar con el resto de la especialización y tomar el curso de Estructura de Datos en Python, el curso de Usando Python para Acceder a Datos Web, y el curso de Usando Bases de Datos con Python.

El manual de Python

En este libro de Flavio Copes (en español), aprenderás acerca de cadenas, listas, tuplas, recursión y más.

También aprenderás cómo instalar paquetes de terceros y cómo trabajar con entornos virtuales.

Tutoriales de Python para absolutos principiantes por CS Dojo

En esta serie de videos en Youtube de Python para Principiantes por CS Dojo, aprenderás sobre diccionarios, bucles, funciones, objetos y más.

También aprenderás cómo construir un bot de Twitter usando Python.

Tutorial de Python - Python para principiantes

En este curso en YouTube de Programando con Mosh, aprenderás los básicos de programación, como variables, bucles, cadenas, tuplas, funciones, clases y más.

Además, construirás tres proyectos: uno sobre automatización, otro sobre aprendizaje automático, y el último sobre crear un sitio web con Django.

Como práctica adicional, puedes tomar los 53 Ejercicios de Python para Principiantes de Mosh.

Cursos de Python de Studytonight

En Studytonight, aprenderás los básicos de Python, manejo de errores, POO, manejo de archivos, tipo de datos complejos, lectura múltiple y más.

Una vez hayas aprendido los básicos, puedes dirigirte a sus otros módulos, que incluyen la libreria NumPy, Matplotlib, Tkinter, Programación de Redes en Python, y Web Scraping usando Beautiful Soup.

Curso intensivo de Python para principiantes

En este curso de Youtube de Brad Traversy, aprenderás acerca de listas, tuplas, diccionarios, funciones, clases y más. Brad también te mostrará cómo trabajar con archivos y datos JSON.

El núcleo de Python

En el Curso de Python de SoloLearn, aprenderás acerca de cadenas, variables, POO, programación funcional y más. Hay un montón de cuestionarios, retos, y proyectos que puedes construir durante tu travesía ahí.

Para poder empezar, necesitarás crear una cuenta gratuita.

Básicos de Python con Sam

En esta serie de videos en YouTube de Sam Focht, aprenderás acerca de bucles, funciones, cadenas, recursión y más.

También construirás varios proyectos, incluyendo un juego de adivinanzas, una lista de compras, un juego de mesa, y un generador aleatorio de contraseñas.

Tutoriales de Python para principiantes

En esta serie de tutoriales para principiantes de Pythonspot, aprenderás acerca de los tipos de datos, tuplas, objetos, clases, diccionarios, y más. También aprenderás sobre conceptos avanzados, como recursión, lambda, e hilos.

Una vez que cubras los básicos, te puedes mover hacia machine learning, bases de datos, y GUI's.

Tutorial de Python

En este tutorial de PythonForBeginners, conocerás sobre funciones, bucles, listas, condicionales, manejo de errores, y más.

Una vez que aprendas los básicos, puedes explorar los otros módulos en el sitio, incluyendo Web Scraping con BeautifulSoup y Usando la API de Youtube en Python.

Automatiza las cosas aburridas con Python

En el libro en línea Automatiza las Cosas Aburridas con Python, aprenderás acerca de diccionarios, cadenas, depuración, expresiones regulares, y más.

Si lo que prefieres es un formato de video, entonces puedes pasar a las series de Youtube que Al Sweigart creó.

Aprende Python en 12 horas (Tutorial de Python para principiantes)

En este curso en Youtube de 12 horas de Edureka, aprenderás acerca de funciones, bucles, listas, condicionales, manejo de errores y más.

Este curso también hablará acerca de oportunidades profesionales en Python y expectativas salariales para desarrolladores en dicho lenguaje.

Tutorial de Python para Principiantes (Aprende Python en 5 Horas)

En este curso en Youtube de TechWorld con Nana, aprenderás acerca de cadenas, variables, POO, programación funcional y más. También construirás un par de proyectos, incluyendo una app de cuenta regresiva y un proyecto enfocado en peticiones API a Gitlab.

Computación científica con Python

En este curso de certificación de freeCodeCamp, aprenderás acerca de bucles, listas, diccionarios, redes, servicios web y más.

También tendrás la oportunidad de construir cinco proyectos: un Formateador Aritmético, Calculadora de Tiempo, App de Presupuesto, Calculadora de Área de Polígonos, y Calculadora de Probabilidades.

Si estás aprendiendo estructura de datos, la lista enlazada es una estructura de datos que deberías conocer. Si no la entiendes del todo o no sabes cómo se implementa en JavaScript, este artículo está aquí para ayudarte.

Aquí hablaremos sobre lo que es una lista enlazada, en qué es diferente de un arreglo, y cómo se implementa en JavaScript. Empecemos.

¿Qué es una lista enlazada?

Una lista enlazada es una estructura de datos lineal similar a un arreglo. Sin embargo, a diferencia de los arreglos, los elementos no son almacenados en una ubicación de la memoria o índice en particular. Más bien, cada elemento es un objeto separado que contiene un puntero/apuntador o enlace al siguiente objeto en esa lista.

Cada elemento (comúnmente llamados nodos) contiene otros dos: el dato almacenado y un enlace al siguiente nodo. El dato puede ser de cualquier tipo válido. Puedes ver esto ilustrado en el diagrama de abajo.

El punto de entrada a una lista enlazada es llamado la cabecera. La cabecera es una referencia al primer nodo en la lista enlazada. El último nodo en la lista apunta a nulo. Si una lista está vacía, la cabecera es una referencia nula.

En JavaScript, una lista enlazada se ve así:

const lista = {
    cabecera: {
        valor: 6
        siguiente: {
            valor: 10                                             
            siguiente: {
                valor: 12
                siguiente: {
                    valor: 3
                    siguiente: null	
                    }
                }
            }
        }
    }
};

Una ventaja de las listas enlazadas

• Los nodos pueden ser fácilmente removidos o agregados a una lista enlazada sin tener que reorganizar la estructura de datos entera. Esta es una ventaja que tiene sobre los arreglos.

Desventajas de las listas enlazadas

• Las operaciones de búsqueda son lentas en las listas enlazadas. A diferencia de los arreglos, el acceso aleatorio a elementos de datos no está permitido. Se accede a los nodos de manera secuencial empezando desde el primer nodo.  
• El uso de memoria es mayor que en los arreglos debido al almacenamiento de los punteros/apuntadores.

Tipos de listas enlazadas

Hay tres tipos de listas enlazadas:

• Listas enlazadas individuales: Cada nodo contiene solo un puntero/apuntador al siguiente nodo. Esto es de lo que hemos estado hablando hasta ahora.
• Listas doblemente enlazadas: Cada nodo contiene dos punteros/apuntadores; un puntero/apuntador al siguiente nodo, y otro al nodo anterior.
• Listas circulares enlazadas: Son una variación de la lista enlazada en donde el último nodo apunta al primer nodo o a otro nodo antes de ese, formando así un bucle.

Implementación de un nodo de lista en JavaScript

Como se mencionó antes, un nodo de lista contiene dos elementos, el dato y el puntero/apuntador al siguiente nodo. Podemos implementar un nodo de lista en JavaScript de la siguiente manera:

class NodoLista {
    constructor(dato) {
        this.dato = dato
        this.siguiente = null                
    }
}

Implementación de una lista enlazada en JavaScript

El código de abajo muestra la implementación de una clase de lista enlazada con un constructor. Nota que si el nodo de cabecera no es pasado, la cabecera se inicializa a nulo.

class ListaEnlazada {
    constructor(cabecera = null) {
        this.cabecera = cabecera
    }
}

Poniéndolo todo junto

Vamos a crear una lista enlazada con la clase que hemos creado. Primero, creamos dos nodos de lista, nodo1 y nodo2 y un puntero/apuntador del nodo 1 al nodo 2.

let nodo1 = new NodoLista(2)
let nodo2 = new NodoLista(5)
nodo1.siguiente = nodo2

A continuación crearemos una Lista Enlazada con el nodo1.

let lista = new ListaEnlazada(nodo1)

Intentemos acceder a los nodos de la lista que hemos creado.

console.log(lista.cabecera.siguiente.dato) //devuelve 5

Algunas funciones de listaEnlazada

A continuación, implementaremos cuatro funciones de ayuda para la lista enlazada, los cuales son:

1. magnitud()
2. vaciar()
3. obtenerUltimo()
4. obtenerPrimero()

1. magnitud()

Esta función devuelve el número de nodos presentes en la lista enlazada.

magnitud() {
    let contador = 0; 
    let nodo = this.cabecera;
    while (nodo) {
        contador++;
        nodo = nodo.siguiente
    }
    return contador;
}

2. vaciar()

Esta función vacía la lista.

vaciar() {
    this.cabecera = null;
}

3. obtenerUltimo()

Esta función devuelve el último nodo de la lista enlazada.

obtenerUltimo() {
    let ultimoNodo = this.cabecera;
    if (ultimoNodo) {
        while (ultimoNodo.siguiente) {
            ultimoNodo = ultimoNodo.siguiente
        }
    }
    return ultimoNodo;
}

4. obtenerPrimero()

Esta función devuelve el primer nodo de la lista enlazada.

obtenerPrimero() {
    return this.cabecera;
}

Resumen

En ese artículo, discutimos qué es una lista enlazada y cómo se puede implementar en JavaScript. También discutimos los diferentes tipos de listas enlazadas, así como sus ventajas y desventajas en general.

Espero que hayas disfrutado esta lectura.

¿Quieres ser notificado cuando publique un nuevo artículo? Da clic aquí.

Muchos desarrolladores luchan mientras trabajan con imágenes. El manejo del diseño responsivo y la alineación es particularmente difícil, especialmente al centrar una imagen en el medio de una página.

Así que en esta publicación, estaré mostrando algunas de las formas más comunes de centrar una imagen tanto vertical como horizontalmente empleando diferentes propiedades de CSS.

Ya he repasado las propiedades position y display de CSS en mi publicación anterior. Si no estás familiarizado con esas propiedades, te recomiendo que revises esas publicaciones antes de leer este artículo.

Centrar una imagen horizontalmente

Empecemos con centrar una imagen de manera horizontal utilizando 3 diferentes propiedades de CSS.

Text-align

La primera forma es con la propiedad text-align . Sin embargo, este método solo funciona si la imagen está dentro de un contenedor a nivel de bloque como <div>:

<style>
  div {
    text-align: center;
  }
</style>

<div>
  <img src="tu-imagen.jpg">
</div>

Margin: Auto

Otra forma de centrar una imagen es usando la propiedad margin: auto (para los márgenes izquierdo y derecho).

No obstante, usar únicamente margin: auto no funcionará para las imágenes. Si necesitas usar margin: auto, hay dos propiedades adicionales que también debes usar.

La propiedad margin-auto no tiene efecto alguno en elementos a nivel de línea. Partiendo de que la etiqueta <img> es un elemento en línea, necesitamos convertirla primero a un elemento a nivel de bloque:

img {
  margin: auto;
  display: block;
}

Segundo, también necesitamos definir una anchura. Para que los márgenes izquierdo y derecho puedan tomar el resto del espacio vacío y se alineen  automáticamente, lo que hace la magia (a menos de que le demos una anchura de 100%):

img {
  width: 60%;
  margin: auto;
  display: block;
}

Display: flex

La tercera forma de centrar una imagen horizontalmente es usando display: flex. Justo como usamos la propiedad text-align para un contenedor, usamos display: flex también para un contenedor.

Sin embargo, usar únicamente display: flex no es suficiente. El contenedor debe tener también una propiedad adicional llamada justify-content:

div {
  display: flex;
  justify-content: center;
}

img {
  width: 60%;
}

La propiedad justify-content trabaja en conjunto con display: flex, que la  podemos usar para centrar una imagen horizontalmente.

Finalmente, la anchura de la imagen debe ser más pequeña que la anchura del contenedor, de lo contrario, toma el 100% del espacio y no podremos centrarla.

Importante: La propiedad display: flex no está soportada en las versiones antiguas de los navegadores.

Centrar una imagen verticalmente

Display: flex

Para alineamiento vertical, el usar display: flex es otra vez realmente útil.

Considera un caso donde nuestro contenedor tiene una altura de 800px, pero la altura de la imagen es de tan solo 500px:

div {
  display: flex;
  justify-content: center;
  height: 800px;
}

img {
  width: 60%;
  height: 500px;
}

Ahora, en este caso, agregar una simple línea de código al contenedor, align-items: center, hace la magia:

div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 800px;
}

La propiedad align-items puede posicionar verticalmente los elementos si se usa en conjunto con display: flex.

Position: propiedades absolute y transform

Otro método para la alineación vertical es usar juntas las propiedades position y transform . Esto es algo un poco complicado, así que vamos a hacerlo paso a paso.

Paso 1: definir posición absoluta

Primero, necesitamos cambiar el comportamiento de posicionamiento de la imagen de static a absolute:

div {
  height: 800px;
  position: relative;
  background: red;
}

img {
  width: 80%;
  position: absolute;
}

Además, debe estar dentro de un contenedor posicionado relativamente, así que agregamos position: relative a su contenedor div.

Paso 2: definir las propiedades top y left

Segundo, definimos las propiedades top y left para la imagen, y las establecemos a 50%. Esto moverá el punto inicial (arriba-izquierda) de la imagen al centro del contenedor:

img {
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
}

Paso 3: definir la propiedad transform

Pero el paso dos ha movido la imagen parcialmente fuera de su contenedor. Así que necesitamos traerla de regreso adentro.

Definir una propiedad transform y agregar -50% a sus ejes X e Y hace la magia:

img {
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Hay otras maneras de centrar objetos horizontal y verticalmente, pero he explicado las más comunes. Espero que esta publicación te haya ayudado a entender cómo alinear imágenes en el centro de la página.

Si quieres aprender más acerca de Desarrollo Web, date una vuelta a mi canal de Youtube.

¡Gracias por leerme!

Como desarrollador o ingeniero de redes, es posible que necesites buscar de vez en cuando los valores de las máscaras de subred y averiguar qué significan.

Para hacerte la vida más fácil, la comunidad de freeCodeCamp ha creado esta sencilla hoja de trucos. Solo desplaza o usa Ctrl/Cmd + f para encontrar el valor que estás buscando.

Aquí están las tablas, seguidas de algunas explicaciones de lo que significan.

* /31 es un caso especial detallado en la RFC 3021 donde las redes con este tipo de máscara de subred pueden asignar dos direcciones IP como un enlace punto-a-punto.

Y aquí está la tabla de las conversiones decimal a binario para las máscaras de subred y los octetos comodín:

Toma en cuenta que el comodín es solo el inverso de la máscara de subred.

Finalmente, esta hoja de trucos y el resto del artículo está enfocado en direcciones IPv4, y no en el más reciente protocolo IPv6. Si quieres aprender más acerca de IPv6, consulta el artículo anterior sobre redes de computadoras.

¿Cómo funcionan los bloques de dirección IP?

Las direcciones IPv4 como 192.168.0.1 son realmente solo representaciones decimales de cuatro bloques binarios.

Cada bloque consta de 8 bits, y representa números del rango 0-255. Debido a que los bloques son grupos de 8 bits, cada bloque es conocido como un octeto. Y como hay cuatro bloques de 8 bits, cada dirección IPv4 es de 32 bits.

Por ejemplo, así es como luce la dirección IP 172.16.254.1 en binario:

Para convertir una dirección IP entre sus formas decimal y binaria, puedes usar esta tabla:

La tabla de arriba representa un octeto (8 bits).

Ahora digamos que quieres convertir la dirección IP 168.210.225.206. Todo lo que necesitas es separar la dirección en cuatro bloques (168, 210, 225, y 206), y convertir cada uno a binario usando la tabla de arriba.

Recuerda que en binario, 1 es el equivalente a "encendido" y 0 es "apagado". Así que para convertir el primer bloque, 168, a binario, solo comienza al inicio de la tabla y coloca un 1 o 0 en esa celda hasta que obtengas una suma de 168.

Por ejemplo:

128 + 32 + 8 = 168, que en binario es 10101000.

Si haces esto para el resto de los bloques, obtendrás 10101000.11010010.11100001.11001110.

¿Qué es la división en Subredes (subnetting)?

Si miras la tabla de arriba, pareciera como si el número de direcciones IP fuera prácticamente ilimitado. Después de todo, hay casi 4.2 mil millones de posibles direcciones IPv4 disponibles.

Pero si piensas en cuánto ha crecido el internet, y cuántos dispositivos más están conectados en estos tiempos, puede que no te sorprendas saber que ya hay una escasez de direcciones IPv4.

Debido a que la escasez fue reconocida hace años, los desarrolladores idearon una forma de dividir una dirección IP en redes más pequeñas llamadas subredes.  

Este proceso, llamado división en subredes (subnetting), usa la sección host de la dirección IP para descomponerla en esas redes más pequeñas o subredes.

Generalmente, una dirección IP está compuesta por bits de red y bits de host:

Por lo general, la división en subredes hace dos cosas: nos brinda una manera de dividir las redes en subredes, y permite que los dispositivos determinen si otro dispositivo/dirección IP está en la misma red local o no.

Una buena manera de pensar en la división de subredes es imaginar tu red doméstica inalámbrica.

Sin la división en subredes, cada dispositivo conectado a internet necesitaría su propia dirección IP única.

Pero como tienes un enrutador inalámbrico, tan solo necesitas una dirección IP para tu enrutador. Esta dirección IP externa o pública es usualmente manejada de manera automática, y es asignada por tu proveedor de servicios de internet (ISP, por sus siglas en inglés, Internet Service Provider).

Luego, cada dispositivo conectado a ese enrutador tiene su propia dirección IP privada o interna:

Ahora, si tu dispositivo con la dirección IP interna192.168.1.101 quiere comunicarse con otro dispositivo, usará la dirección IP del otro dispositivo y la máscara de subred.

La combinación de las direcciones IP y la máscara de subred permite que el dispositivo en 192.168.1.101 averigüe si el otro dispositivo está en la misma red  (como el dispositivo en 192.168.1.103), o en una red completamente diferente en algún otro lugar en línea.

Curiosamente, la dirección IP externa asignada a tu enrutador por tu Proveedor de Servicio de Internet (ISP) es probablemente parte de una subred, la cual podría incluir muchas otras direcciones IP para casas o negocios cercanos. Y justo como las direcciones IP internas, también necesita una máscara de subred para funcionar.

Cómo funcionan las máscaras de subred

Las máscaras de subred funcionan como una especie de filtro para una dirección IP. Con una máscara de subred, los dispositivos pueden mirar una dirección IP y determinar cuáles partes son los bits de red y cuáles son los bits de host.

Luego usando esas cosas, se puede determinar la mejor manera de comunicarse para esos dispositivos.

Si has estado hurgando en la configuración de red de tu enrutador o computadora, es probable que hayas visto este número:255.255.255.0.

Si así fue, has visto una máscara de subred muy común para redes domésticas simples.

Tal como las direcciones IPv4, las máscaras de subred son de 32 bits. Y justo como se convierte una dirección IP a binario, puedes hacer lo mismo con una máscara de subred.

Por ejemplo, aquí está nuestra tabla de antes:

Ahora convirtamos el primero octeto, 255:

Muy fácil, ¿cierto? Así que cualquier octeto que es 255 es solo 11111111 en binario. Esto significa que 255.255.255.0 es en realidad 11111111.11111111.11111111.00000000 en binario.

Ahora veamos la máscara de subred y la dirección IP juntas y calculemos cuáles partes de la dirección IP son los bits de red y los bits de host.

Aquí están las dos en decimal y binario:

Con las dos dispuestas de esta forma, es fácil separar 192.168.0.101 en bits de red y bits de host.

Cada que un bit en una máscara de subred binaria es 1, entonces el mismo bit en una dirección IP binaria pertenece a la red, no al host.

Como el octeto 255 es 11111111 en binario, todo ese octeto en la dirección IP es parte de la red. Así que los primeros tres octetos, 192.168.0, son la porción de red de la dirección IP, y 101 es la porción de host.

En otras palabras, si el dispositivo en 192.168.0.101 quiere comunicarse con otro dispositivo, usando la máscara de subred sabe que cualquier cosa con la dirección IP 192.168.0.xxx se encuentra en la misma red local.

Otra manera de expresar esto es con un ID de red, que es solo la porción de red de la dirección IP. Así que el ID de red de la dirección 192.168.0.101 con la máscara de subred 255.255.255.0 es 192.168.0.0.

Y es lo mismo para los otros dispositivos en la red local (192.168.0.102, 192.168.0.103, y así).

¿Qué Significa CIDR y Qué es la Notación CIDR?

CIDR son las siglas en inglés de Classless Inter-Domain Routing, Enrutamiento Entre Dominios Sin Clases, y es usado en IPv4, y más recientemente, en enrutamiento IPv6.

CIDR fue introducido en 1993 como una manera de ralentizar el uso de direcciones IPv4, las cuales se estaban acabando rápidamente bajo el viejo sistema de direccionamiento IP con clase  sobre el que se construyó internet por primera vez.

CIDR abarca un par de conceptos importantes.

El primero es el Subenmascaramiento de Longitud Variable (Variable Length SubMasking, VLSM, por sus siglas en inglés), que básicamente permitió a los ingenieros de redes crear subredes dentro de subredes. Y esas subredes  podían ser de diferentes tamaños, por lo que habrían pocas direcciones IP sin usar.

El segundo concepto importante que CIDR introdujo fue la notación CIDR.

La notación CIDR es en realidad solo una abreviatura de la máscara de subred , y representa el número de bits disponibles para la dirección IP. Por ejemplo, el /24 en 192.168.0.101/24 es equivalente a la dirección IP 192.168.0.101 y la máscara de subred 255.255.255.0.

Cómo Calcular la Notación CIDR

Para determinar la notación CIDR para una máscara de subred dada, todo lo que necesitas es convertir la máscara de subred a binario, y luego contar los unos o dígitos en "encendido". Por ejemplo:

Debido a que hay tres octetos de unos, hay 24 bits en "encendido", lo que significa que la notación CIDR es /24.

Puedes escribirlo de cualquier manera, pero estarás de acuerdo  que /24 es mucho más fácil de escribir que 255.255.255.0.

Esto generalmente se hace con una dirección IP, así que demos un vistazo a la misma máscara de subred con una dirección IP:

Los primeros tres octetos de la máscara de subred son todos bits de "encendido", lo que significa que los mismos tres octetos en la dirección IP son todos bits de red.

Echemos un vistazo al último cuarto octeto con más detalle:

En este caso, debido a que todos los bits para este octeto en la máscara de subred están en "apagado", podemos estar seguros de que todos los bits correspondientes a este octeto en la dirección IP son parte del host.

Cuando escribes en notación CIDR es común hacerlo con la ID de red. Por lo que la notación CIDR para la dirección IP 192.168.0.101 con una máscara de subred 255.255.255.0 es 192.168.0.0/24.

Direccionamiento IP Con Clase

Ahora que ya hemos repasado algunos ejemplos básicos de división en subredes y CIDR, veamos lo que es conocido como direccionamiento IP con clase.

Antes de que la división en subredes fuera desarrollada, todas las direcciones IP caían dentro de una clase en particular:

Toma en cuenta que hay direcciones IP de clase D y E, pero entraremos a detalle en eso más adelante.

Las direcciones IP con clase dieron a los ingenieros de redes una manera de proveer un rango de direcciones IP válidas a diferentes organizaciones.

Hubo muchos problemas con este enfoque que eventualmente llevó a la división en subredes. Pero antes de llegar ahí, veamos de manera más cercana a las diferentes clases.

Direcciones IP de Clase A

Para las direcciones IP de Clase A, el primer octeto (8 bits / 1 byte) representa el ID de red, y los tres octetos restantes (24 bits / 3 bytes) son el ID de host.

Las direcciones IP de Clase A van desde 1.0.0.0 hasta 127.255.255.255, con una máscara predeterminada 255.0.0.0 (u /8 en CIDR).

Esto significa que el direccionamiento Clase A puede tener un total de 128 (2⁷) redes y 16,777,214 (2²⁴-2) direcciones utilizables por red.

Además, toma en cuenta que el rango desde 127.0.0.0 al 127.255.255.255 dentro del rango de la Clase A, está reservado para la dirección de bucle invertido del host (vea RFC5735).

Direcciones IP de Clase B

Para las direcciones IP de Clase B, los primeros dos octetos (16 bits / 2 bytes) representan el ID de red y los dos octetos restantes (16 bits / 2 bytes) son el ID de host.

Las direcciones IP de Clase B van desde 128.0.0.0 hasta 191.255.255.255, con una máscara predeterminada 255.255.0.0 (o /16 en CIDR).

El direccionamiento Clase B puede tener 16,384 (2¹⁴) direcciones de red y 65,534 (2¹⁶) direcciones utilizables por red.

Direcciones IP de Clase C

Para direcciones IP de Clase C, los primeros tres octetos (24 bits / 3 bytes) representan el ID de red, y el último octeto (8 bits / 1 bytes) es el ID de host.

Las direcciones IP de Clase C van desde 192.0.0.0 hasta 223.255.255.255, con una máscara predeterminada 255.255.255.0 (o /24 en CIDR).

La Clase C se traduce a 2,097,152 (2²¹) redes y 254 (2⁸-2) direcciones utilizables por red.

Direcciones IP de Clase D y Clase E

Las últimas dos clases son la Clase D y la Clase E.

Las direcciones IP de Clase D están reservadas para multidifusiones. Ellas ocupan el rango desde 224.0.0.0 hasta 239.255.255.255.

Las direcciones IP de Clase E son experimentales, y son cualquiera arriba de 240.0.0.0.

El Problema de las Direcciones IP Con Clase

El problema principal con las direcciones IP con clase es que no fue algo eficiente, y llevaba a tener muchas direcciones IP desperdiciadas.

Por ejemplo, imagina que eres parte de una organización grande en aquel entonces. Tu compañía tiene 1,000 empleados, lo que significa que caería dentro de la clase B.

Pero si miras arriba, verás que una red de clase B puede soportar hasta 65,534 direcciones utilizables. Eso es mucho más de lo que tu organización necesitaría, incluso si cada empleado tuviera múltiples dispositivos con una dirección única.

Y no había manera de que tu organización volviera a la clase C - no habría suficientes direcciones IP utilizables.

Así que mientras las direcciones IP con clase fueron usadas en el momento en el que las direcciones IPv4 se volvieron una norma, rápidamente se hizo evidente que sería necesario un mejor sistema para garantizar que no usaríamos todas las ~4.200 millones de direcciones utilizables.

Las direcciones IP con clase no han sido usadas desde que fueron reemplazadas por CIDR en 1993, y son mayormente estudiadas para entender la arquitectura temprana de internet, y el por qué la división en subredes es importante.

Espero que esta hoja de trucos te haya sido una referencia útil

Si así lo fue, por favor compártelo con tus amigos, para que más gente pueda beneficiarse de ella.

Además, siéntete libre de contactarme en Twitter y déjame saber lo que piensas.