복제 : 파일을 복사하는 것과 같은 의미다.
예시
var a=1;
var b=a;
b=2;
cosole.log(a);

 

 

참조 : 심볼릭 링크 혹은 바로가기를 만드는 것과 비슷하다.
예시
var a={'id':1};
var b=a;
b.id=2;
console.log(a.id);

 

 

 

함수와 참조
예시
//
var a=1;
function func(b){
 b=2;
}
func(a);
console.log(a);

 

//
var a={'id':1};
function func(b){
 b={'id':2};
}
func(a);
console.log(a.id);

 

//
var a={'id':1};
function func(b){
 b.id=2;
}
func(a);
console.log(a.id);

 

 

사진 참조 : 생활코딩

'Programming > Javascript' 카테고리의 다른 글

데이터 타입, 래퍼객체  (0) 2018.01.03
표준내장객체, Object 객체  (0) 2018.01.03
상속, prototype  (0) 2018.01.03
전역객체와 this  (0) 2018.01.03
생성자와 new  (0) 2018.01.03
블로그 이미지

꼴통보안인

,

데이터 타입 : 데이터의 형태를 의미하며, 객체와 객체가 아닌것으로 구분한다.

 

원시/기본 데이터 타입 : 객체가 아닌 데이터 타입이다.
  - 숫자
  - 문자열
  - boolean(true/false)
  - null
  - undefined

 

래퍼객체 : 원시 데이터형을 객체처럼 다룰수 있도록 하기 위한 객체다.
  - Number
  - String
  - Boolean

'Programming > Javascript' 카테고리의 다른 글

복제, 참조, 함수  (0) 2018.01.03
표준내장객체, Object 객체  (0) 2018.01.03
상속, prototype  (0) 2018.01.03
전역객체와 this  (0) 2018.01.03
생성자와 new  (0) 2018.01.03
블로그 이미지

꼴통보안인

,

표준 내장객체(Standard Built-in Object) : 자바스크립트가 기본적으로 가지고 있는 객체들이다. 프로그래밍을 하는데 기본적으로 필요한 도구들이기 때문에 중요하다.
  - Object
  - Function
  - Array
  - String
  - Boolean
  - Number
  - Math
  - Date
  - RegExp

예제
//
var arr = new Array('seoul','daejeon','daegu','pusan', 'gwangju');
function getRandomValueFromArray(arr){
    var index = Math.floor(arr.length*Math.random());
    return arr[index];
}
console.log(getRandomValueFromArray(arr));

 

//
Array.prototype.random = function(){
    var index = Math.floor(this.length*Math.random());
    return this[index];
}
var arr = new Array('seoul','daejeon','daegu','pusan', 'gwangju');
console.log(arr.random());

 

Object 객체 : 객체의 가장 기본적인 형태를 가지고 있는 객체다. 아무것도 상속받지 않는 순수한 객체이며. 값을 저장하는 기본적인 단위로 사용한다.
예시
<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>
<script type="text/javascript">

//Object.keys()
var arr=["a","b","c"];
console.log('Object.keys(arr)',Object.keys(arr));

//Object.prototype.toString()
var o = new Object();
console.log('o.toString()', o.toString());

