Curso de Closures y Scope en JavaScript

Function Scope

Curso de Closures y Scope en JavaScript

Contenido del curso

Bienvenida

  • 1
    Bienvenida al Curso de Closures y Scope

    Bienvenida al Curso de Closures y Scope

    01:11 min

Tipos de scope en JavaScript

  • 2
    Global Scope

    Global Scope

    12:09 min
  • 3
    Function Scope

    Function Scope

    Viendo ahora
  • 4
    Block Scope

    Block Scope

    07:16 min
  • 5
    Reasignación y redeclaración

    Reasignación y redeclaración

    14:05 min
  • 6
    Strict Mode

    Strict Mode

    05:54 min

Closure

  • 7
    ¿Qué es un Closure?

    ¿Qué es un Closure?

    09:37 min
  • 8
    Practicando Closures

    Practicando Closures

    15:24 min

Hoisting

  • 9
    ¿Qué es el Hoisting?

    ¿Qué es el Hoisting?

    08:28 min

Debugging

  • 10
    Debugging

    Debugging

    04:33 min

Cierre

  • 11
    Conclusiones

    Conclusiones

    03:23 min
schoolTomar examen
search
CursosEmpresasBlogLiveConfEventosPrecios

0:00/5:52

Function Scope

Curso de Closures y Scope en JavaScript

Clase 3 de 11

Clase 3 / 11

Progreso del curso

Bienvenida

  • 1

    Bienvenida al Curso de Closures y Scope

    01:11

Tipos de scope en JavaScript

  • 2lock

    Global Scope

    Suscríbete para ver más
  • play_arrowlock

    Function Scope

    play_circleViendo ahora
  • 4lock

    Block Scope

    Suscríbete para ver más
  • 5lock

    Reasignación y redeclaración

    Suscríbete para ver más
  • 6lock

    Strict Mode

    Suscríbete para ver más

Closure

  • 7lock

    ¿Qué es un Closure?

    Suscríbete para ver más
  • 8lock

    Practicando Closures

    Suscríbete para ver más

Hoisting

  • 9lock

    ¿Qué es el Hoisting?

    Suscríbete para ver más

Debugging

  • 10lock

    Debugging

    Suscríbete para ver más

Cierre

  • 11lock

    Conclusiones

    Suscríbete para ver más
workspace_premiumTomar examen

