리터럴과 생성자
목차 객체란? 객체 리터럴 생성자 함수 New를 강제하는 패턴 배열 리터럴 JSON 정규 표현식 리터럴 원시 데이터 타입 래퍼 에러 객체 정리
리터럴 & 객체 리터럴이란?  문자열 자체가 값을 나타내는 것  x = “90” 객체란?  이름 붙은 값들의 모음이다.  image 이름의 객체에  width, height 프로퍼티 2개가 있을 시  image.wi...
객체 리터럴 문법1.객체를 중괄호( { } )로 감싼다.2.객체 내의 프로퍼티와 메서드를 쉼표로 분리한다. 마  지막에는 붙이지 않는다.3.프로퍼티명과 프로퍼티 값은 콜론으로 분리한다.4.객체를 변수에 할당할 때는 닫는...
빈 객체   빈 객체란?     Object.prototype에서 상속받은 프로퍼티와 메서드를 가      진다.     „비어있다‟는 말은 어떤 객체가 상복받은 것 외에는 자신      의 프로퍼티를 갖고 있지 ...
객체 리터럴 (1) 객체는 이름-값 쌍의 해시 테이블과 비슷하다 원시 테이터 타입과 객체(복합 데이터) 모두 값이 될  수 있다. 함수도 값이 될 수 있으며 이런 함수는 메서드라고  부른다.* Primative d...
객체 리터럴 (2) 빈 객체 생성 var dog = { } 프로퍼티 추가 dog.name = “Benji”; 메서드 추가 dog.getName = fucntion () {    return dog.name; };
객체 생성자자바스크립트에는 클래스가 없기 때문에 유연하다.객체 생성 - 리터럴 사용var car = { goes: “far”};// 내장 생성자 사용 (안티패턴)var car = new Object();car.goes ...
객체 생성자 – 함정 (1)   생성자가 인자를 받을 수 있어서 인자로 전달되는 값에 따라    다른 내장 생성자 객체 생성을 위임 할 수 있어서 다른 객체    가 반환 되기도 한다.var o = new Object...
객체 생성자 – 함정 (2)var o = new Object(“I am a string”);console.log(o.consturctor === String); //trueconsole.log(typeof o.subst...
사용자 정의 생성자 함수(1) 직접 생성자 함수를 만들어 객체 생성  var adam = new Person(“Adam”);  adam.say(); //”I am Adam” Person은 그저 보통의 함수일 뿐이다 ...
사용자 정의 생성자 함수(2)var Person = function(name) {// var this = { };//위 라인이 빠진 것이다      this.name = name;      this.say = funct...
사용자 정의 생성자 함수(3)   new 로 생성자 함수를 호출 시       빈 객채 생성       This라는 변수 참조 가능       해당 함수의 프로토타입을 상속 받음       This로 참조 되는...
사용자 정의 생성자 함수(4)바뀌지 않고 재사용이 필요할 시프로토타입을 쓰는것이 좋다person.prototype.say = function() {    return “I am “ + this.name;};var thi...
사용자 정의 생성자 함수(5)빈 객체var this = {};var this = Object.create(Person.prototype);Object.create는 다음장에…
생성자 반환 값 생성자 함수를 new와 함께 호출하면 항상 객체가 반  환된다. 함수 내에 return문을 쓰지 않았더라도 생성자는 암  묵적으로 this를 반환한다. 또한 바환 값이 될 객체를 따로 정할 수도 있...
NEW를 강제하는 패턴(1)   New없이 생성자를 호출하면 this가 전역 객체를 가    리키게 된다.    function Waffle() {         this.taste = “yummy”;    }    ...
NEW를 강제하는 패턴(2)    function Waffle() {          var that= {};          that.taste = “yummy”;          return that;    }   ...
스스로를 호출하는 생성자function Waffle() {       if (!(this instanceof Waffle)) {                    return new Waffle();       }   ...
배열 리터럴(1)    Array() 생성자    var a = new Array(“itsy”, “bitsy”, “spider”);    var a = [“itsy”, “bitsy”, “spider”];   배열도 객...
배열 리터럴(2)   New Array()의 단점    var a = [3];    console.log(a.length); //1    console.log(a[0]); //3  var a = new Array(3)...
배열 판별 방법(1) Array.isArray([]); //true Array.isArray({         length: 1,         “0”: 1,         slice: function() {} }); ...
배열 판별 방법(2) if(typeof Array.isArray === “undefined”) {       Array.isArray = function (arg) {              return Object.p...
JSON  JavaScript Object Notation의 준말 데이터 전송 형식의 일종 배열과 객체 리터럴 표기법의 조합{“name”: “value”, “some”: [1,2,3]} - 프로퍼티명에도 따옴표가 ...
JSON 사용(1) var jstr = „{“mykey”: “my value”}‟; // 공통 var data = eval(„ („ + jstr + ;) ;); //안티(보안) var data = JSON.parse(j...
JSON 사용(2) var dog = {      name: “Fido”,      dob: new Data(),      legs: [1, 2, 3, 4] };  var jsonstr = JSON.stringify(d...
졍규 표현식 리터럴   New RegExp() 생성자 사용    var re = //gm;   정규식 리터럴 사용    Var re = new RegExp(“”, “gm”);
정규식 문법 g 전역 매칭 m 여러 줄 매칭 i 대소문자 구분없이 매칭    var no_letters = “abc123XYZ”.replace(/[a-    z]/gi, “”);    console.log(no_l...
원시 데이터 타입 래퍼(1)var n = 100;console.log(typeof n); //”number”var nobj = new Number(100);console.log(typeof nobj); //”object...
원시 데이터 타입 래퍼(2)var s = new String(“my string”);var n = new Number(101);var b = new Boolean(true);var s = “my string”;var n...
원시 데이터 타입 래퍼(3)typeof Number(1); // “number”typeof Number(“1”); // “number”typeof Number(new Number()); // “number”typeof ...
에러 객체   name, message이 기본 프로퍼티이다   그 외에도 임의의 프로퍼티를 가질 수 있다    try {            throw {                      name: “MyErr...
Upcoming SlideShare
Loading in …5
×

자바스크립트 패턴 3장

2,128 views

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,128
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

자바스크립트 패턴 3장

  1. 1. 리터럴과 생성자
  2. 2. 목차 객체란? 객체 리터럴 생성자 함수 New를 강제하는 패턴 배열 리터럴 JSON 정규 표현식 리터럴 원시 데이터 타입 래퍼 에러 객체 정리
  3. 3. 리터럴 & 객체 리터럴이란? 문자열 자체가 값을 나타내는 것 x = “90” 객체란? 이름 붙은 값들의 모음이다. image 이름의 객체에 width, height 프로퍼티 2개가 있을 시 image.width image.height
  4. 4. 객체 리터럴 문법1.객체를 중괄호( { } )로 감싼다.2.객체 내의 프로퍼티와 메서드를 쉼표로 분리한다. 마 지막에는 붙이지 않는다.3.프로퍼티명과 프로퍼티 값은 콜론으로 분리한다.4.객체를 변수에 할당할 때는 닫는 중괄호 뒤에 세미콜 론을 빼먹지 않도록 하라.
  5. 5. 빈 객체 빈 객체란?  Object.prototype에서 상속받은 프로퍼티와 메서드를 가 진다.  „비어있다‟는 말은 어떤 객체가 상복받은 것 외에는 자신 의 프로퍼티를 갖고 있지 않다는 뜻으로 이해 가능하다
  6. 6. 객체 리터럴 (1) 객체는 이름-값 쌍의 해시 테이블과 비슷하다 원시 테이터 타입과 객체(복합 데이터) 모두 값이 될 수 있다. 함수도 값이 될 수 있으며 이런 함수는 메서드라고 부른다.* Primative data type, Composite data type
  7. 7. 객체 리터럴 (2) 빈 객체 생성 var dog = { } 프로퍼티 추가 dog.name = “Benji”; 메서드 추가 dog.getName = fucntion () { return dog.name; };
  8. 8. 객체 생성자자바스크립트에는 클래스가 없기 때문에 유연하다.객체 생성 - 리터럴 사용var car = { goes: “far”};// 내장 생성자 사용 (안티패턴)var car = new Object();car.goes = “far”;리터럴 표기법을 사용하면 유효범위 판별 작업도 발생하지 않는다.
  9. 9. 객체 생성자 – 함정 (1) 생성자가 인자를 받을 수 있어서 인자로 전달되는 값에 따라 다른 내장 생성자 객체 생성을 위임 할 수 있어서 다른 객체 가 반환 되기도 한다.var o = new Object();console.log(o.constructor === Object); //truevar o = new Object(1);console.log(o.constructor === Number); //trueconsole.log(o.toFixed(2)); //”1.00”
  10. 10. 객체 생성자 – 함정 (2)var o = new Object(“I am a string”);console.log(o.consturctor === String); //trueconsole.log(typeof o.substring); //”function”var o = new Object(true);console.log(o.constructor === Boolean); //true
  11. 11. 사용자 정의 생성자 함수(1) 직접 생성자 함수를 만들어 객체 생성 var adam = new Person(“Adam”); adam.say(); //”I am Adam” Person은 그저 보통의 함수일 뿐이다 (클래스가 없 으므로) var Person = fuction(name) { this.name = name; this.say = function() { return “I am “ + this.name; }; };
  12. 12. 사용자 정의 생성자 함수(2)var Person = function(name) {// var this = { };//위 라인이 빠진 것이다 this.name = name; this.say = function() { return “I am “ + this.name; }; //this를 반환한다. // return this;};
  13. 13. 사용자 정의 생성자 함수(3) new 로 생성자 함수를 호출 시  빈 객채 생성  This라는 변수 참조 가능  해당 함수의 프로토타입을 상속 받음  This로 참조 되는 객체 프로퍼티와 메서드가 추가된다  반환되는게 없을 경우 this로 참조된 객체를 반환한다
  14. 14. 사용자 정의 생성자 함수(4)바뀌지 않고 재사용이 필요할 시프로토타입을 쓰는것이 좋다person.prototype.say = function() { return “I am “ + this.name;};var this = Object.create(Person.prototype);
  15. 15. 사용자 정의 생성자 함수(5)빈 객체var this = {};var this = Object.create(Person.prototype);Object.create는 다음장에…
  16. 16. 생성자 반환 값 생성자 함수를 new와 함께 호출하면 항상 객체가 반 환된다. 함수 내에 return문을 쓰지 않았더라도 생성자는 암 묵적으로 this를 반환한다. 또한 바환 값이 될 객체를 따로 정할 수도 있다. var Objectmaker = function() { this.name = “This is it”; var that = {}; that.name = “And that‟s that”; return that; };
  17. 17. NEW를 강제하는 패턴(1) New없이 생성자를 호출하면 this가 전역 객체를 가 리키게 된다. function Waffle() { this.taste = “yummy”; } var good morning = new Waffle(); console.log(typeof good_morning); //”object” console.log(window.tastes); //”yummy” New를 빼먹을시 good_morning은 undefined로 나온 다
  18. 18. NEW를 강제하는 패턴(2) function Waffle() { var that= {}; that.taste = “yummy”; return that; } function Waffle() { return { tastes: “yummy” }; } 그러나 이 방법은 프로토타입에 추가한 맴버를 객체에서 사용 불가 var first = new Waffle(), second = Waffle(); console.log(first.tastes); //”yummy” console.log(second.tastes); //”yummy”
  19. 19. 스스로를 호출하는 생성자function Waffle() { if (!(this instanceof Waffle)) { return new Waffle(); } this.taste = “yummy”;}Waffle.prototype.wantAnother = true;var first = new Waffle(), second = Waffle();console.log(first.tastes); //”yummy”console.log(second.tastes); //”yummy”console.log(first.wantAnother); // trueconsole.log(second.wantAnother); // true
  20. 20. 배열 리터럴(1) Array() 생성자 var a = new Array(“itsy”, “bitsy”, “spider”); var a = [“itsy”, “bitsy”, “spider”]; 배열도 객체 “object” 출력한다 console.log(typeof a); console.log(a.constructor === Array); // true
  21. 21. 배열 리터럴(2) New Array()의 단점 var a = [3]; console.log(a.length); //1 console.log(a[0]); //3 var a = new Array(3); console.log(a.length); //3 console.log(typeof a[0]); // “undefined” new Array 에서는 부동소수점을 넣을시 에러가 난다 var white = new Array(256).join(„ „); 는255개의 공백문자 문자열을 반환한다.
  22. 22. 배열 판별 방법(1) Array.isArray([]); //true Array.isArray({ length: 1, “0”: 1, slice: function() {} }); // false 또는 Object.prototype.toString() 호출시 가능 “[object Array]” 는 배열이고 “[object object]” 는 객체이다
  23. 23. 배열 판별 방법(2) if(typeof Array.isArray === “undefined”) { Array.isArray = function (arg) { return Object.prototype.toString.call(arg) === “[object Array]”; }; }
  24. 24. JSON JavaScript Object Notation의 준말 데이터 전송 형식의 일종 배열과 객체 리터럴 표기법의 조합{“name”: “value”, “some”: [1,2,3]} - 프로퍼티명에도 따옴표가 필요하다 함수나 졍규식 리터럴을 사용할 수 없다.
  25. 25. JSON 사용(1) var jstr = „{“mykey”: “my value”}‟; // 공통 var data = eval(„ („ + jstr + ;) ;); //안티(보안) var data = JSON.parse(jstr); //위라인 대신 console.log(data.mykey); //”my value” // javascript YUI 사용 YUI().use(„json-parse‟, function(Y) { var data = Y.JSON.parse(jstr); console.log(data.mykey); //”my value” }); // jQuery 사용 var data = jQuery.parseJSON(jstr); console.log(data.mykey); //”my value
  26. 26. JSON 사용(2) var dog = { name: “Fido”, dob: new Data(), legs: [1, 2, 3, 4] }; var jsonstr = JSON.stringify(dog); 위 메서드는 객체 또는 배열을 인자로 받아 JSON 문 자열로 직렬화한다 {“name”:”Fido”, “dob”:”2010-04- 11T22:36:22.436Z”, “legs”:[1,2,3,4])}
  27. 27. 졍규 표현식 리터럴 New RegExp() 생성자 사용 var re = //gm; 정규식 리터럴 사용 Var re = new RegExp(“”, “gm”);
  28. 28. 정규식 문법 g 전역 매칭 m 여러 줄 매칭 i 대소문자 구분없이 매칭 var no_letters = “abc123XYZ”.replace(/[a- z]/gi, “”); console.log(no_letters); //123 매칭을 미리 알 수 없거나 런타임에 문자열이 만들어 질시에는 RegExp()를 사용
  29. 29. 원시 데이터 타입 래퍼(1)var n = 100;console.log(typeof n); //”number”var nobj = new Number(100);console.log(typeof nobj); //”object”var s = “hello”;console.log(s.toUpperCase()); //”HOLLO”“monkey”.slice(4, 6); //”key”(22 /7).toPrecision(3); //”3.14”
  30. 30. 원시 데이터 타입 래퍼(2)var s = new String(“my string”);var n = new Number(101);var b = new Boolean(true);var s = “my string”;var n = 101;var b = true;var greet = “Hello there”;greet split(„ „)[0]; //”Hello”greet smile = true;typeof greet.smile; //”undefined”
  31. 31. 원시 데이터 타입 래퍼(3)typeof Number(1); // “number”typeof Number(“1”); // “number”typeof Number(new Number()); // “number”typeof String(1); //”string”typeof Boolean(1); //”boolean”
  32. 32. 에러 객체 name, message이 기본 프로퍼티이다 그 외에도 임의의 프로퍼티를 가질 수 있다 try { throw { name: “MyErrorType”, message: “oops”, extra: “This was rather embrrassing”, remedy: genericErrorHandler }; } catch (e) { alert(e.message); // “oops” e.remedy(); // genericErrorHandler() 호출 }

×