WEB/JavaScript (25) 썸네일형 리스트형 [JS] 클로저가 무엇일까? 클로저 란? 어떤 함수를 렉시컬 스코프 밖에서 호출해도, 원래 선언되었던 렉시컬 스코프를 기억하고 접근할 수 있도록 하는 특성을 클로저라고 한다. function outer(){ let name = 'michelle'; function inner(){ console.log(`hello! ${name}`); } inner(); return inner; } let greeting = outer(); greeting(); outer함수 내부에서 inner 함수를 호출했을 때, 렉시컬 스코프에 따라서 inner함수의 상위 스코프는 outer함수 이다. 따라서 outer함수에 있는 name 변수에 접근할 수 있고 "hello! michelle"을 찍을 수 있다. greeting 변수에는 outer함수의 리턴값인 .. [JS] 함수 스코프(Scope)에 대해 좀 더 알아보자 스코프(Scope, 유효범위)란? 자바스크립트에서 스코프를 번역할때 보통 유효범위라고 번역한다. 어떤 변수들이 어느 시점까지 유효한지를 정의한다.스코프엔 두 가지 종류가 있다. 전역 스코프 자바스크립트 프로그램을 시작 후, 어떤 함수도 호출하지 않았을 때, 실행 흐름은 전역 스코프에 있다. 중괄호 {}의 밖을 전역 스코프라고 하고, 전역 스코프에서 선언된 것들을 전역 변수라고 한다. 전역 변수를 많이 이용한다면 부작용이 발생한다. const name = 'Kwon' const age = 21; function displayName() { console.log(`My name is ${name}`); } function displayAge() { console.log(`I was born in ${new .. [JS] 함수 호이스팅(Hoisting) 함수 호이스팅(hoisting) 자바스크립트에서 함수의 유효 범위라는 것은 함수 안에서 선언된 모든 변수는 함수 전체에 걸쳐 유효하다는 의미이다. 그런데 이 유효 범위의 적용이 변수가 선언되기 전에도 똑같이 적용된다. 이러한 자바스크립트의 특징을 함수 호이스팅(hoisting)이라고 한다. 즉, 자바스크립트 함수 안에 있는 모든 변수의 선언은 함수의 맨 처음으로 이동된 것처럼 동작한다. var globalNum = 10; // globalNum을 전역 변수로 선언함. function printNum() { document.write("지역 변수 globalNum 선언 전의 globalNum의 값은 " + globalNum + "입니다. "); var globalNum = 20; // globalNum을 .. [JS ES6+] var, let, const 차이점과 용도 JavaScript에서 변수 선언 방식인 var, let, const의 차이점에 대해 알아보자. var name = 'bathingape' console.log(name) // bathingape var name = 'javascript' console.log(name) // javascript 위 결과를 볼 때 변수를 한 번 더 선언했음에도 불구하고, 에러가 나오지 않고 각기 다른 값이 출력되는 것을 볼 수 있다. 이는 유연한 변수 선언으로 간단한 테스트에는 편리할 수 있겠으나, 코드량이 많아진다면 어디에서 어떻게 사용될지도 파악하기 힘들뿐더러 값이 바뀔 우려가 있다. let name = 'bathingape' console.log(name) // bathingape let name = 'javascr.. [JS] DOM(Document Object Model)에 대해서 알아보자 문서 객체 모델(DOM)이란? DOM(Document Object Model)은 웹 페이지에 대한 인터페이스이다. 기본적으로 여러 프로그램들이 페이지의 콘텐츠 및 구조, 그리고 스타일을 읽고 조작할 수 있도록 API를 제공한다. 먼저 DOM을 이해하기 전에 웹 페이지가 어떻게 빌드 되는지 살펴보자. DOM은 어떻게 생성될까 (그리고 어떻게 보여질까)? DOM은 원본 HTML 문서의 객체 기반 표현 방식이다. 둘은 서로 비슷하지만, DOM이 갖고 있는 근본적인 차이는 단순 텍스트로 구성된 HTML 문서의 내용과 구조가 객체 모델로 변환되어 다양한 프로그램에서 사용될 수 있다는 점이다. DOM의 개체 구조는 “노드 트리”로 표현된다. 하나의 부모 줄기가 여러 개의 자식 나뭇가지를 갖고 있고, 또 각각의 나뭇.. [JS] 자바스크립트의 객체 객체 객체란, 현실의 사물을 프로그래밍에 반영한 것이다. var name = { firstName = "gang", lastName = "hodong" }; name이라는 변수에 { }로 감싼 덩어리를 넣었다. 바로 이 덩어리가 객체이다. 여기서 fistName과 lastName은 Key가 되고 각각 gang과 hodong은 Value가 된다. 함수를 클래스처럼 사용하게 해주는 키워드 new 자바스크립트에서는 class가 없다. 하지만 그렇다고 하지만 그 기능을 대신하는 함수가 있다. new 라는 생성자 함수를 사용한다면 함수를 클래스처럼 인스턴스를 생성할 수 있다. 사용 예시 function Person(name, gender) { this.name = name; this.gender = gender;.. [JS] 자바스크립트 함수란 ? 함수(function)란? 함수(function)란 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록을 의미한다. 이러한 함수는 필요할 때마다 호출하여 해당 작업을 반복해서 수행할 수 있다. 자바스크립트에서는 함수도 하나의 타입(datatype)입니다. 따라서 함수를 변수에 대입하거나, 함수에 프로퍼티를 지정하는 것도 가능하다. 또한, 자바스크립트 함수는 다른 함수 내에 중첩되어 정의될 수도 있다. 문법 및 형태 function 함수이름(매개변수1, 매개변수2,...) { 실행문; } 자바스크립트에서 함수는 문법적 구문일뿐만 아니라 값(value)이기도 하다. 따라서 함수가 변수에 대입될 수도 있으며, 다른 함수의 인수로 전달될 수도 있다. 다음 예제는 함수를 변수에 저장하여 사용하는 예제이다.. [JS] for in, for of 문? for in 문 for in문은 for문가 다르게 동작하는 반복문이다. C#의 foreach와 같은 기능을 하는 구문인 것 같다. var arr = [1, 2, 3]; for (var i = 0; i < arr.length; i++) { // 배열 arr의 모든 요소의 인덱스(index)를 출력함. document.write(i + " "); } var arr = [1, 2, 3]; for (var i in arr) { // 위와 같은 동작을 하는 for / in 문 document.write(i + " "); } for에 들어가는 인자 형태가 서로 다르다. for / in 문은 해당 객체의 모든 열거할 수 있는 프로퍼티(property)를 순회할 수 있도록 해준다. for of 문 for / of 문은.. 이전 1 2 3 4 다음