Escuelas

  • Desarrollo Web
    • Fundamentos del Desarrollo Web Profesional
    • Diseño y Desarrollo Frontend
    • Desarrollo Frontend con JavaScript
    • Desarrollo Frontend con Vue.js
    • Desarrollo Frontend con Angular
    • Desarrollo Frontend con React.js
    • Desarrollo Backend con Node.js
    • Desarrollo Backend con Python
    • Desarrollo Backend con Java
    • Desarrollo Backend con PHP
    • Desarrollo Backend con Ruby
    • Bases de Datos para Web
    • Seguridad Web & API
    • Testing Automatizado y QA para Web
    • Arquitecturas Web Modernas y Escalabilidad
    • DevOps y Cloud para Desarrolladores Web
  • English Academy
    • Inglés Básico A1
    • Inglés Básico A2
    • Inglés Intermedio B1
    • Inglés Intermedio Alto B2
    • Inglés Avanzado C1
    • Inglés para Propósitos Específicos
    • Inglés de Negocios
  • Marketing Digital
    • Fundamentos de Marketing Digital
    • Marketing de Contenidos y Redacción Persuasiva
    • SEO y Posicionamiento Web
    • Social Media Marketing y Community Management
    • Publicidad Digital y Paid Media
    • Analítica Digital y Optimización (CRO)
    • Estrategia de Marketing y Growth
    • Marketing de Marca y Comunicación Estratégica
    • Marketing para E-commerce
    • Marketing B2B
    • Inteligencia Artificial Aplicada al Marketing
    • Automatización del Marketing
    • Marca Personal y Marketing Freelance
    • Ventas y Experiencia del Cliente
    • Creación de Contenido para Redes Sociales
  • Inteligencia Artificial y Data Science
    • Fundamentos de Data Science y AI
    • Análisis y Visualización de Datos
    • Machine Learning y Deep Learning
    • Data Engineer
    • Inteligencia Artificial para la Productividad
    • Desarrollo de Aplicaciones con IA
    • AI Software Engineer
  • Ciberseguridad
    • Fundamentos de Ciberseguridad
    • Hacking Ético y Pentesting (Red Team)
    • Análisis de Malware e Ingeniería Forense
    • Seguridad Defensiva y Cumplimiento (Blue Team)
    • Ciberseguridad Estratégica
  • Liderazgo y Habilidades Blandas
    • Fundamentos de Habilidades Profesionales
    • Liderazgo y Gestión de Equipos
    • Comunicación Avanzada y Oratoria
    • Negociación y Resolución de Conflictos
    • Inteligencia Emocional y Autogestión
    • Productividad y Herramientas Digitales
    • Gestión de Proyectos y Metodologías Ágiles
    • Desarrollo de Carrera y Marca Personal
    • Diversidad, Inclusión y Entorno Laboral Saludable
    • Filosofía y Estrategia para Líderes
  • Diseño de Producto y UX
    • Fundamentos de Diseño UX/UI
    • Investigación de Usuarios (UX Research)
    • Arquitectura de Información y Usabilidad
    • Diseño de Interfaces y Prototipado (UI Design)
    • Sistemas de Diseño y DesignOps
    • Redacción UX (UX Writing)
    • Creatividad e Innovación en Diseño
    • Diseño Accesible e Inclusivo
    • Diseño Asistido por Inteligencia Artificial
    • Gestión de Producto y Liderazgo en Diseño
    • Diseño de Interacciones Emergentes (VUI/VR)
    • Desarrollo Web para Diseñadores
    • Diseño y Prototipado No-Code
  • Contenido Audiovisual
    • Fundamentos de Producción Audiovisual
    • Producción de Video para Plataformas Digitales
    • Producción de Audio y Podcast
    • Fotografía y Diseño Gráfico para Contenido Digital
    • Motion Graphics y Animación
    • Contenido Interactivo y Realidad Aumentada
    • Estrategia, Marketing y Monetización de Contenidos
  • Desarrollo Móvil
    • Fundamentos de Desarrollo Móvil
    • Desarrollo Nativo Android con Kotlin
    • Desarrollo Nativo iOS con Swift
    • Desarrollo Multiplataforma con React Native
    • Desarrollo Multiplataforma con Flutter
    • Arquitectura y Patrones de Diseño Móvil
    • Integración de APIs y Persistencia Móvil
    • Testing y Despliegue en Móvil
    • Diseño UX/UI para Móviles
  • Diseño Gráfico y Arte Digital
    • Fundamentos del Diseño Gráfico y Digital
    • Diseño de Identidad Visual y Branding
    • Ilustración Digital y Arte Conceptual
    • Diseño Editorial y de Empaques
    • Motion Graphics y Animación 3D
    • Diseño Gráfico Asistido por Inteligencia Artificial
    • Creatividad e Innovación en Diseño
  • Programación
    • Fundamentos de Programación e Ingeniería de Software
    • Herramientas de IA para el trabajo
    • Matemáticas para Programación
    • Programación con Python
    • Programación con JavaScript
    • Programación con TypeScript
    • Programación Orientada a Objetos con Java
    • Desarrollo con C# y .NET
    • Programación con PHP
    • Programación con Go y Rust
    • Programación Móvil con Swift y Kotlin
    • Programación con C y C++
    • Administración Básica de Servidores Linux
  • Negocios
    • Fundamentos de Negocios y Emprendimiento
    • Estrategia y Crecimiento Empresarial
    • Finanzas Personales y Corporativas
    • Inversión en Mercados Financieros
    • Ventas, CRM y Experiencia del Cliente
    • Operaciones, Logística y E-commerce
    • Gestión de Proyectos y Metodologías Ágiles
    • Aspectos Legales y Cumplimiento
    • Habilidades Directivas y Crecimiento Profesional
    • Diversidad e Inclusión en el Entorno Laboral
    • Herramientas Digitales y Automatización para Negocios
  • Blockchain y Web3
    • Fundamentos de Blockchain y Web3
    • Desarrollo de Smart Contracts y dApps
    • Finanzas Descentralizadas (DeFi)
    • NFTs y Economía de Creadores
    • Seguridad Blockchain
    • Ecosistemas Blockchain Alternativos (No-EVM)
    • Producto, Marketing y Legal en Web3
  • Recursos Humanos
    • Fundamentos y Cultura Organizacional en RRHH
    • Atracción y Selección de Talento
    • Cultura y Employee Experience
    • Gestión y Desarrollo de Talento
    • Desarrollo y Evaluación de Liderazgo
    • Diversidad, Equidad e Inclusión
    • AI y Automatización en Recursos Humanos
    • Tecnología y Automatización en RRHH
  • Finanzas e Inversiones
    • Fundamentos de Finanzas Personales y Corporativas
    • Análisis y Valoración Financiera
    • Inversión y Mercados de Capitales
    • Finanzas Descentralizadas (DeFi) y Criptoactivos
    • Finanzas y Estrategia para Startups
    • Inteligencia Artificial Aplicada a Finanzas
    • Domina Excel
    • Financial Analyst
    • Conseguir trabajo en Finanzas e Inversiones
  • Startups
    • Fundamentos y Validación de Ideas
    • Estrategia de Negocio y Product-Market Fit
    • Desarrollo de Producto y Operaciones Lean
    • Finanzas, Legal y Fundraising
    • Marketing, Ventas y Growth para Startups
    • Cultura, Talento y Liderazgo
    • Finanzas y Operaciones en Ecommerce
    • Startups Web3 y Blockchain
    • Startups con Impacto Social
    • Expansión y Ecosistema Startup
  • Cloud Computing y DevOps
    • Fundamentos de Cloud y DevOps
    • Administración de Servidores Linux
    • Contenerización y Orquestación
    • Infraestructura como Código (IaC) y CI/CD
    • Amazon Web Services
    • Microsoft Azure
    • Serverless y Observabilidad
    • Certificaciones Cloud (Preparación)
    • Plataforma Cloud GCP

