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는 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;

로 해석할 가능성이 있다. 

결론

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

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

삼항연산자 

//삼항연산자로 if문같이 사용. if문은 넣을 수 없음


import React from 'react';

function App() {

	const name = "리엑트";
    return (
        <div>
            name : {name}

                {name === '리엑트' ? (

                    <h1>리엑트입니다</h1>
                ) : (
                    <h2>리엑트가 아닙니다.</h2>
                )}
         </div>
    );
}


export default App;

AND사용

import React from 'react';

function App() {
    const name = "react";
    //not bad 
    // return (
    //     <div>
    //         {name === 'react' ? (<h1>Yes</h1>) : (null)};
    //     </div>
    // )

    //good
    //return 값이 false 일 경우, HTML에서 null 값으로 인식하는 것을 이용,
    //but return 값이 false가 아니라 0이면 0그대로 출력한다.
    return (
        <div>
            {name === 'react' && (<h1>Yes</h1>)};
        </div>
    )
}

OR사용

//undefined가 return 되면 웹브라우저에선 에러
// JSX내부에서 랜더링하는 단계에선 괜찮음 return 만 안하면 

import React from 'react';

function App() {
    const name = undefined;
    return (name || 'value is undefined');
    //웹 브라우저로 바로 return 하는 행위. undefined일때 에러
    //return name;

    //JSX 내부에서 return하는 행위
    //return <div>{name}</div>
}

export default App;

인라인 스타일링

import React from 'react';

function App() {
    const name = "React";
    const style = {
        //background-color 같이 문자(-) 포함되면 빼고 camelCase로 작성
        backgroundColor: 'black',
        color: 'aqua',
        fontSize: '48px',
        fontWeight: 'bold',
        padding: 16 //단위 생략시 px단위
    }

    return <div style={style}>{name}</div>;
}

export default App;

className (not class)

import React from 'react';
import './App.css'

// in css file
// .react {
//     background-color: aqua;
//     color: black;
//     font-size: 48px;
//     font-weight: bold;
//     padding: 16px;
//   }
function App() {
    const name = "React";
    return <div className= "react">{name}</div>;
}

export default App;