JavaScript 검색 결과

해당 글 163건

자바스크립트의 배열(Array) 기초

배열(Array) 배열은 자바스크립트 객체의 특별한 형태입니다. 즉, C나 자바의 배열과 같은 기능을 하는 객체이지만, 이들과는 다르게 굳이 크기를 지정하지 않아도 되며, 어떤 위치에 어떤 타입의 데이터를 저장하더라도 에러가 발생하지 않습니다. 자바스크립트 배열은 어떤 타입이던지간에 그 타입의 데이터를 연속된 공간에 저장하는 자료구조입니다. 그리고 각 데이터 저장 위치는 인덱스를 부여해서 접근할 수 있습니다. 배열 리터럴 배열을 사용하기 위해서는 Array() 를 이용하는 방법도 있지만 포스팅에서는 자주 이용되는 배열리터럴에 대해 알아보겠습니다. 배열 리터럴은 자바스크립트에서 새로운 배열을 만드는 데 사용하는 표기법입니다. 객체 리터럴이 중괄호( {} )를 이용한 표기법이었다면, 배열 리터럴은 대괄호( ..
JavaScript/Core & 개념ㆍ용어 2016. 9. 29. 09:28

자바스크립트에서 함수는 값으로 취급된다

값으로서의 함수 자바스크립트에서는 함수도 객체입니다. 다시말해서 일종의 값입니다. 거의 모든 언어가 함수를 가지고 있지만 자바스크립트 함수가 다른 언어의 함수와 다른 점은 함수가 값으로 사용될 수 있다는 점입니다. 그렇다면 값이라는 것은 어떤 특징을 가지고 있을까? 예를 들어, 값은 어떠한 변수에 'value'라는 문자열을 담을 수 있습니다. var a = 'value'; 값은 어떠한 변수에 'value'라는 문자열을 담을 수 있습니다. value 라는 문자열을 담을 수 있는 이유는 value 라는 것이 값이기 때문입니다. 자바스크립트의 함수 역시도 변수에 담을 수 있는 속성을 가지고 있다고 할 수 있는데 이는 다른 언어의 함수와 다른 점입니다. function a() {} 위에 정의된 함수는 a라는 자..
JavaScript/Core & 개념ㆍ용어 2016. 9. 29. 09:26

디자인 패턴 그리고 모듈

디자인 패턴 (Design Pattern) 자바스크립트는 언어적인 차원에서 라이브러리를 작성하고 관리하는 기능을 제공하지는 않는다. 그러나 디자인 패턴을 사용해 재사용 가능한 독립적인 자바스크립트 라이브러리를 작성할 수 있다. 코드를 작성하는 방식이나 스타일에 대한 이슈는 특정 언어와는 상관없이 어떤 언어를 사용하든 발생할 수 있는 문제다. 디자인 패턴에 관해 설명하자면 디자인 패턴이란 프로그래밍 과정에서 발생하는 특정 이슈들을 해결하기 위해 여러 사람들이 내놓은 해결책등의 코드 패턴들을 일컫는다. 모듈(Module) 프로그램은 작고 단순한 것에서 크고 복잡한 것으로 진화한다. 그 과정에서 코드의 재활용성을 높이고, 유지보수를 쉽게 할 수 있는 다양한 기법들이 사용된다. 그 중의 하나가 코드를 여러개의 ..
JavaScript/Core & 개념ㆍ용어 2016. 9. 29. 09:26

클로저(closure) 그리고 모듈과 네임스페이스

함수 유효범위와 클로저(Closure) 클로저는 외부함수(포함하고 있는)의 변수에 접근할 수 있는 내부 함수를 말합니다. 스코프 체인(scope chain)으로 표현되기도 합니다. 클로저는 세가지 스코프 체인을 가지고 있습니다. 클로저 자신에 대한 접근(자신의 블럭내에 정의된 변수), 외부 함수의 변수에 대한 접근, 그리고 전역 변수에 대한 접근. 이렇게 3단계로 구분할 수 있습니다. 내부 함수는 외부 함수의 변수뿐만 아니라 파라미터에도 접근할 수 있습니다. 단, 내부 함수는 외부 함수의 arguments 객체를 호출할 수는 없습니다. (하지만, 외부 함수의 파라미터는 직접 호출할 수 있습니다.) 함수 유효범위와 클로저 자바스크립트 인터프리터가 함수를 호출하게 되면 인터프리터는 호출 객체(활성화 객체로도..
JavaScript/Core & 개념ㆍ용어 2016. 9. 29. 09:25

클로저(closure)

Closure 어떤 내부함수를 감싸는 외부함수가 실행되고 나서 종료되었다 하더라도 내부함수에서 외부함수의 변수(단, 변수의 최종값)에 접근할 수 있는 방법입니다. 즉, 다른 함수의 스코프에 있는 변수의 최종값에 접근 가능한 함수를 말합니다. 지역변수는 함수가 실행될때 생성되고 함수가 종료될때 사라지기 때문에 자바스크립트는 지역변수를 지우면 안된다고 인식하고 지역변수를 남겨두는 특성,현상을 클로저라고 합니다. 클로저는 이미 많은 곳에서 다양하게 다음과 같이 정의되고 있습니다.1. 지역변수를 남겨두는 현상. 2. 외부,내부함수가 있을때 외부함수로 인해 생성된 공간을 클로저. 3. 리턴되는 함수자체를 클로저. (함수를 리턴하는 함수를 사용하는 가장 큰 이유 중 하나는 클로저 때문이다) 4. 살아남은 지역변수를..
JavaScript/Core & 개념ㆍ용어 2016. 9. 29. 09:23

JavaScript Closure(자바스크립트 클로저)

클로저(Closure) 클로저라는 개념은 자바스크립트에 없는 class 의 역할을 대신해 비공개 속성/메서드, 공개 속성/메서드를 구현할 수 있는 근거를 마련할 수 있습니다. 따라서 객체지향적인 특징인 캡슐화(encapsulation)와 정보 은닉(information hiding)을 이해하려면 클로저를 반드시 이해해야 합니다. 클로저는 jQuery 같은 대형 라이브러리에서 채용되는 패턴입니다. JavaScript Closure 함수를 정의하면 함수 단위의 렉시컬한 변수 스코프가 생성되고 변수 스코프의 체인이 구성됩니다. 즉, 중첩 함수의 경우 코드상에서 함수가 중첩된 그대로의 모습으로 변수 스코프 체인이 구성되어 변수에 대한 접근 권한도 코드의 계층구조 그대로 구성됩니다. 이제 다른 상황을 가정해 봅니..
JavaScript/Core & 개념ㆍ용어 2016. 9. 29. 09:22

프로토타입방식의 클래스

프로토타입기반 클래스 기초 특징 1) 코드 재사용 기능 함수 기반 클래스(생성자 패턴)와 동일하게 여러 개의 인스턴스를 만들어 재사용할 수 있는 장점이 있습니다. 2) 메서드 공유 기능 단점이 없어 보이는 함수 방식 클래스는 치명적인 단점을 가지고 있습니다. 바로 인스턴스마다 내부의 모든 메서드가 독립적으로 만들어 진다는 것입니다. 하지만 프로토타입을 이용하면 모든 인스턴스마다 프로토타입객체를 상속받기 때문에 인스턴스마다 독립적으로 메서드가 생성되는 것이 아니라 해당 메서드를 상속받아 사용하기 때문에 오직 해당 메서드는 하나뿐입니다. 다시 말해서 prototype 을 이용해 상속을 구현한다는 점입니다. 예를 들어 '문자열'.toString() 과 같습니다. 프로토타입 클래스 문법 타입 function 클..
JavaScript/Core & 개념ㆍ용어 2016. 9. 29. 09:21

