Javascript Function

한 번 정의하면 몇번이든 실행할 수 있고 호출할 수있는 자바스크립트 코드 블럭

        function printprops(o) {
            for(var p in o) {
                console.log(p + " : " + o[p] + "\n");
            }
        }
        var arr = [1,2,3,4,5];
        printprops(arr);

Output :

함수 이름은 옵션

함수 정의 표현식에서 함수 이름은 옵션이다.
한 번 사용되고 마는 함수에서 특히 유용.

        var ten = (function(x) {return 10});
        console.log(ten);
        console.log(ten(100));

Output :

함수 선언문은 hoisted 된다.

어디에 함수 선언문이 있든 맨 위로 끌어올려(hoisted) 진다.
하지만 표현식으로 정의된 함수는 변수에 할당되기 전 까지는 참조할 수 없다.

리턴 값이 없는 함수를 procedure라고도 함.

중첩 함수

        function hypotenuse(a, b) {
            function square(x) {return x * x};
            return Math.sqrt(square(a). square(b));
        }

문장으로 선언되는 함수는

함수 내에 함수 중첩가능
but 반복문 내부, 조건문, try / catch / finally 또는 with문 안에 들어갈 수 없다.

표현식은

코드 어디든 위치 가능

함수 호출

  1. 일반적인 함수형태
  2. 메서드 형태
  3. 생성자
  4. call() 과 apply() 메서드를 통한 간접 호출

일반적인 함수 형태

호출 표현식

  • 함수 객체로 평가되는 함수 표현식
  • 여는 괄호
  • 콤마로 구분된 0개 이상의 전달인자 표현식
  • 닫는 괄호

함수 내의 this

  • 일반적인 함수 형태로 사용하려 했으면 this 쓰지 않음
  • strict mode 가 적용되었는지 판단 여부를 위해 사용 가능
    • 엄격모드 X -> global 객체
    • 엄격모드 O -> undefined
var strict = (function() {return !this;}());

메서드 호출

대부분 . 을 사용
[] 도 사용가능

        var calculator = {
            operand1: 1,
            operand2: 1,
            add: function() {
                this.result = this.operand1 + this.operand2;
            }
        }
        calculator.add();
        console.log(calculator.result);
        calculator["add"]();
        console.log(calculator.result);

Output :

메서드 사용 -> 해당 객체에 무언가를 한다는 사실을 나타내는 세련된 방법.

+a : this 키워드의 scope

        var o = {
            m: function() {
                var self = this;
                console.log(this === o); // true
                f();
                function f() {
                    console.log(this === o); // false
                    console.log(self === o);
                }
            }
        }
        o["m"]();

Output :

생성자 호출

new keyword -> 생성자 호출

인자가 없으면 두 문장은 완전히 같은 것.

        var o = new Object();
        var o = new Object;

생성자 함수는 보통 return 사용하지 않음.
함수의 마지막에서 객체를 반환, 혹은 return만 명시 되어있으면 거기서 객체 반환
기본 자료형 값(primitive value)을 반환하면 무시되고 새로생성된 객체가 호출 표현식 값.

간접 호출

call() -> 자신에게 주어진 전달인자를 호출할 함수의 전달인자로 사용
apply() -> 값 배열을 전달인자로 사용.

두 메서드 모두 호출 때 this 값을 명시적으로 지정 가능. -> 어떤 함수든지 특정 객체의 메서드로 호출할 수 있다는 의미

함수 전달인자와 매개변수

Javascript는 함수 매개변수타입, 전달인자 개수, 전달하는 인자의 타입 모두 검사하지 않음.
이를 프로그래머가 관리하는 방법들.

생략 가능한 매개변수

본래 정의된 것 보다 적으면 -> 나머지는 undefined
이렇게 두지 말고 생략된 매개변수에는 기본값을 주는 코드를 쓰자.

        function getPropertyNames(o, /*optional*/ a) {
            if(a == undefined) a = [];
            //or a = a || []
            // || -> 첫번째가 true나 true로 반환되는 값이면 그 값 return, 그렇지 않으면 뒤에 것 return
            for(var property in o) {
                a.push(property);
            }
            return a;
        }

가변길이 전달인자 목록 : Arguments객체

본래 정의된 것 보다 많을 때.

        function f(x, y, z) {
            if(arguments.length != 3) {
                throw new Error("인자개수가 3이 아닙니다.")
            }
        }