Platzi y comunidad

  • Platzi Business
  • Live Classes
  • Lanzamientos
  • Executive Program
  • Trabaja con nosotros
  • Podcast

Recursos

  • Manual de Marca

Soporte

  • Preguntas Frecuentes
  • Contáctanos

Legal

  • Términos y Condiciones
  • Privacidad
  • Tyc promociones
Reconocimientos
Reconocimientos
Logo reconocimientoTop 40 Mejores EdTech del mundo · 2024
Logo reconocimientoPrimera Startup Latina admitida en YC · 2014
Logo reconocimientoPrimera Startup EdTech · 2018
Logo reconocimientoCEO Ganador Medalla por la Educación T4 & HP · 2024
Logo reconocimientoCEO Mejor Emprendedor del año · 2024
De LATAM conpara el mundo
YoutubeInstagramLinkedInTikTokFacebookX (Twitter)Threads

Comentarios (58)58 comentarios

Recursos

El scope local de función (function scope) es el entorno donde las variables locales solo se pueden acceder desde una función del programa.

En este scope no importa que las variables sean declaradas con var, let o const. Sin embargo, ten presente que se puede redeclarar una variable con var, pero no con let y const.

Ejemplo utilizando scope de función

Observa el siguiente código y piensa cuál será el resultado.

function saludo() { let nombre = ""Andres"" console.log(nombre) } saludo() console.log(nombre)

Primeramente, al invocarse la función saludo imprimirá ""Andres"" por consola, pero inmediatamente después existirá un error de referencia.

function saludo() { let nombre = ""Andres"" console.log(nombre) } saludo() // ""Andres"" console.log(nombre) // ReferenceError: nombre is not defined

Esto sucede porque la variable nombre tiene un scope de función, por lo que solo se puede acceder dentro de la misma.