실행 컨텍스트의 개념

CONTEXT 실행 컨텍스트의 개념을 설명하기에 앞서 call stack(콜 스택)을 먼저 알아보자. 이는 함수를 호출할때 해당함수의 호출정보가 차곡차곡 쌓여있는 스택(잘 정리된 더미)을 의미한다. 프로그램을 작성할때 main함수(외부)가 있고 main 함수 내에서 다른 함수를 호출한다고 했을 때 이렇게 호출된 함수가 또 다시 다른 함수를 호출 할 수도 있고 단순 처리과정만을 거친 후 main 함수로 돌아 갈 수도 있다. 즉, A함수 내부에 B함수를 호출하고 B함수 처리과정 중에 C라는 함수를 또 호출된다고 할때 이러한 처리 순서를구현하기 위해서 사용되는 것이 call stack이라는 구조이다. (이 구조는 크롬의 개발자 도구의 우측에서 확인할 수가 있다.) 이러한 콜 스택의 호출 정보등으로 코드의 실행..
JavaScript/Core & 개념ㆍ용어 2016. 9. 29. 09:19

자바스크립트 생성자 패턴 - new를 강제하는 패턴

javaScript 생성자 함수의 핵심 패턴 자바스크립트에는 클래스가 없기 때문에 상당히 유연합니다. 객체에 대해 사전에 알아두어야 하는 내용, 즉 클래스의 '청사진' 같은 것이 필요없기 때문입니다. 그러나 자바스크립트에도 자바와 같은 클래스 기반 객체 생성과 비슷한 문법을 가지는 생성자 함수가 존재합니다. 생성자 함수로 객체 생성하기 객체를 생성할 때는 사용자가 직접 만든 생성자 함수를 사용할 수도 있고, Object(), Date(), String() 등 내장 생성자를 사용할 수도 있습니다. 다음 예제는 동일한 객체를 생성하는 두 가지 방법을 보여줍니다. javascript // 첫 번째 방법 - 객체 리터럴 사용 var car = { goes : 'far'}; // 다른 방법 - 내장 생성자 사용 ..
JavaScript/Core & 개념ㆍ용어 2016. 9. 29. 09:18