이렇게 해도 좋지만 javascript의 기본동작인

  • 빠진 인자는 undefined
  • 추가된 인자는 무시
    로도 잘 동작하게 구현 가능.

argument 객체를 직접 수정시

        function g(x) {
            console.log(x);
            arguments[0] = null;
            console.log(x);
        }

엄격모드가 아니면 값 변경, 엄격모드 시 값 변경되지 않음.

callee와 caller 속성

엄격모드에서는 사용 못함.
callee -> 프로퍼티가 현재 실행되고 있는 함수를 참조, 이름없는 함수를 재귀적으로 호출하는데 유용
caller -> 비표준. 이 함수를 호출한 함수를 참조. 호출 스택에 접근할 수 있도록 해줌.

객체의 프로퍼티를 전달인자로 사용하기

easycopy({from : a, to : b, length : 4});

값으로서의 함수

        function square(x) {return x * x};
        var s = square;
        square(4);
        s(4);

        var o = {square: function(x) {return x * x}};
        var y = o.square(16);

        var a = [function(x) {return x*x; }, 20];
        a[0](a[1]);

자신만의 함수 프로퍼티 정의하기

C 에서의 static 지역변수 역할

uniqueInteger.counter = 0;
function uniqueInteger() {
    return uniqueInteger.counter++;
}

함수 이름을 배열처럼 다룸

        function factorial(n) {
            if(isFinite(n) && n>0 && n == Math.round(n)) {
                if(!(n in factorial)) {
                    factorial[n] = n * factorial(n - 1);
                }
                return factorial[n];
            }
            else return NaN;
        }
        factorial[1] = 1;

네임스페이스로서의 함수

javascript 는 단위 block 내에 유효한 변수를 정의하는 방법을 제공하지 않음.
간단한 임시 네임스페이스 처럼 작동하는 함수를 정의하는 기법 사용.

        function mymodule() {
            // 모듈의 지역변수로 사용해서 전역을 어지럽히지 않음
        }
        mymodule(); // 함수 실행 필수

        // 하나의 프로퍼티 선언도 과하다면
        (function() {
            // 모듈 코드가 위치
        }()) // 바로 호출하고 끝냄. function앞 뒤 괄호는 반드시 필요 -> 표현식임을 알림

클로저

함수 객체, 함수의 변수가 해석되는 유효범위(변수 바인딩의 집합) 을 아울러 클로저라고 함
모든 자바스크립트 함수는 클로저.
-> 함수는 객체이고 함수 자신과 관련된 유효범위 체인을 가지고 있기 때문.

클로저는 자신을 정의한 바깥쪽 함수에 바인딩된 지역변수를 포착한다.

        var scope = "global";
        function checkscope() {
            var scope = "local";
            function f() {return scope;};
            return f;
        }
        checkscope()() // local 출력

EX) Counter

내부변수는 private. 오직 count와 reset을 통해서만 제어가능

        function counter() {
            var n = 0;
            return {
                count: function() {return n++;}, 
                reset: function() { n = 0; }
            }
        }

        var c = counter(), d = counter();
        console.log("c : ", c.count());
        console.log("d : ",d.count());
        c.reset()
        console.log("c : ",c.count());
        console.log("d : ",d.count());

Output:

Function 생성자

  • 동적으로 자바스크립트 함수를 생성하고 실행 시간에 컴파일 되는 것을 가능하게 한다.
  • 이걸로 생성하는 함수는 언제나 최상위 레벨 함수로, lexical scoping을 사용하지 않는다.

     

    var f = new function("x", "y", "return x*y);
    // 마지막 인자는 함수의 몸체 텍스트

 

'웹 프로그래밍 > Javascript' 카테고리의 다른 글

Javascript Scope, 변수  (0) 2020.06.23
Javascript Array  (0) 2020.06.23
JavaScript Property  (0) 2020.06.21
JavaScript Object 생성  (0) 2020.06.19
Javascript 세미콜론  (0) 2020.05.30

Javascript null과 undefined

null -> 아무 값도 갖고 있지 않다는 뜻. 일반적으로 예상 가능한 상황에서 값의 부재를 표현
undefined -> 보다 더 시스템적인 관점. 예기치 못한 상황에 발생한 오류성 값 / 부재를 나타내기 위함.

null == undefined;  // true
null === undefined; // false

null 과 undefined에 . 연산자나 [] 연산자를 사용하지 않도록 예외처리 해야.
Typeerror 발생

Function 유효범위

C의 block scope와 달리 javascript는 함수 유효범위를 갖는다.

function test(o) {
    var i = 0;
    if (typeof o == "object") {
        var j = 0;
        for(var k=0; k < 10; ++k) {
            console.log(k);
        }
        console.log(k);
    }
    console.log(j);
}

i, j, k 의 유효범위는 모두 같다.

var scope = "global";
function f() {
    console.log(scope); // undefined 출력
    var scope = "local";
    console.log(scope); // local 출력
}

Property로서의 변수

var 사용하면 unconfigurable한 프로퍼티
없으면 configurable

var truevar = 1;  // 삭제불가능 전역변수
fakevar = 2;      // 삭제가능 전역변수
this.fakevar = 3; // 삭제가능 전역변수
delete truevar       // false-> 삭제불가능
delete fakevar
delete this.fakevar2

'웹 프로그래밍 > Javascript' 카테고리의 다른 글

Javascript Function  (0) 2020.06.24
Javascript Array  (0) 2020.06.23
JavaScript Property  (0) 2020.06.21
JavaScript Object 생성  (0) 2020.06.19
Javascript 세미콜론  (0) 2020.05.30

JavaScript Array

Javascript의 배열

  • 정렬된 값의 집합
  • 타입이 고정되어 있지 않음
  • 배열이 밀집도가 높지 않음
    • 원소의 index가 연속적이지 않아도 됨
    • 원소 사이에 빈자리가 있어도 됨
  • Array.prototype의 프로퍼티를 상속받음.

배열 생성

  1. 배열 리터럴
  2. Array 생성자

배열 리터럴

        var empty = [];
        var primes = [2,3,5,7,11];
        var misc = [ 1.1, true, "a" ];

          // 임의의 표현식도 사용 가능 
        var base = 1024;
        var table = [base, base+1, base+2, base+3]; 

          var count = [1,,3]; // 가운데 값은 undefined
          var undefs = [,,];  // 원소는 2개 (마지막원소에 , 가능)

Array 생성자

        var a = new Array();
        var aa = new Array(10); // length
        var aaa = new Array(5,4,3,2,1, "testing, testing"); // 인자값이 배열의 원소
        console.log(aaa)

Output :

다양한 Index

        // 다양한 인덱스
        a[-1.23] = true;
        a["1000"] = 0;
        a[1.000] = 7;
        console.log(a)

Output :

희소배열

배열에 속한 원소의 위치가 연속적이지 않은 배열
원소가 undefined가 아니라 아예 없는 것

        arr = new Array(5); // 원소는 없지만 a.length의 값은 5
        arr2 = []           // length값이 0인 빈 배열
        arr3[1000] = 1;     // 하나의 원소 할당, 길이는 1000

배열의 길이

배열의 length Property : 배열의 원소 개수, 배열의 가장 큰 인덱스+1

length 값 변경 :

a = [1,2,3,4,5];
a.length = 3; // 결과가 1,2,3이 된다.
a.length = 0; // 결과 []
a.length = 5; // new Array(5)와 같은 결과

length Property 읽기전용으로 만들기 :

a = [1,2,3];
Object.defineProperty(a, "length", {writeable: false});
a.length = 0; // 값 바꿔도 배열은 변하지 않음

배열 원소 추가 제거

        a = [];
        a[0] = "zero";
        a.push("one");
        a.push("two", "three");
        console.log(a.length);
        delete a[1];
        console.log(1 in a); // false -> 지워졌다.
        console.log(a.length);

Output :

배열 순회하기

        var o = new Array(7,5,3,2);
        var keys = Object.keys(o);
        var values = [];
        for(var i = 0; i < keys.length; i++) {
            var key = keys[i];
            values[i] = o[key];
        }
        console.log(o);
        console.log(keys);
        console.log(values);

          for(var i = 0, len = keys.length; i < len; ++i) {
            // 성능향상 위해 length를 한번만 불러오기
        }

Output :

루프 돌릴 때 고려해야 할 점

  • 원소가 null / undefined 일 때 어떻게 처리할 지
  • 상속받은 Property 등의 고유 Property 가 아닌 값들을 어떻게 처리할 지

for in loop에서 원소 반환 순서

  • 정해져있지 않음.
  • 순서가 중요한 알고리즘에서는 for문을 통해 명시적으로 사용할 것을 권장

다차원 배열

        var table = new Array(10);
        for(var i = 0; i < table.length; ++i) {
            table[i] = new Array(10);
        }

        for(var i = 0; i < table.length; ++i) {
            for(var j = 0; j < table[i].length; ++j) {
                table[i][j] = i*j;
            }
        }
        console.log(table[5][7]);

Output :

배열 메서드

join()

* 배열의 모든 원소를 문자열로 변환, 변환한 문자를 이어붙인 결과를 return
* seperator를 지정하지않으면 , 가 기본 separator
* String.split() -> join의 반대. 문자열을 배열로
        var a = [1, 2, 3];
        console.log(a.join());
        console.log(a.join(' '));
        console.log(a.join(''));

Output :

reverse()

  • 배열의 원소 순서를 반대로 뒤집어 반환.
  • 배열안에서 직접 수행되어 배열 정렬순서 변환됨.
        var b = [1,2,3];
        b.reverse();
        console.log(b);

Output :

sort()

  • 정렬
  • undefined는 배열의 끝부분으로
  • 정렬 조건도 바꿀 수 있음
        var c = [1,2,3,4];
        c.sort();
        console.log(c);
        c.sort(function(a,b) {
            return b - a;
        })
        console.log(c);

Output :

concat()

  • concat의 전달인자를 추가한 배열 반환
        var d = [1,2,3];
        console.log(d.concat(4,5));
        console.log(d.concat([4,5]));
        console.log(d.concat([4,5], [6,7]));
        console.log(d.concat([4, [5,6]]));

Output :

slice()

  • subarray 반환
    • -1은 마지막 원소
    • 음수는 뒤에서부터 세는 것
        var e = [1,2,3,4,5];
        console.log(e.slice(0,3));
        console.log(e.slice(3));
        console.log(e.slice(1,-1));
        console.log(e.slice(-3,-2));

Output :

splice()

  • 잘라낸 후 값 return, 실제 배열 도 수정된다.
  • 값을 추가할 때도 사용 가능
  • 첫 두 인자 -> 삭제할 원소 지정 (a, b) -> a부터 시작해서 b개 삭제
  • 세번째 인자부터 추가할 값

push(), pop(), unshift(), shift()

  • push(), pop() -> 맨 뒤에서 원소 추가제거
  • unshift(), shift() -> 맨 앞에서 원소 추가 제거

'웹 프로그래밍 > Javascript' 카테고리의 다른 글

Javascript Function  (0) 2020.06.24
Javascript Scope, 변수  (0) 2020.06.23
JavaScript Property  (0) 2020.06.21
JavaScript Object 생성  (0) 2020.06.19
Javascript 세미콜론  (0) 2020.05.30

JavaScript Property

Property의 값을 가져오려면

  • . 연산자 : 연산자 우측에 Property 이름 "식별자"
  • [] 연산자 : 연산자 우측에 Property이름의 "문자열 표현식"

Property 값 생성

        var temp = {}
        console.log(temp);

        temp.newProperty = "a";
        temp["new Property"] = "b";

        console.log(temp);

output:

연관 배열로서의 객체

temp.newProperty : 식별자가 와야 함 -> 코딩할 때 fix됨.
temp.["new Property"] : 표현식을 인자로 받음 -> 프로그램 실행중 입력받은 것 사용 가능

        function addName(nameList, name, studentNumber) {
            nameList["name"] = studentNumber
        }
        // 이런 코드가 동작 한다는 뜻!

상속

객체에서 Property를 찾을 때, 고유 Property안에 찾고자 하는 Property가 없으면,
상속받은 Prototype 객체에서 해당 Property를 찾는다.

        function inherit(p) {
            if (p == null) throw TypeError();
            if (Object.create) // ECMAScript 5 이상에 정의되어 있음
                return Object.create(p);
        }

        var o = {};
        o.x = 1;
        var p = inherit(o); // 객체 o와 Object.prototype를 상속받는 객체
        p.y = 2;
        var q = inherit(p); // 객체 p와 o, Object.prototype을 상속받는 객체.
        q.z = 3;
        var s = q.toString(); // q 는 Object.prototype을 상속받았기 때문에 toString 사용가능

        var result = q.x + q.y; // 값은 3 
        console.log(result);

Output :

상속받은 Prototype Property를 바꾸고 싶을 때

상속받은 Property 가 read only 라면 수정 불가.
그렇지 않다면 두 가지 경우의 수

  • 고유 Property로 재정의 된다. // 기본
  • Prototype Property 의 값이 재설정된다. // setter method가 정의되어있을 경우

Property 접근 에러

존재하지 않는 Property에 접근하는 경우

  • 에러 발생하지 않음. -> undefined return

존재하지 않는 객체의 Property에 접근하는 경우

  • 에러 발생
        var temp2 = o.a;
        console.log(temp2) // undefined
        var length = o.a.length; // undefined에서 Property를 찾으려 해서 error

Output :

에러 방지

        var len = temp2 && temp2.a && temp2.length

객체 o에 Property p를 설정할 수 없는 경우

  • p가 o의 고유 Property이고 readonly일 경우
    • 읽기전용 Property p 에는 값 설정할 수 없다.
  • p가 상속된 Property 이고 readonly일 경우
    • 동일한 이름의 고유 Property로 감출 수 없음.
  • p가 고유 Property도, 상속받은 Property도 아닌데 extensible 속성이 false일 경우.

프로퍼티 삭제하기

delete 연산자. Property의 값이 아니라 Property 자체를 지움

delete book.author;
delete book["main title"];
  • delete 연산자는
    • 고유 프로퍼티만 지울 수 있다.
    • 삭제에 성공, 프로퍼티가 존재하지 않아 영향을 미치지 못한 경우, return true를 한다.
o = {x:1}
delete o.x; // 삭제 성공 return true
delete o.x; // 존재하지 않아 return true
delete o.toString; // 고유프로퍼티가 아니라 아무일도 안일어나고 true
delete 1; // 말도 안 되지만 return true
* configurable 속성이 false 인 프로퍼티는 지우지 않는다.

아래는 nonreconfigurable

        delete Object.prototype; // 지울 수 없음
        var x = 1;
        delete this.x; // 지울 수 없음
        function f() {}
        delete this.f; // 지울 수 없음

프로퍼티 검사

주어진 이름의 프로퍼티가 있는지 검사할 필요가 있을 때

  • in 연산자
  • hasOwnProperty()
  • propertyIsEnumerable() : 추가적으로 enumerable 속성까지 true여야
  • 단순히 Property에 접근
        var oo = {x : 1};
        console.log("x" in oo);
        console.log("y" in oo);
        console.log("toString" in oo);

        console.log(oo.hasOwnProperty("x"));
        console.log(oo.hasOwnProperty("y"));
        console.log(oo.hasOwnProperty("toString"));

        var ooo = inherit({y : 2});
        ooo.x = 1;
        console.log(ooo.propertyIsEnumerable("x")); // 고유 프로퍼티 열거 가능 -> true
        console.log(ooo.propertyIsEnumerable("y")); // 상속받은 프로퍼티 -> false
        console.log(ooo.propertyIsEnumerable("toString")); // 내장프로퍼티, 열거불가능 -> false

Output:

!== 와 === 연산자

  • undefined 와 null 을 구분할 수 있음.

프로퍼티 열거하기

for / in loop

        var o = {x:1, y:2, z:3};
        for(p in o) {
            console.log(p, o[p]);
        }

Output :

상속받은 Property 생략, method 생략

        for(p in o) {
            if(!o.hasOwnProperty(p))
                continue;
        }

        for(p in o) {
            if(typeof o[p] === "function")
                continue;
        }

프로퍼티 Getter / Setter

ECMAScript 5 에서는 Property의 값을 getter / setter method로 대체할 수 있음.
단순히 값을 값는 "Data Property" 와 다른 "Accessor Property" 라고 한다.

  • 프로그램이 객체의 Accessor Property에 접근하면 getter method의 반환 값이 Property 접근 표현식의 값이 됨.
  • 프로그램이 객체의 Accessor Property의 값을 바꾸려고 하면 getter method가 실행된다. = 오른쪽의 값이 method의 인자로 전달된다.

getter / setter 존재 유무로 읽기전용, 쓰기전용 결정.
특이한 것 : setter 만 있으면 쓰기전용. read 하려고 하면 있음에도 undefined return

Accessor Property의 정의

        var oo = {
            // Data Property
            data_prop: value,
            get accessor_prop() { /* 함수 몸체 */},
            set accessor_prop(value) { /* 함수 몸체 */ }
        }

Example : 2차원 좌표와 극좌표를 가지는 Property

        var p = {
            x: 1.0,
            y: 1.0,
            get r() {
                return Math.sqrt(this.x*this.x + this.y*this.y);
            },
            set r(newValue) {
                console.log("in setter : ", newValue);
                var oldValue = Math.sqrt(this.x*this.x + this.y*this.y);
                var ratio = newValue / oldValue;
                this.x *= ratio;
                this.y *= ratio;
                console.log("now x : ", this.x);
                console.log("now y : ", this.y);
            },

            get theta() {
                return Math.atan2(this.y, this.x);
            }
        }

        var q = inherit(p);
        q.x = 1; q.y = 1;
        console.log(q.r);
        console.log(q.theta);
        q.r = 777
        console.log(q.r);
        console.log(q.theta);

Output

Example : 일련번호 생성

        var serialnum = {
            $n: 0, // 프로퍼티 이름의 $는 private 프로퍼티라는 힌트

            get next() {return this.$n++;},
            set next(n) {
                if(n>=this.$n) this.$n++;
                else throw "serial number can only be set to a larger value";
            }
        }

Property 속성

이름, 값, 그리고 속성

  • value
    • 데이터 프로퍼티의 값도 속성으로 본다.
  • writeable
    • 값 변경 가능 여부
  • enumerable
    • 열거가능 여부
  • configurable
    • 3가지 속성 변경 가능한지.

Property의 3가지 속성 값을 질의하고 설정할 수 있도록 하는 ECMAScript 5 API

라이브러리 만들 때 중요

  1. 프로토타입 객체에 method 추가 , 추가된 method를 내장 method처럼 열거할 수 없게 만들기 위해
  2. 변경, 삭제 불가한 프로퍼티를 정의, 객체를 고정(lock down) 시키기 위해

접근자 Property의 속성 표현 위해 Property descriptor라는 객체 사용.

데이터 Property의 Property descriptor

  • value, writeable, enumerable, configurable 등의 Property를 가짐

접근자 Property의 Property descriptor

  • get, set, enumerable, configurable

객체의 특정 Property에 대한 Property descriptor객체
-> Object.getOwnPropertyDescriptor() 를 통해 얻을 수 있음.

        console.log(Object.getOwnPropertyDescriptor({x:1}, "x"));

          // 없는 Property거나 상속받은 Property 는 undefined
        console.log(Object.getOwnPropertyDescriptor({}, "x"));
        console.log(Object.getOwnPropertyDescriptor({}, "toString"));

Output

getOwnPropertyDescriptor 는 고유 프로퍼티만 검사 가능.
상속된 프로퍼티를 검사하고 싶으면 프로토타입 chain을 명시적으로 순회해야함.

프로퍼티의 속성 설정, 임의의 속성으로 새 프로퍼티를 만들기 위해

Object.defineProperty()

        console.log(o);
        Object.defineProperty(o, "x", {value : 1,
                                        writeable: true,
                                        enumerable: false,
                                        configurable: true})
        console.log(Object.getOwnPropertyDescriptor(o, "x"));

Output

동시에 여러개

        var p = Objet.defineProperties({}, {
            x: {value:1, writeable: true, enumerable:true, configurable: true},
            y: {value:1, writeable: true, enumerable:true, configurable: true},
            r: {get: function() {
                return Math.sqrt(this.x*this.x + this.y*this.y);
            },
            writeable: true,
            configurable: true}
        })

객체 속성

모든 객체는 prototype, class, extensible 속성을 가지고 있음.

Extensible 속성

객체에 새 프로퍼티를 추가할 수 있는지 여부
목적 : 잠겨있는 객체의 상태를 고정, 외부에서 변경하는 것을 막는 것.

객체 직렬화

  • JSON.stringify()
  • JSON.parse()

'웹 프로그래밍 > Javascript' 카테고리의 다른 글

Javascript Function  (0) 2020.06.24
Javascript Scope, 변수  (0) 2020.06.23
Javascript Array  (0) 2020.06.23
JavaScript Object 생성  (0) 2020.06.19
Javascript 세미콜론  (0) 2020.05.30

JavaScript Object 생성

  1. 객체 리터럴
  2. new 키워드
  3. Prototype
  4. Object.create()

1. 객체 리터럴

중괄호 안에 이름과 값을 :으로 구분한 순서쌍을 쉼표로 연결한 List

        var empty = {};
        var point = {x:0, y:0};
        var point2 = {x: point.x, y:point.y + 1}
        var book = {
            "main title" : "Javascript", // 공백도 가능
            "for" : "all audiences"
        }


        console.log("empty : ", empty);
        console.log("point : ", point);
        console.log("point2 : ", point2);

2. new 키워드

        var o = {};
        var o2 = new Object(); 
        // o 와 o2는 같다.

        var a = new Array();
        var d = new Date();
        var r = new RegExp("js") // 패턴매칭을 위한 RegExp 객체

3. prototype

Javascript 의 모든 객체는 또 다른 Javascript의 객체와 연관되어 있음.
이 두 번째 객체 : Prototype
객체는 Prototype으로부터 Property를 상속받는다.

  • 객체 리터럴로 생성된 모든 객체는 Prototype 객체가 같다.
    • Object.prototype으로 접근 가능
  • new Array()는 Array.prototype을 객체의 프로토 타입으로 사용하는 식
  • Object prototype : 프로토타입이 없음.
    • 다른 객체들은 보통 prototype이 다 있음.
    • Array.prototype은 Object.prototype을 상속받음.
    • 위와 같은 걸 Prototype chain이라고 한다 .

4. Object.create()

create()

  • 첫 번째 인자 : 프로토타입 객체
  • 두 번째 인자 : 새 객체의 프로퍼티 정보 생략가능
        var o1 = Object.create({x:1, y:2});
        console.log(o1);
        var o2 = Object.create(null);
        console.log(o2);
        var o3 = Object.create(Object.prototype)
        console.log(o3);

o1 :

o2 : -> 어떠한 객체도 상속받지 않는다.

o3 : -> Object객체는 상속받고 싶을 때

inherit 함수 구현

상속 받도록 구현하지 않고 객체 자체를 인자로 넣어 Property를 추가하려 한다면,
기존에 있는 수정되어서는 안되는 Property를 수정하게 되는 실수를 할 수 있다.

Prototype을 이용한 상속으로 원하는 Property를 추가하면서도 그 실수를 방지하기 위해 inherit function을 구현해 사용한다.

        function inherit(p) {
            if (p == null) throw TypeError();
            if (Object.create) // ECMAScript 5 이상에 정의되어 있음
                return Object.create(p);

            // Object.create 가 정의되어있지 않으면
            var t = typeof p;

            if (t !== "object" && t !== "function") {
                throw TypeError();
            }

            function f() {};

            f.prototype = p;
            return new f();
        }

'웹 프로그래밍 > Javascript' 카테고리의 다른 글

Javascript Function  (0) 2020.06.24
Javascript Scope, 변수  (0) 2020.06.23
Javascript Array  (0) 2020.06.23
JavaScript Property  (0) 2020.06.21
Javascript 세미콜론  (0) 2020.05.30

Javascript는 C언어와 유사한 구조를 가지고 있다. 

C언어는 적절한 곳에 세미콜론( ; ) 를 반드시 써 줘야 하지만 자바스크립트는 쓰지 않아도 동작한다. 

 

하지만 명시적으로 써주지 않았을 때 문제가 발생할 수 있는 경우가 있다. 

 

변수 뒤 괄호가 왔을 때

var y = x + f
(a+b).toString()

여기서 프로그래머가 의도한 동작은 

var y = x + f;
(a+b).toString();

이었지만 

var y = x + f(a+b).toString()

 

으로 동작할 가능성이 있다. 

 

return 뒤에 줄바꿈을 했을 때

return
true

 

이 문장은 인터프리터가 

return; true;

로 해석할 가능성이 있다. 

 

 

결론


세미콜론이 필수는 아니지만 문제가 발생할 수 있는 경우가 있다. 

세미콜론을 붙이는 습관을 들이면 코드 가독성에도 좋고 예상치 못한 버그를 방지할 수 있으므로 사용하자.

'웹 프로그래밍 > Javascript' 카테고리의 다른 글

Javascript Function  (0) 2020.06.24
Javascript Scope, 변수  (0) 2020.06.23
Javascript Array  (0) 2020.06.23
JavaScript Property  (0) 2020.06.21
JavaScript Object 생성  (0) 2020.06.19

+ Recent posts