var a = new Array(1,2,3);
console.log(a.toString()', a.toString());
</script>
</body>
</html>

 

//
Object.prototype.contain = function(neddle) {
    for(var name in this){
        if(this[name] === neddle){
            return true;
        }
    }
    return false;
}
var o = {'name':'egoing', 'city':'seoul'}
console.log(o.contain('egoing'));
var a = ['egoing','leezche','grapittie'];
console.log(a.contain('leezche'));

 

'Programming > Javascript' 카테고리의 다른 글

복제, 참조, 함수  (0) 2018.01.03
데이터 타입, 래퍼객체  (0) 2018.01.03
상속, prototype  (0) 2018.01.03
전역객체와 this  (0) 2018.01.03
생성자와 new  (0) 2018.01.03
블로그 이미지

꼴통보안인

,

상속 : 객체의 로직을 그대로 물려받는 또 다른 객체를 만들 수 있는 기능을 의미한다. 기존의 로직을 수정하고 변경해서 파생된 새로운 객체를 만들 수 있게 해준다.
예시
//
function Person(name) {
 this.name=name;
 this.introduce=function (){
  return 'My name is '+this.name;
 }
}
var p1 = new Person('gildong');
document.write(p1.indroduce()+"<br />");

 

//
function Person(name) {
 this.name=name;
}
Person.prototype.name=null;
Person.prototype.introduce=function (){
 return 'My name is '+this.name;
}
var p1 = new Person('gildong');
document.write(p1.introduce()+"<br />");

 

//
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();
var p1=new Programmer('gildong');
document.write(p1.introduce()+"<br />");

 

//
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();
Programmer.prototype.coding = function(){
    return "hello world";
}
 
var p1 = new Programmer('egoing');

document.write(p1.introduce()+"<br />");
document.write(p1.coding()+"<br />");

 

prototype : 객체의 원형이다. prototype에 저장된 속성들은 생성자를 통해서 객체가 만들어질 때 그 객체에 연결된다. 객체와 객체를 연결하는 체인의 역할을 한다. 이러한 관계를 prototype chain이라 한다.
예제
//
function Ultra(){}
Ultra.prototype.ultraProp = true;
 
function Super(){}
Super.prototype = new Ultra();
 
function Sub(){}
Sub.prototype = new Super();
 
var o = new Sub();
console.log(o.ultraProp);

 

'Programming > Javascript' 카테고리의 다른 글

데이터 타입, 래퍼객체  (0) 2018.01.03
표준내장객체, Object 객체  (0) 2018.01.03
전역객체와 this  (0) 2018.01.03
생성자와 new  (0) 2018.01.03
함수의 호출  (0) 2018.01.03
블로그 이미지

꼴통보안인

,

전역객체 : 특수한 객체다. 모든 객체는 이 전역객체의 프로퍼티다. 모든 전역함수와 변수는 window 객체의 프로퍼티다. 객체를 명시하지 않으면 암시적으로 window의 프로퍼티로 간주된다.
예시
//
function func(){
 alert('hello?');
}
func();
window.func();

 

//
var o = {'func':function (){
 alert('hello?');
}}
o.func();
window.o.runc();

 

this : 함수 내에서 함수 호출 맥락을 의미한다. 함수와 객체의 관계를 연결시켜주는 실질적인 연결점 역할을 한다. 생성자가 실행되기 전까지는 객체는 변수에도 할당될 수 없기 때문에, this가 아니면 어떠한 작업도 할 수 없다. 함수의 메소드인 apply, call을 이용하면 this의 값을 제어 할 수 있다.
예시
//
function func(){
 if(window === this){
  document.write("window === this");
 }
}
func();

 

//
var o = {
 func : function (){
  if(o === this){
   document.write("o === this");
  }
 }
}
o.func();

 

//
var funcThis = null;
 
function Func(){
    funcThis = this;
}
var o1 = Func();
if(funcThis === window){
    document.write('window <br />');
}
 
var o2 = new Func();
if(funcThis === o2){
    document.write('o2 <br />');

}

 

//
var o = {}
var p = {}
function func(){
    switch(this){
        case o:
            document.write('o<br />');
            break;
        case p:
            document.write('p<br />');
            break;
        case window:
            document.write('window<br />');
            break;         
    }
}
func();
func.apply(o);
func.apply(p);

'Programming > Javascript' 카테고리의 다른 글

표준내장객체, Object 객체  (0) 2018.01.03
상속, prototype  (0) 2018.01.03
생성자와 new  (0) 2018.01.03
함수의 호출  (0) 2018.01.03
arguments, 매개변수의 수  (0) 2018.01.03
블로그 이미지

꼴통보안인

,

생성자 : 객체를 만드는 역할을 하는 함수. 객체의 구조를 재활용 할때 사용하는 것이다. 자바스크립트에서 함수는 객체를 만드는 창조자이다. 그리고 함수를 호출할 때 new를 붙이면 새로운 객체를 만든 후에 이를 리턴한다. 생성자 함수는 일반 함수와 구분하기 위해서 첫글자를 대문자로 표시한다.


예시
//
function Person(){}
var p = new Person();
p.name = 'egoing';
p.introduce = function(){
    return 'My name is '+this.name;
}
document.write(p.introduce());

 

//
function Person(){}
var p1 = new Person();
p1.name = 'egoing';
p1.introduce = function(){
    return 'My name is '+this.name;
}
document.write(p1.introduce()+"<br />");
 
var p2 = new Person();
p2.name = 'leezche';
p2.introduce = function(){
    return 'My name is '+this.name;
}
document.write(p2.introduce());

 

//
function Person(name){
    this.name = name;
    this.introduce = function(){
        return 'My name is '+this.name;
    }  
}
var p1 = new Person('egoing');
document.write(p1.introduce()+"<br />");
 
var p2 = new Person('leezche');
document.write(p2.introduce());

'Programming > Javascript' 카테고리의 다른 글

상속, prototype  (0) 2018.01.03
전역객체와 this  (0) 2018.01.03
함수의 호출  (0) 2018.01.03
arguments, 매개변수의 수  (0) 2018.01.03
내부함수와 클로저  (0) 2018.01.03
블로그 이미지

꼴통보안인

,

함수 호출
기본방법 예제
function func(){
}
func();

 

apply 예제
function sum(arg1, arg2){
 return arg1+arg2;
}
alert(sum.apply(null,[1,2]));

 

sum은 Function 객체의 인스턴스다. 그렇기 때문에 객체 function의 메소드 apply를 호출할 수 있다. apply 메소드는 두개의 인자를 가질 수 있는데, 첫번째 인자는 함수가 실행될 맥락이다.

 

//
o1 = {val1:1, val2:2, val3:3}
o2 = {v1:10, v2:50, v3:100, v4:25}
function sum(){
    var _sum = 0;
    for(name in this){
        _sum += this[name];
    }
    return _sum;
}
alert(sum.apply(o1)) // 6
alert(sum.apply(o2)) // 185

 

우선 두개의 객체를 만들었다. o1는 3개의 속성을 가지고 있다. 각각의 이름은 val1, val2, val3이다. o2는 4개의 속성을 가지고 있고 o1과는 다른 속성 이름을 가지고 있고 속성의 수도 다르다.

그 다음엔 함수 sum을 만들었다. 이 함수는 객체의 속성을 열거할 때 사용하는 for in 문을 이용해서 객체 자신(this)의 값을 열거한 후에 각 속성의 값을 지역변수 _sum에 저장한 후에 이를 리턴하고 있다.

객체 Function의 메소드 apply의 첫번째 인자는 함수가 실행될 맥락이다. 이렇게 생각하자. sum.apply(o1)은 함수 sum을 객체 o1의 메소드로 만들고 sum을 호출한 후에 sum을 삭제한다.

 

//
function sum(){
    var _sum = 0;
    for(name in this){
  if(typeof this[name] !== 'function')
          _sum += this[name];
    }
    return _sum;
}
o1 = {val1:1, val2:2, val3:3, sum:sum}
o2 = {v1:10, v2:50, v3:100, v4:25, sum:sum}
alert(sum.apply(o1)) // 6
alert(sum.apply(o2)) // 185

'Programming > Javascript' 카테고리의 다른 글

전역객체와 this  (0) 2018.01.03
생성자와 new  (0) 2018.01.03
arguments, 매개변수의 수  (0) 2018.01.03
내부함수와 클로저  (0) 2018.01.03
값으로써의 함수와 콜백, 그리고 비동기 처리  (0) 2018.01.03
블로그 이미지

꼴통보안인

,

arguments : 함수에 있는 유사 배열이다.
예제
function sum(){
    var i, _sum = 0;   
    for(i = 0; i < arguments.length; i++){
        document.write(i+' : '+arguments[i]+'<br />');
        _sum += arguments[i];
    }  
    return _sum;
}
document.write('result : ' + sum(1,2,3,4));

 

함수 sum은 인자로 전달된 값을 모두 더해서 리턴하는 함수다. 그런데 1행처럼 함수 sum은 인자에 대한 정의하가 없다. 하지만 마지막 라인에서는 4개의 인자를 함수 sum으로 전달하고 있다. 함수의 정의부분에서 인자에 대한 구현이 없음에도 인자를 전달 할 수 있는 것은 왜 그럴까? 그것은 arguments라는 특수한 배열이 있기 때문이다.

arguments는 함수안에서 사용할 수 있도록 그 이름이나 특성이 약속되어 있는 일종의 배열이다. arguments[0]은 함수로 전달된 첫번째 인자를 알아낼 수 있다. 또 arguments.length를 이용해서 함수로 전달된 인자의 개수를 알아낼 수도 있다. 이러한 특성에 반복문을 결합하면 함수로 전달된 인자의 값을 순차적으로 가져올 수 있다. 그 값을 더해서 리턴하면 인자로 전달된 값에 대한 총합을 구하는 함수를 만들 수 있다.

 

매개변수의 수 : 함수.length와 arguments.length 두가지 수가 존재한다. 함수.length는 함수로 전달된 실제 인자의 수를 의미하고, arguments.length는 함수에 정의된 인자의 수를 의미한다.


예제
function zero(){
    console.log(
        'zero.length', zero.length,
        'arguments', arguments.length
    );
}
function one(arg1){
    console.log(
        'one.length', one.length,
        'arguments', arguments.length
    );
}
function two(arg1, arg2){
    console.log(
        'two.length', two.length,
        'arguments', arguments.length
    );
}
zero(); // zero.length 0 arguments 0
one('val1', 'val2');  // one.length 1 arguments 2
two('val1');  // two.length 2 arguments 1

'Programming > Javascript' 카테고리의 다른 글

생성자와 new  (0) 2018.01.03
함수의 호출  (0) 2018.01.03
내부함수와 클로저  (0) 2018.01.03
값으로써의 함수와 콜백, 그리고 비동기 처리  (0) 2018.01.03
유효범위  (0) 2018.01.02
블로그 이미지

꼴통보안인

,

내부함수 : 자바스크립트는 함수 안에 또 다른 함수를 선언할 수 있다. 내부함수는 외부함수의 지역변수에 접근할 수 있다. 동일한 외부함수 안에서 만들어진 내부함수나 메소드는 외부함수의 지역변수를 공유한다.
예제
//
function outter(){
 function inner(){
  var title='coding everybody';
  alert(title);
 }
 inner();
}
outter();

 

//
function outter(){
 var title='coding everybody';
 function inner(){
  alert(title);
 }
 inner();
}
outter();

 

클로저 :내부함수가 외부함수의 지역변수에 접근할 수 있고, 외부함수는 지역변수를 사용하는 내부함수가 소멸될 때까지 소멸되지 않는 특성을 의미한다. 내부함수가 외부함수의 맥락(context)에 접근할 수 있는 것이다. 외부함수의 실행이 끝나서 외부함수가 소멸된 후에도 내부함수가 외부함수의 변수에 접근할 수 있다. 또한 객체의 메소드에서 사용할 수 있다.
예제
//
function outter(){
 var title='coding everybody';
 return function() {
  alert(title);
 }
}
inner=outter();
inner();

 

//
function factory_movie(title){
    return {
        get_title : function (){
            return title;
        },
        set_title : function(_title){
            title = _title
        }
    }
}
ghost = factory_movie('Ghost in the shell');
matrix = factory_movie('Matrix');
 
alert(ghost.get_title());
alert(matrix.get_title());
 
ghost.set_title('공각기동대');
 
alert(ghost.get_title());
alert(matrix.get_title());

 

클로저 응용
// 에러코드
var arr = []
for(var i = 0; i < 5; i++){
    arr[i] = function(){
        return i;
    }
}
for(var index in arr) {
    console.log(arr[index]());
}

 

함수가 함수 외부의 컨텍스트에 접근할 수 있을것 같지만 결과는 아래와 같이 나온다.

 

 

위 코드는 아래와 같이 정상 코드로 변경해야 한다.

 

// 정상코드
var arr = []
for(var i = 0; i < 5; i++){
    arr[i] = function(id) {
        return function(){
            return id;
        }
    }(i);
}
for(var index in arr) {
    console.log(arr[index]());
}

 

'Programming > Javascript' 카테고리의 다른 글

함수의 호출  (0) 2018.01.03
arguments, 매개변수의 수  (0) 2018.01.03
값으로써의 함수와 콜백, 그리고 비동기 처리  (0) 2018.01.03
유효범위  (0) 2018.01.02
모듈, 라이브러리  (0) 2018.01.02
블로그 이미지

꼴통보안인

,

값으로의 함수 : 자바스크립트에서는 함수도 객체, 일종의 값이다.
예제
//
function a(){}

 

위 예제에서 함수 a는 변수 a에 담겨진 값이다. 또한 함수는 객체의 값으로 포함될 수 잇다. 이렇게 객체의 속성 값으로 담겨진 함수를 메소드라 부른다.

 

//
a = {
 b:function(){
 }
};

 

함수는 값이기 때문에 다른 함수의 인자로 전달될 수도 있다.

 

//
function cal(func,num){
 return func(num)
}

function increase(num){
 return num+1
}

function decrease(num){
 return num-1
}

alert(cal(increase, 1));
alert(cal(decrease, 1));

 

아래 예제를 통해 함수는 함수의 리턴값으로도 사용 가능한 것을 알 수 있다.


예제
function cal(mode){
 var funcs={
  'plus' : function(left,right){return left+right},
  'minus' : function(left,right){return left-right}
 }
 return funcs[mode];
}

alert(cal('plus')(2,1));
alert(cal('minus'))2,1));

 

