자바스크립트 (2 - 2 object, function)

Object

> 게임 같은 거를 생각하면 player 에다가 경험치, 이름, 인기도 이런 거를 설정할텐데

const playerName = "daesung"
const playerFat = "little bit"
const playerage = 23

이런 식으로 설정하면 번거롭다.  그래서 object 를 할 건데,

 

> object는 이런 식으로 설정

// 중괄호가 들어간다는 거 기억
// object 안과 밖의 규칙은 다르다. 밖에서는 = 을 사용하지만, 안에서는 : 을 사용
// 한 개의 특성(예, name : "daesung")을 설정하면 다른 특성도 올 수 있으니깐 그 뒤에는 ,를 사용한다.
// player의 name에 접근하고 싶을 때는 player.name 또는 player["name"]

const player = {
    name: "daesung",
    points: 10,
    fat: true,
}
console.log(player);
console.log(player.name);

 

object안의 내용물을 업데이트 하는 것도 가능함. 

const player = {
    name: "daesung",
    points: 10,
    fat: true,
}

player.fat = false;
console.log(player);

근데 여기서 의문점 

const 로 변수를 잡으면 데이터를 바꿀 수 없다고 했지 않나?

 - 맞는데 우리가 바꾼 건 player 라는 object 안에 있는 fat을 바꾼 거라서 상관이 없다. 만약 player 전체의 값을 바꿀려고 한다면 에러가 뜬다. 

 

추가도 가능하다.

const player = {
    name: "daesung",
    points: 10,
    fat: true,
}

// 별 다른 설정 없이 그냥 object를 불러서 내가 넣고 싶은 데이터 이름 값 넣으면 된다.
player.lastName = "sim";
console.log(player);

 

숫자를 더하는 것도 가능하다.

const player = {
    name: "daesung",
    points: 10,
    fat: true,
};
console.log(player);
player.lastName = "sim";

// 아래와 같이 코드를 쓰면 25라는 결과를 얻을 수 있다.
player.points = player.points + 15;
console.log(player.points);

 

 

fuction

> 반복해서 사용할 수 있는 코드 조각

> alert(), push() 등과 같이 괄호가 우리가 function을 실행시키는 방법 

function sayHello(){
    console.log("Hello my naem is C");
}

sayHello();

> argument는 function을 실행하는 동안 어떤 정보를 function에게 보낼 수 있는 방법

function sayHello(){
    console.log("Hello my naem is C");
}

// 해석: sayHello라는 함수를 누르고 그 함수에다가 "daesung"이라는 데이터를 보낸다.
sayHello("daesung");

 

그럼 어떻게 받느냐??

// function sayHello ()에 nameOfPerson을 넣었는데 이건 sayHello라는 함수로 보낸 데이터가 
// nameOfPerson이라는 variable 안에 저장된다는 것
// 그리고 nameOfPerson은 function sayHello() 안에 있기 때문에 function 안에서만 사용해야함.
// 만약 
// function sayHello(nameOfPerson){
//   	console.log(nameOfPerson);
// }
// console.log(nameOfPerson)을 쓴다면 출력되지 않으니 조심!!!
 
function sayHello(nameOfPerson){
    console.log(nameOfPerson);
}

sayHello("daesung");
sayHello("sim");
sayHello("ds");

이렇게 해서 출력을 하면 

이런 식으로 나온다. 

 

argument를 2개 설정할 수도 있다.

function sayHello(nameOfPerson, age){
    console.log(nameOfPerson, age);
}

sayHello("daesung", 10);
sayHello("sim", 23);
sayHello("ds", 21);

더 나아가서 이런 것들도 가능하다.

function sayHello(nameOfPerson, age){
    console.log("Hello my name is " + nameOfPerson + " and I'm " + age);
}

sayHello("daesung", 10);
sayHello("sim", 23);
sayHello("ds", 21);

function plus(firstNumber, secondNumber){
    console.log(firstNumber + secondNumber);
}
function divide(a, b){
    console.log(a/b);
}
plus(8, 60);
divide(98, 20);

 

그런데 console.log() 이런 식으로 하는 것처럼 player.sayHello() (player가 object일 때)와 같은 것도 가능하지 않을까?

가능하다.

// 코드 해석
//
// player를 object로 잡고 
// 설정할 function을 넣는데 형식은 sayHello : function() {} 
// 이런 식으로 그래서 만약에 player 안에 있는 fuction을 부를 때는 
// player.sayHello() 이런 식으로 부르고 이 funtion에다가 보내고 싶은
// argument를 적고 보낸다. 그럼 function 안에 있는 otherPersonName에 저장되어서
// function을 실행한다.

const player = {
    name: "daesung",
    sayHello: function (otherPersonName) {
        console.log("hello! " + otherPersonName + " nice to meet you!");
    },
};

player.sayHello("daesung");