[JavaScript] 클로저

클로저 클로저(closure)는 내부함수가 외부함수의 맥락(context)에 접근할 수 있는 것을 가르킨다. 클로저는 자바스크립트를 이용한 고난이도의 테크닉을 구사하는데 필수적인 개념으로 활용된다. 1. 내부함수자바스크립트는 함수 안에서 또 다른 함수를 선언할 수 있다. 아래의 예제를 보자. 결과는 경고창에 coding everybody가 출력될 것이다.function outter(){// 외부 함수 function inner(){ //내부 함수 var title = 'coding everybody'; alert(title); } inner();}outter();실행결과)coding everybody위의 예제에서 함수 outter의 내부에는 함수 inner가 정의 되어 있다. 함수 inner를 내부 함수..

• format_list_bulleted Javascript/JavaScript
• · 2020. 7. 7.
• textsms

[JavaScript] 유효범위

유효범위 유효범위(Scope)는 변수의 수명을 의미한다. var vscope = 'global';// 전역 변수function fscope(){ alert(vscope);}fscope();실행결과)global 함수 밖에서 변수를 선언하면 그 변수는 전역변수가 된다. 전역변수는 에플리케이션 전역에서 접근이 가능한 변수다. 다시 말해서 어떤 함수 안에서도 그 변수에 접근 할 수 있다. 그렇기 때문에 함수 fscope 내에서 vscope를 호출 했을 때 함수 밖에서 선언된 vscope의 값 global이 반환된 것이다. var vscope = 'global';function fscope(){ var vscope = 'local';// 로컬 변수 alert('함수안 '+vscope);//local}fscope(..

• format_list_bulleted Javascript/JavaScript
• · 2020. 7. 7.
• textsms

[JavaScript] Object

Object Object 객체는 객체의 가장 기본적인 형태를 가지고 있는 객체이다. 다시 말해서 아무것도 상속받지 않는 순수한 객체다. 자바스크립트에서는 값을 저장하는 기본적인 단위로 Object를 사용한다. var grades = {'test1': 10, 'test2': 6, 'test3': 80};동시에 자바스크립트의 모든 객체는 Object 객체를 상속 받는데, 그런 이유로 모든 객체는 Object 객체의 프로퍼티를 가지고 있다.Object의 prototype은 모든 객체의 prototype이 된다.Object가 가지고 있는 prototype는 모든 객체가 사용할 수 있는 기능이다. 즉, 모든 객체가 공통적으로 사용할 기능이 있다면 Object의 prototype으로 지정해 쓸 것이다. 모든 객체가..

• format_list_bulleted Javascript/JavaScript
• · 2020. 7. 7.
• textsms

[JavaScript] prototype

prototype 한국어로 원형이다. 자바스크립트는 prototype를 통해 상속 기능을 제공한다. 1. prototype그럼 prototype이란 무엇인가? 한국어로는 원형정도로 번역되는 prototype은 말 그대로 객체의 원형이라고 할 수 있다. 함수는 객체다. 그러므로 생성자로 사용될 함수도 객체다. 객체는 프로퍼티를 가질 수 있는데 prototype이라는 프로퍼티는 그 용도가 약속되어 있는 특수한 프로퍼티다. prototype에 저장된 속성들은 생성자를 통해서 객체가 만들어질 때 그 객체에 연결된다. function Ultra(){}Ultra.prototype.ultraProp = true; function Super(){}Super.prototype = new Ultra(); function ..

• format_list_bulleted Javascript/JavaScript
• · 2020. 7. 7.
• textsms

[JavaScript] 상속

상속 1. 상속(inheritance)이란?객체는 연관된 로직들로 이루어진 작은 프로그램이라고 할 수 있다. 상속은 객체의 로직을 그대로 물려 받는 또 다른 객체를 만들 수 있는 기능을 의미한다. 단순히 물려받는 것이라면 의미가 없을 것이다. 기존의 로직을 수정하고 변경해서 파생된 새로운 객체를 만들 수 있게 해준다. 상속 받은 객체가 부모 객체의 어떠한 기능은 제외하고 어떠한 기능은 추가해서 자신의 맥락에 맞게 부모의 객체의 로직을 재활용하면서 또 그 맥락에 맞는 로직을 제거하거나 추가하면서 재활용할 수 있다. 아래 코드는 이전 시간에 살펴본 코드다.function Person(name){ this.name = name; this.introduce = function(){ return 'My name ..

• format_list_bulleted Javascript/JavaScript
• · 2020. 7. 7.
• textsms

[JavaScript] this

this vo.) context: 의미가 고정적이지 않고 그것을 사용하는 상황에 따라 의미가 달라질수 있다. 가변적이다this는 함수 내에서 함수 호출 맥락(context)를 의미한다. 맥락이라는 것은 상황에 따라서 달라진다는 의미인데 즉 함수를 어떻게 호출하느냐에 따라서 this가 가리키는 대상이 달라진다는 뜻이다. 함수와 객체의 관계가 느슨한 자바스크립트에서 this는 이 둘을 연결시켜주는 실질적인 연결점의 역할을 한다.this는 함수 안에서 사용할 수 있는 일종의 변수이면서 그 변수안에 값은 그 함수를 어떻게 호출하느냐에 따라서 달라진다. 1. 함수호출함수를 호출했을 때 this는 무엇을 가르키는지 살펴보자. this는 전역객체인 window와 같다.function func(){ if(window ..

• format_list_bulleted Javascript/JavaScript
• · 2020. 7. 7.
• textsms

[JavaScript] 생성자와 new

생성자와 new new를 붙이면 객체가 된다. 1. 객체객체란 서로 연관된 변수와 함수를 그룹핑한 그릇이라고 할 수 있다. 객체 내의 변수를 프로퍼티(property) 함수를 메소드(method)라고 부른다. 객체를 만들어보자.자바스크립트는 어느 객체지향언어와 같지 않다. 자바스크립트만의 독특한 체계를 가지고 있다. 자바스크립트 계열에 속하는 언어들은 prototypeBased 프로그래밍 언어이다. 자바스크립트 객체 : 전통적인 함수의 특징을 그대로 가지고 있지 않고 객체지향적인 문법 비슷하게 사용하면서 함수형 언어이다. 알면 알수록 난해하다. 하지만 자바스크립트가 추구하는 스타일은 자유롭고 유연하다.엄격성, 규제(자바)가 깐깐하는 것과는 대비된다. 언어를 바라보는 넓어지는 기회로 삼자. var pers..

• format_list_bulleted Javascript/JavaScript
• · 2020. 7. 7.
• textsms

[JavaScript] 함수의 호출

함수의 호출 자바스크립트에서 함수는 일종의 객체이다. 객체는 속성을 가지고 있다. 그 속성에 값이 저장되어 있다면 속성(프로퍼티)라고 한다. 그 속성에 함수가 있다면 메소드라고 한다. 함수에 대한 기본 수업에서 함수를 호출하는 방법을 알아봤다. 아래는 함수를 호출하는 가장 기본적인 방법이다. function func(){// func라는 이름의 함수는 객체이기 때문에 이 함수는 메소드를 가지고 있다. 이 메소드는 자바스크립트에서 만든 것이기 때문에 내장된 객체이다. }// func라는 이름의 함수를 정의하면 func.apply/func.call(객체.메소드)--> func라는 함수(객체)를 호출하는 역할을 한다.func();JavaScript는 함수를 호출하는 특별한 방법을 제공한다. 본 토픽의 시작에서..

• format_list_bulleted Javascript/JavaScript
• · 2020. 7. 7.
• textsms

[JavaScript] 콜백

콜백 콜백이란 어떠한 함수가 수신하는 인자가 함수인 경우 콜백이라 한다. --> 함수를 정의한 곳의 매개변수(여기서는 인수가 된다. 인자와 인수와 비교)가 함수인 경우를 말한다. 1. 처리의 위임값으로 사용될 수 있는 특성을 이용하면 함수의 인자로 함수로 전달할 수 있다. 값으로 전달된 함수는 호출될 수 있기 때문에 이를 이용하면 함수의 동작을 완전히 바꿀 수 있다. 인자로 전달된 함수 sortNumber의 구현에 따라서 sort의 동작방법이 완전히 바뀌게 된다. function sortNumber(a,b){//콜백함수 // 위의 예제와 비교해서 a와 b의 순서를 바꾸면 정렬순서가 반대가 된다. return b-a;}var numbers = [20, 10, 9,8,7,6,5,4,3,2,1];alert(n..

• format_list_bulleted Javascript/JavaScript
• · 2020. 7. 7.
• textsms

[JavaScript] 값으로서의 함수

값으로서의 함수와 콜백 JavaScript에서는 함수도 객체다. 다시 말해서 일종의 값이다. 거의 모든 언어가 함수를 가지고 있다. JavaScript의 함수가 다른 언어의 함수와 다른 점은 함수가 값이 될 수 있다는 점이다.함수역시 변수에 담을수 있다.(var a = function(){})function a(){} // var a = function( ){ }(함수가 값이므로 가능하다.)위의 예제에서 함수 a는 변수 a에 담겨진 값이다. 또한 함수는 객체의 값으로 포함될 수 있다. 이렇게 객체의 속성 값으로 담겨진 함수를 메소드(method)라고 부른다. a = { b:function(){ }};//객체는 {에서 }로 끝난다.함수는 값이고 그렇기 때문에 객체안에 저장될 수 있다 .객체 안에서 b라는 ..

• format_list_bulleted Javascript/JavaScript
• · 2020. 7. 7.
• textsms