Según la cadena de scope, si existe una función dentro de otra función, la función hijo podrá acceder a las variables de la función padre, pero no en viceversa. Recuerda esto en el tema de los Closures.

Representación de los tipos de scope

Contribución creada por Andrés Guano.

Mariela de Jesus Rivas Hernandez

Mariela de Jesus Rivas Hernandez

Hace 4 años
    Victor Ocampo

    Victor Ocampo

    Hace 4 años
    Sergio Valbuena

    Sergio Valbuena

    Hace 4 años
Carlos Rafael Córdova Flores

Carlos Rafael Córdova Flores

Hace 4 años
    César Palma

    César Palma

    Hace 4 años
    Oscar Fuentes Esteves

    Oscar Fuentes Esteves

    Hace 4 años
Oscar Fuentes Esteves

Oscar Fuentes Esteves

Hace 4 años
    Alejandro Ivan Mendieta

    Alejandro Ivan Mendieta

    Hace 4 años
    Eduardo López Barrientos

    Eduardo López Barrientos

    Hace 4 años
maximo galarza

maximo galarza

Hace 4 años
    Alejandro Brand

    Alejandro Brand

    Hace 4 años
    Felipe Morales Torres

    Felipe Morales Torres

    Hace 4 años
Dario Paladines

Dario Paladines

Hace 4 años
José Alberto Ramírez Quiroz

José Alberto Ramírez Quiroz

Hace 4 años
Sebastian Giraldo

Sebastian Giraldo

Hace 4 años
Cristian Fernando Villca Gutierrez

Cristian Fernando Villca Gutierrez

Hace 4 años
    Oscar Barajas Tavares

    Oscar Barajas Tavares

    Team Platzi
    Hace 4 años
Yefreilee Danny Samuel Parra

Yefreilee Danny Samuel Parra

Hace 4 años
Luis Carlos Zapata García

Luis Carlos Zapata García

Hace 4 años
Emanuel Nieto

Emanuel Nieto

Hace 4 años
    Guadalupe Monge Barale

    Guadalupe Monge Barale

    Hace 4 años
Rafael Martínez Rodríguez

Rafael Martínez Rodríguez

Hace 4 años
Andrés Felipe Lopez gomez

Andrés Felipe Lopez gomez

Hace 4 años
Anna Bondarets

Anna Bondarets

Hace 4 años
    Carlos S. Aldazosa

    Carlos S. Aldazosa

    Hace 4 años
Yefreilee Danny Samuel Parra

Yefreilee Danny Samuel Parra

Hace 4 años
    Oscar Barajas Tavares

    Oscar Barajas Tavares

    Team Platzi
    Hace 4 años
Brayan Torrealba Sáez

Brayan Torrealba Sáez

Hace 4 años
    Oscar Barajas Tavares

    Oscar Barajas Tavares

    Team Platzi
    Hace 4 años
Miguel Teran

Miguel Teran

Hace 4 años
    Oscar Barajas Tavares

    Oscar Barajas Tavares

    Team Platzi
    Hace 4 años
Max Felipe Hess Alvarez

Max Felipe Hess Alvarez

Hace 4 años
    Kevin J. Zea Alvarado

    Kevin J. Zea Alvarado

    Hace 4 años
Lukas sepulveda

Lukas sepulveda

Hace 2 años
claudia carrizo

claudia carrizo

Hace 2 años