자바스크립트 생성자

JS Constructor 자바스크립트 생성자는 객체 인스턴스를 생성하고 반환한다. 생성자 함수의 역할은 같은 값과 동작을 공유하는 객체를 여러 개를 만드는 것에 있습니다. 기본적으로 생성자 함수는 기본 속성과 속성 메소드를 갖춘 객체를 생산해내는 쿠키틀(cookie cutter)과 같은 것입니다. 만약에 다른 누군가가 "생성자 함수는 그냥 함수이잖아!!" 라고 한다면 "맞아.. new 키워드를 사용해서 실행하지 않는다면 그냥 함수일 뿐이지.." 라고 답할 수 있습니다. E.g.) new String('foo'); new 키워드를 사용하면 자바스크립트가 생성자 함수 내에 있는 this 의 값을 새로 만들어진 객체로 설정함으로써 생성자 함수는 일반함수와는 다른 특수한 동작을 수행하게 되는 것입니다. 특수한..
JavaScript/Core & 개념ㆍ용어 2016. 9. 29. 09:18

클래스 기반의 객체지향 개념

자바스크립트 객체지향 프로그래밍 클래스(생성자) 기반의 객체지향 기법 프로그램을 작성하는 방법론 관점에서 보면 자바스크립트는 함수(function)을 위주로 프로그래밍을 해나가는 절차적 프로그래밍(procedural programing)과 함수를 비롯해 모든 것을 객체로 간주해서 객체를 중심으로 프로그래밍을 해 나가는 객체지향 프로그래밍(object-oriented-proraming) 방법을 모두 지원하는 언어이다. 객체지향 프로그래밍 언어도 다시 클래스 기반의 프로그래밍과 프로토타입 기반의 프로그래밍으로 나뉘는데. 자바스크립트는 프로토타입 기반의 객체지향 프로그래밍을 지원한다. 클래스 기반 언어에서는 클래스를 이용해 객체를 만들고 클래스를 기반으로 해서 상속을 지원하지만 프로토타입 언어에서는 객체의 원..
JavaScript/Core & 개념ㆍ용어 2016. 9. 29. 09:17

Function 생성자 및 인스턴스(instance)