아래 예제를 통해 함수는 배열값으로도 사용 가능한 것을 알 수 있다.

예제
var process = [
 function(input){return input+10;},
 function(input){return input*input;},
 function(input){return input/2;}
];

var input=1;

for(var i=0;i<process.length;i++){
 input = process[i](input);
}

alert(input);

 

콜백 : 함수가 수신하는 인자가 함수인 경우. 콜백은 비동기 처리에서도 유용하게 사용된다.


예제
// 문자로 정렬
var numbers = [20, 10, 9,8,7,6,5,4,3,2,1];
alert(numbers.sort(sortNumber)); // [1,10,2,20,3,4,5,6,7,8,9]

 

// 배열 정렬
function sortNumber(a,b){
    // 위의 예제와 비교해서 a와 b의 순서를 바꾸면 정렬순서가 반대가 된다.
    return b-a;
}
var numbers = [20, 10, 9,8,7,6,5,4,3,2,1];
alert(numbers.sort(sortNumber)); // array, [20,10,9,8,7,6,5,4,3,2,1]

 

비동기 처리

예제
//datasource.json.js
{"title":"JavaScript","author":"egoing"}

//demo1.html
<!DOCTYPE html>
<html>
<head>
<script src="jquery-3.2.1.min"></script>
</head>
<body>
<script type="text/javascript">
    $.get('http://localhost/javascript/datasource.json.js', function(result){
        console.log(result);
    }, 'json');
</script>
</body>
</html>

 

'Programming > Javascript' 카테고리의 다른 글

arguments, 매개변수의 수  (0) 2018.01.03
내부함수와 클로저  (0) 2018.01.03
유효범위  (0) 2018.01.02
모듈, 라이브러리  (0) 2018.01.02
객체  (0) 2018.01.02
블로그 이미지

꼴통보안인

,