Me gustaba más la intro anterior en los cursos, siento que está nueva es más invasiva :(

Concuerdo contigo, estaba mejor la intro anterior

considero que la intro es lo de menos... a mi me gusta más cuando la gente hace aportes de fondo y no de forma.

Les recomiendo usar la extensión Quokka.js para Visual Studio Code, y así poder ver los resultados sin ejecutar el código.

Captura de pantalla 2022-06-22 111301.png

Presionan f1 y buscan la extensión

Screenshot_1.png

parece bastante mas tocho que un simple code runner :D

para debuggear se ve perfecta... pero cómo representa los objetos?

Si como yo odias los string templates porque empeizas con " y tienes que cambiar a ` te recomiendo la extensión: Template String Converter, que hace todo el trabajo al detectar que pones ${} en un string normal.

Gran aporte compañero

Que gran aporte, siempre tenía que ir a google y copiar la `, gracias compañero!

para los que se pregunten, el plugin que usa el profesor para ejecutar solo el código seleccionado se llama ++Code runner++

Adiocionalmente hay que instalar nodejs, ya sea en Windows o si usan WSL

Sip exacto, hay que instalar node.js porque sino manda error al intentar ejecutar.

En resumen: El alcance que tendrán las variables declaradas dentro de una función vivirán solo ahí. Por lo que si queremos llamarlas por fuera de la función nos indicará como variable no definida

Local Scope

Al declarar variables dentro de una funcion estas solo podran ser utilizadas dentro de la misma, si se trata de invocar desde afuera la consola marcara un error y aplica solo al usar let o const.

Para los que se estan preguntando que paso con el VAR a la hora de declarar una variable en JS, estas se dejaron de lado debido a la implementacion del ES6 que trajo let y const, disminuyendo el dolor de cabeza con var y sus muy provechosos scopes <3

Tengo entendido que las variables declaradas con var que estén dentro de una función siempre tienen scope de función, mientras que las variables declaradas con let y const declaradas también dentro de una función tendrán scope de bloque. Estoy en lo correcto? 🤔

Estás en lo correcto.

Like si te pareció que Hello Ana! parecía a Hello Anal xD

#Ejercicio en clase

function greeting() { let userName = 'Ana'; console.log(userName); if(userName === 'Ana'){ console.log( `Hello ${UserName}!`) } } greeting(); console.log(userName);// no esta asignada como global por eso no se muestra

¿Es Scope local?

Aja El scope local de función (function scope) es el entorno donde las variables locales solo se pueden acceder desde una función del programa.

Excelente la explicación, entendí mejor el concepto del scope. Súper

Excelente explicacion

Hola, queria preguntar, cual es la diferencia en uso de diferentes tipos de comillas? Gracias

Entre comillas simples (' ') y comillas dobles (" ") no hay diferencia, la forma de concatenar strings con estos es usando el operador +. Ejemplo:

console.log('Hola ' + "Anna") // Hola Anna

Pero con las comillas invertidas ( ) se hace uso de una funcion agregada en ES2015 llamada template literals o plantillas de cadenas de texto esta es una forma nueva de "concatenar" strings con variables, y se hace usando este formato ${variable}. Ejemplo

const nombre = 'Anna'; console.log(`Hola ${nombre}`) //Hola Anna

Hola que tan, tengo una duda, siempre aparte de los cursos refuerzo la informacion googleando un poco, pero la verdad que acerca de Function Scope encuentro muy poco a casi nada, en cambio si mucho a block scope puede ser que se conozca con otro nombre function scope? gracias.

Funcion Scope / Block Scope (solo es un nombre según donde se encuentre) Bloque puede ser dentro de {} y función es igualmente un bloque y puede tener muchos bloques internos.

¿Profe que extensión de VS Code utilizas para tener esas referencias de error en rojo?

Error Lens: https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens

No entiendo porqué este valor ${userName}! dentro de un string me devuelve como si fuera parte del string

Miguel, lo más probable es que no esté sutilizando los template strings `` que es un tipo de comilla especial para utilizar este formato de llamado de variables.

Profesor, tengo la duda de cuando uno debe utilizar el function Scope y por que.

Hola, Max. 👋 Se prefiere usar el function scope cuando esa variable sólo se usará dentro de una función específica. Si podría usarse en otro lugar, lo ideal sería dejarla más global al alcance de otras funciones.

Mi ex se llamaba Ana :(

Cada función en JavaScript tiene su propio scope. Esto significa que las variables declaradas dentro de una función son accesibles únicamente dentro de esa función y en cualquier función que esté anidada dentro de ella.

En otras palabras, las variables locales de una función no pueden ser accedidas desde fuera de esa función, pero sí pueden ser utilizadas por las funciones anidadas.