Function 실제 코딩에서 Function을 사용하는 일이 많지는 않지만 그 의미와 그것이 어떤 위치를 차지하는지는 이해하고 있어야 합니다. 그래야 자바스크립트의 객체지향 프로그래밍 세계에서 함수를 제대로 이해할 수 있습니다. Function vs. function 자바스크립트에서는 기본적으로 Function(대문자로 시작한다)이라는 함수를 제공합니다. 이것은 함수 인스턴스를 생성하는 함수입니다. Function 은 함수 인스턴스를 생성하는 함수이다. "인스턴스(instance)"라는 용어는 "객체(object)"와 유사합니다. 다만, 의미상으로 "객체"는 좀더 일반적인 의미인 반면에 "인스턴스"라고 표현하면 "현재 생성된 바로 그 객체"라는 인스턴트(instant)한 뉘앙스로 좀 더 짙게 표현할 수..
JavaScript/Core & 개념ㆍ용어 2016. 9. 29. 09:16

JS : 함수 호출 패턴 기초

함수를 호출하는 네 가지 패턴 함수는 네 가지 시나리오나 패턴을 사용해 호출할 수 있습니다. 함수로서 호출하기 메소드로서 호출하기 생성자로서 호출하기 apply() 또는 call() 을 사용해서 호출하기 다음 코드에서 이러한 네 가지 패턴을 사용해 함수를 호출해 보도록 합니다. 함수 패턴 javascript // 함수 패턴 var myFn = function () { return 'jaehee'; }; console.log(myFn()); // jaehee 가 기록된다. 메소드 패턴 javascript // 메소드 패턴 var myObj = { myFn: function () { return '메소드 패턴입니다.' } }; console.log(myObj.myFn()); 생성자 패턴 javascript ..
JavaScript/Core & 개념ㆍ용어 2016. 9. 29. 09:16

자바스크립트 함수 - Function

JS Function(자바스크립트 함수) 자바스크립트는 함수를 다양한 방법으로 사용합니다. 따라서 함수를 완벽히 익히는 것은 자바스크립트 개발자에게 필수 기술일 것입니다. 다른 언어에서는 별도의 문법으로 처리하는 다양한 작업들을 자바스크립트에서는 함수가 수행합니다. 이 글에서는 자바스크립트에서 함수를 정의하는 다양한 방법들과 함수 표현식 그리고 함수 선언문에 대해서 알아보고 지역 유효범위와 변수 호이스팅(hoisting)이 어떻게 동작하는지 살펴보도록 합니다. 그리고 나서 함수에 더 나은 인터페이스를 제공하는 API, 전역 변수를 덜 사용하는 초기화, 불필요한 작업을 회피해 성능에 도움을 주는 여러가지 패턴들에 대해 알아봅니다. 배경 지식 자바스크립트의 함수를 특별하게 만드는 두 가지 중요한 특징이 있습..
JavaScript/Core & 개념ㆍ용어 2016. 9. 29. 09:16

참조타입의 특성

참조 타입 자바스크립트에서 기본타입 5가지를 제외한 모든 값은 객체입니다. 배열이나 함수또한 객체로 취급됩니다. 이러한 객체는 자바스크립트에서 참조 타입이라고 부릅니다. 이것은 객체의 모든 연산이 실제 값이 아닌 참조값으로 처리되기 때문입니다. 기본타입은 직접 값을 가지고 있는 반면에 참조타입은 직접 값을 가지고 있지 않고 참조하는 객체에 번지를 가지고 있습니다. ■ 스택(Stack) 영역 - 함수 호출, 변수 생성시 생성되는 지역 변수와 매개 변수가 저장되는 영역 - 함수 호출이 완료되면 사라진다. 다시말해서, 스택영역에는 기본적으로 변수들이 생성이 되는 영역입니다. ■ 힙(Heap) 영역- 필요에 의해 동적으로 메모리를 할당할 때 사용 - 객체/배열에 저장되는 영역 - 사용되지 않는 객체는 GC(가비..
JavaScript/Core & 개념ㆍ용어 2016. 9. 29. 09:15