JavaScript - 3 [Object, function]

Object

- js도 객체를 만들수 있는데, 자바나 파이썬 처럼 class를 만드는 것인데, 객체를 선언하는 거라고 생각하면된다.

객체 선언은 {} 다음과 같이한다.

 

let 이름 = {

    속성 : 값,

    속성1 : 값1

}

 

let 이름 = new Object();

: 이름이란 변수에 빈 객체를 선언하다.

 

let doodreamInfo = {
    name : "Doodream",
    age : 27,
    gender : "Male",
    isHandsome : true
}

객체 안의 값을 변경 할때,

let doodreamInfo = {
    name : "Doodream",
    age : 27,
    gender : "Male",
    isHandsome : true
}

console.log(doodreamInfo);

console.log(doodreamInfo.isHandsome);
doodreamInfo.isHandsome = false;
console.log(doodreamInfo.isHandsome);

 

let doodreamInfo = {
    name : "Doodream",
    age : 27,
    gender : "Male",
    isHandsome : true,
    favoriteFood : [{
        name : "kukbab",
        tasty : true,
        price : false
    },
    {
        name : "hamburger",
        tasty : true,
        price : false
    }]
}

console.log(doodreamInfo);

 

객체 안에 객체를 선언하는 것도 되고 배열안에 객체를 선언하는 것도 된다.

 

지금까지 봐서 알겠지만 js가 망해도 html, css는 1도 피해가 가지 않는다.

 

객체의 접근법은 마침표로서 접근이 가능하고 배열은 해당 인덱스를 통해서 접근이 가능하다. 자바랑 같다.

그런데 대부분 console.log도 그렇고 마침표로 접근하지 않나? 맞다. console도 객체이다.

 

여기서 객체의 변수들은 여기서  key라고 부른다.

함수는 function이라고 한다.

즉, 객체는 key와 function으로 이루어져있다.

 

let doodreamInfo = {
    name : "Doodream",
    age : 27,
    gender : "Male",
    isHandsome : true,
    favoriteFood : [{
        name : "kukbab",
        tasty : true,
        price : false
    },
    {
        name : "hamburger",
        tasty : true,
        price : false
    }]
}
// kukbab
console.log(doodreamInfo.favoriteFood[0].name);

console.log(console);

이렇게 console.log(객체)를 넣으면 해당 객체의 구성요소들이 나온다. 그리고 새로 선언하지 않고

기존에 있던 내부함수들은 built-in-function이라고 부른다. 

 

function

- 함수를 선언하고 만들어보자

함수 선언은 function 키워드로 시작한다.

 

function 함수이름 (매개변수, 매개변수1, ...){

    

}

function sayHello () {
    console.log("Helllo");
}

sayHello();

 

 

매개변수를 넣는다면?

function sayHello (name) {
    console.log("Helllo", name);
}

let args = "Doodream";
sayHello(args);

매개변수를 출력할때 

백틱 `

키보드 1 왼쪽에 있는 ` 이기호가 백틱이다.

이백틱 `` 기호 안에 변수가 아닌 것들은 일반 문장으로 적어 놓고 나머지 문장들은 ${변수}를 넣어 출력하면 매우 편하다. 서식문자가 거의 필요치 않다;; 

function sayHello (name, age) {
    console.log(`Hello ${name} you are ${age}`);
}

let nicName = "Doodream";
let nicAge = 27;
sayHello(nicName, nicAge);

이렇게 함수에 return 변수를 넣어서 원하는 값을 반환하게 할수도 있다.

function sayHello (name, age) {
    return `Hello ${name} you are ${age}`;
}

let nicName = "Doodream";
let nicAge = 27;
console.log(sayHello(nicName, nicAge));

 

이제 객체 안에 함수를 생성해보자

const calculator  = {
    plus : function (params1, params2) {
        return params1 + params2;
    }
}

console.log(calculator.plus(1, 2));

 

위와 같이 객체를 선언하고 객체 안에서 

함수이름 : function (매개변수) {

    함수내용

}

 

이렇게 선언하면 함수가 생성된다. 

함수 안에서도 함수를 선언할 수도 있다.

 

const calculator  = {
    plus : function (params1, params2) {
        let a =  params1 + params2;

        function minus (params1, params2){
            return params1 - params2; 
        }
        return minus(params2, params1);
    }

}


console.log(calculator.plus(1, 2));

너무 간단하지 않은가?