본문 바로가기

Front/Java Script

 (15)
오브젝트의 가변성(참조형) & Spread Operator ([ ... ], { ... }) 오브젝트의 가변성 변수에 원시형 데이터(primitive type : number, String, boolean, null, undefined)를 할당하게 되면 데이터 자체가 변수에 할당되지만, 오브젝트를 변수에 할당하면 변수에는 오브젝트가 들어있는 메모리의 주소(참조값, reference)가 할당된다. a = 1 b = a b = 5 //결과 a=1, b=5 위의 코드에서 원시형 데이터는 number는 다른 변수에 할당한 후, 데이터를 변경해도 원본 데이터 a에 영향을 미치지 않는다. a = [ 1, 2, 3 ] b = a b.push(4) //결과 a=[1,2,3,4], b=[1,2,3,4] 위의 코드에서 배열오브젝트는 다른 변수에 할당한 후, 데이터를 변경하면 원본 데이터 a에 영향을 미친다는 것을..
상속 (prototype) 기본 상속 (prototype) function Person(name, age){ this.name = name; this.age = age; } function Programmer(name, age, lan){ Person.call(this, name, age); // prototype을 추가해도 변수?들은 상속이 안된다. 기능만 된다. this.lan = lan; } Programmer.prototype = Object.create(Person.prototype); // 새 객체를 생성해서 prototype을 할당한다. // 새 객체를 생성하지 않고, Person.prototype을 그대로 넣으면, 추후 Programmer.prototype에 기능을 추가했을때, Person.prototype에도 같이..
전역객체 / this & this의 제어 전역객체 (window/global) 모든 객체는 전역객체의 프로퍼티 이다. 전역객체의 이름은 호스트 환경에 따라 다를 수 있다. (웹브라우저 : window / node.js : global) function func(){ console.log('hello?'); } func(); window.func(); // 위의 코드와 실행결과가 같음. // 점(.)이 있고, 그 앞에 있는 것은 객체이며, func함수는 window객체 안의 메소드 이다. this 함수의 호출 맥락에 따라서, 상황에 따라서 달라진다. 함수나 메소드에서 this는 그 함수가 속해있는 객체를 가리킨다. 생성자에서의 this var funcThis = null; function Func(){ funcThis = this; } var o..
객체의 생성 ( 생성자 & new ) 객체의 생성 var person = { 'name' : 'bolbbang', 'introduce' : function(){ return `my name is ${this.name}`; } } document.write(person.introduce()); //person.name = 'bolbbang' 으로 객체의 프로퍼티를 넣을 수 있지만, 객체를 정의하는 부분이 분산되므로 위와 같이 사용하는 것이 좋다. new ( 생성자 함수를 이용하여 객체 생성하기 ) function Person(){} // Person이라는 기본 함수 정의 var p0 = Person(); // p0 = undefined var p1 = new Person(); // p1 = {} // 함수에 new를 붙이면 그 return 값..
함수의 호출(call & apply) 함수를 호출하는 방법 1. 함수(파라미터인자) : 가장 기본적인 방법 2. 함수.call(null, 파라미터인자1, 파라미터인자2, ..) : 함수.call()을 생략하여 더 간단하게 호출할 수 있게 한 것이 1번 3. 함수.apply(null, 파라미터인자 배열) : apply의 첫번째 인자를 null로 하고, 두번째 인자를 배열형식으로 한다면 1,2번과 같은 결과가 나온다. apply의 사용 apply(this로 보내고 싶은 객체, 파라미터인자 배열) const obj = { msg : 'hello' } function print(){ console.log(this.msg); } print.apply(obj); // 결과: hello가 출력된다. 이것은 흡사 obj안에 print함수를 넣은 것과 같은..
arguments VS parameter arguments VS parameter arguments : 함수를 호출할 때 함수에 전달된 인자들 (배열과 유사하지만 배열은 아니고, arguments 객체의 인스턴스) parameter : 함수에 정의된 변수. 자바스크립트에서는 함수에 정의된 변수의 개수와 다르게 함수를 호출할 수 있다. function print (a){ // parameter가 1개 console.log(a); } print(1, 2); // 호출할때는 두개의 데이터를 넣을 수 있다. 이 때, 1과 2라는 데이터가 arguments 이다. arguments는 배열처럼 함수로 전달된 인자들의 값을 가지고 있다. arguments[0] : 함수로 전달된 인자들 중 첫번째 값 arguments.length : 함수로 전달된 인자의 개..
클로저(closure) 클로저(closure) 내부함수가 외부함수의 맥락에 접근할 수 있는 것 function outter(){ var title = 'Hello world'; return function (){ alert(title); } } var inner = outter(); inner(); 외부함수가 종료된 이후에도 내부함수에서 외부함수의 지역변수에 접근할 수 있다. 위의 코드에서 outter()가 한번 실행되고, 그 결과로 반환된 함수가 inner에 할당 되었다. outter는 이미 종료되었지만, inner 함수를 호출할 때 마다 outter의 지역변수인 title에 접근이 된다. private variable 정보를 아무나 수정하는 것을 방지하기 위해 사용된다. function factory_movie (titl..
값으로서의 함수(변수, 매개변수, 리턴값, 객체속성, 배열값) & 콜백 함수와 메소드 용어의 차이 1. 함수 : 그냥 정의된 함수 function a(){} 2. 메소드 : 객체 안에 정의된 함수 a = { b : function(){ } } 값으로서의 함수 함수는 값으로서 사용할 수 있기 때문에 아래와 같이 사용 가능하다. - 변수에 할당 - 매개변수 - 리턴값 - 객체의 속성값 - 배열안의 값 * 프로그래밍에서는 변수, 함수의 매개변수, 리턴값 과 같은 용도로 사용될 수 있는 형태의 데이터를 first-class citizen 또는 first-class object 라고 한다. 콜백 다른 함수에 대한 인자로 전달되어 호출되는 함수. 콜백 - 처리의 위임 function sortNumber(a,b){ // 위의 예제와 비교해서 a와 b의 순서를 바꾸면 정렬순서가 반대가 된..

티스토리툴바