Javascript/기초공부 (23) 썸네일형 리스트형 [Javascript: 참조] 복제 / 참조 / 함수와 참조 복제 var a = 1; var b = a; // 복제된 값이 b에 담긴다. b = 2; console.log(a); // 1 원시 데이터 타입은 이렇게 동작한다. 참조 var a = {'id':1}; var b = a; // 기존에 있는 {'id':1} 객체를 b도 참조하게 된다. b.id = 2; // 그래서 참조하고 있는 값을 변경하면 이를 참조하는 애도 영향을 받게되는 것 console.log(a.id); // 2 var a = {'id':1}; var b = a; b = {'id':2}; // 새로운 객체 console.log(a.id); // 1 객체는 이와 같이 동작한다. 함수와 참조 var a = 1; function func(b) { b = 2; } func(a); // b=a; b=2;.. [Javascript: 데이터 타입] 원시 데이터 타입 / 래퍼 객체(Wrapper object) 원시 데이터 타입(Primitive type) 객체가 아닌 데이터 타입 숫자 문자열 불리언(true/false) null undefined 래퍼 객체(Wrapper Object) var str = 'coding'; console.log(str.length); // 6 console.log(str.charAt(0)); // "c" 문자열은 property와 method가 있다. 즉, 객체이다. 그러나 문자열은 객체가 아니다. 왜냐하면 자바스크립트는 내부적으로 문자열을 제어하기 위해 예를들어 위의 코드의 1행과 2행 사이에 str = new String('coding'); 과 같은 코드로 객체를 만들고 사용이 끝나면 제거하기 때문이다. var str = 'coding'; str.prop = 'everybod.. [Javascript: Object] Object API / Object 확장 / Object 확장의 위험 Object API https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object Object The Object class represents one of JavaScript's data types. It is used to store various keyed collections and more complex entities. Objects can be created using the Object() constructor or the object initializer / literal syntax. developer.mozilla.org // Object.메소드와 Object.prototype.메소드의 차이.. [Javascript: 표준 내장 객체] 표준 내장 객체란? / 배열의 확장 표준 내장 객체(Standard Built-in Object)란? Object Function Array String Boolean Number Math Date RegExp 배열의 확장 // 랜덤하게 배열의 값을 가져오는 예제 var arr = new Array('seoul','new york','ladarkh','pusan', 'Tsukuba'); function getRandomValueFromArray(arr) { var index = Math.floor(Math.random()*arr.length); // 0 ~ arr.length 사이의 수 return arr[index]; } console.log(getRandomValueFromArray(arr)); // 모든 배열이 공통적으로 해당 메소드.. [Javascript: 상속(Inheritance)] 상속의 사용법 / prototype 상속이란 객체의 로직을 물려받은 또 다른 객체를 만들 수 있는 기능을 의미하며 코드의 재활용성을 높인다. 또한 기존의 로직을 수정하여 새로운 파생된 객체를 만들 수 있게 한다. 상속의 사용법 function Person(name) { this.name = name; } Person.prototype.name = null; Person.prototype.introduce = function() { return 'My name is '+this.name; } function Programmer(name) { this.name = name; } Programmer.prototype = new Person(); // 상속 Person.prototype.coding = function() { // 새로운 기능 추.. [Javascript: this] 전역객체 / 함수, 메소드, 생성자와 this / apply와 call / apply와 this 전역객체 자바스크립트에서 모든 객체는 전역객체의 property이다. function func() { alert('Hello'); } // 둘다 같은 결과 func(); window.func(); 모든 전역변수와 함수는 window 객체의 property이다. * nodejs의 전역객체는 global이다. this 함수 내에서 함수 호출 맥락(context)를 의미한다. 함수 호출 function func() { if(window === this) alert("window === this"); } func(); // window === this 함수에서 this는 전역객체인 window이다. 메소드 호출 var o = { func: function() { if(o === this) alert('o ===.. [Javascript: 생성자와 new] 객체 생성 객체 자바스크립트는 함수형 언어이며 prototype-based language이다. var person = {} person.name = 'jisun'; // property(속성) person.introduce = function() { // method(메소드) return 'My name is '+this.name; } document.write(person.introduce()); 객체를 정의할 때 값을 한번에 셋팅하도록 바꿔보자. var person = { 'name': 'jisun', 'introduce': function() { return 'My name is '+this.name; } } 그런데 만약 여러 사람의 정보를 담으려면 이렇게 중복이 발생한다. var person1 = { 'n.. [Javascript: 객체 지향 프로그래밍(OOP)] 추상화 / 부품화 / 은닉화 / 캡슐화 / 인터페이스 객체 지향 프로그래밍 로직을 상태(state)와 행위(behave)로 이루어진 객체로 만드는 것이다. 즉, 부품을 조립해서 하나의 완성된 프로그램을 만드는 일이다. 추상화 해결해야 하는 문제를 소프트웨어적으로 단순화해서 만드는 행위. 복잡한 현실을 추상화하는 과정 예) 지하철 노선도 부품화 로직을 기능별로 그룹화하고 재활용 가능하도록 부품화하는 것이 필요하다. 적절함이 중요하다. 예) 메소드 은닉화, 캡슐화 객체 내부의 동작 방법을 껍질 속에 숨기고, 사용자에게 그 부품의 사용법만을 노출하는 것. 인터페이스 부품과 부품간의 연결점. 즉, 호환, 교환을 용이하게 하기도 하고 이질적인 것과의 결합은 방지하는 역할도 한다. 이전 1 2 3 다음