먹고싸고 객체

스터디에서 꽤나 재밌는 방식으로 객체를 만들고 놀았습니다.

제가 추구하는 방식이라 너무 공감 되더군요. 뭔가 스토리가 있는? ㅋㅋㅋ

먹고 싸는 객체를 만들어 보겠습니다.

1. 먹고 쌀려면 먹고 싸는 대상이 필요하겠죠.

대상을 객체로 만듭니다.

var 인간 = {
    이름: '회복맨',
    나이: 20
}

한번 이 객체를 console 로 찍어보겠습니다.

인간이라는 대상은 이름이 회복맨이고, 나이가 20 ㅋㅋ 입니다.

이렇게 작성하는 방식을 '리터럴 표기법' 이라고 부릅니다. 이건 객체니까 '객체 리터럴'이 명확하겠네요.

var obj = {};

그리고 이렇게 객체 안에 키와 키값을 입력할 수 있는데, 여기선 name 가 키, 'recoveryman' 이 키값이 됩니다.

근데 키값으로 쓰이는 형태가 function(){}(함수) 이 아니라면 이러한 객체 리터럴의 형태에선

name 는 '속성'이라고 불리웁니다.

var obj = {
    name: 'recoveryman',
    age: 30
};

식별자 의미와 종류: http://recoveryman.tistory.com/12

2. 인간은 살아가기 위해선 뭔갈 먹습니다.

어떤걸 먹을 줄 모르기 때문에 매개변수를 이용할 수 있는 함수 를 사용하겠습니다.

var 인간 = {
    이름: '회복맨',
    나이: 20,
    먹다: function(food) {
        // 뭘 먹었는지 어디다가 넣어줘야 합니다.
        // 아마 그건 뱃속?
    }
};

여기서 '먹다' 라는 키에는 함수가 키값으로 들어있습니다.

이런 형태의 키는 메소드 라고 부릅니다.

3. 아 근데 이렇게 먹었으면 그 먹은 음식이 뱃속에 저장이 되야 할꺼 같습니다.

var 인간 = {
    이름: '회복맨',
    나이: 20,
    배: [],
    먹다: function(food) {
        this.배.push(food);
    }
};

그래요. 이렇게 회복맨 이란 20살 인간에게 음식을 한번 줘봐야 될꺼 같습니다.

음식을 주려면 인간이란 객체.메소드명([매개변수]); 형태로 먹여줍니다.

기껏 먹은게 건빵이라니... 아무튼 배에 건빵이라는게 잘 들어갔습니다.

4. 아 근데 문제가 있네요.

인간이 아무거나 먹으면 쓰겠습니까? 먹을 수 있는걸 먹어야죠.

조건을 달아줍니다. 먹은게 음식 이라면...

var 인간 = {
    이름: '회복맨',
    나이: 20,
    배: [],
    먹다: function(food) {
        if(food.type === '음식') {
            this.배.push(food);
        }
    }
};

그럼 음식을 줘볼께요. 이번엔 사과를 줘보겠습니다.

아까와 같은 방식으로 사과를 먹으면 뱃속에 저장이 되지 않습니다.

왜일까요? 먹다의 조건문을 잘 보시면.

매개변수 food 는 단순한 변수가 아닌 '객체' 의 형태를 가지고 있습니다.

먹은 type 이 '음식' 일 경우만 들어가게 되죠.

그럼 매개변수 food 는 이런형태이지 않을까 합니다.

food = {
    type: '',
    음식이름: ''
}

그럼 다시한번 사과를 줘보겠습니다. 그리고 이번엔 책상도 함께 줘보겠습니다.

type 이 음식인 것만 먹고, type 이 가구인건 안먹었습니다.

제대로 필요한걸 먹은거 같습니다.

5. 먹었다면 싸야합니다. 똥을요

한번 싸보겠습니다.

var 인간 = {
    이름: '회복맨',
    나이: 20,
    배: [],
    먹다: function(food) {
        if(food.type === '음식') {
            this.배.push(food);
        }
    },
    싸다: function() {
        return 똥 = {
            묽기: "물",
            건더기: this.배
        }
    }
};

사과하고 케이크를 먹었습니다.

그리고 똥을 쌌는데 뭔가 이상합니다.

첫번째로 이상한건. 똥을 쌌는데 배에 아직도 사과와 케이크가 있다는 점,

두번째 이상한건 똥속에 있는 건더기는 더이상 type 이 음식일 필요가 없다는 점과 음식 이름이 무슨소용일까요 똥은 똥인데

그래서 일산 뱃속을 비워주는 작업을 먼저 해보겠습니다.

우선 return 의 위치를 하단으로 바꿔야 합니다. 이유는 이전 코드처럼 앞에 return 이 들어가면 그냥 똥의 내용물만 리턴해주지 뱃속을 배우질 못해요.

뱃속을 비울땐 두가지 방법이 있습니다. 첫번째 방법으로 this.배.length = 0;

this.배.length 하게 되면 배열의 길이를 반환하게 되죠. 1개 라도 있다면 1을 반환합니다. 근데 0 이라는 의미는 배열에 들어있는게 아무것도 없다는 의미기이 때문에 이렇게 0을 대입하면 배열이 비워집니다.

두번쨰는 this.배 = []; 입니다. 이건 빈 배열을 배에 할당해 줍니다.

var 인간 = {
    이름: '회복맨',
    나이: 20,
    배: [],
    먹다: function(food) {
        if(food.type === '음식') {
            this.배.push(food);
        }
    },
    싸다: function() {
        var 똥 = {
            묽기: "물",
            건더기: this.배
        }
        this.배.length = 0;
        return 똥;
    }
};

배는 잘 비워졌습니다.

하지만 건더기 까지 비워지고 말았네요. 이 부분만 해결하면 될꺼 같습니다.

갑자기 처음보는 맵이라는 메소드가 등장했네요.

일단 .map() 에 대해선 다시 다루도록 하겠습니다.

var 인간 = {
    이름: '회복맨',
    나이: 20,
    배: [],
    먹다: function(food) {
        if(food.type === '음식') {
            this.배.push(food);
        }
    },
    싸다: function() {
        var 똥 = {
            묽기: "물",
            건더기: this.배.map(function(food) {
                return food.음식이름;
            })
        }
        this.배.length = 0;
        return 똥;
    }
};

결과를 보시면 똥안의 건더기는 뭐가있는지, 배는 잘 비워져 있는지 제대로 확인할 수 있습니다.

이렇게 뭔가 흐름이 있는거 같습니다.

고객사에서 만약에 먹고싸는 인간 만들어 주세요. 라고 했을때

인간이니까 이름과 나머지 프로필이 있을것이고,

먹을 수 있는 인간이니까 먹는걸 만들고, 인간은 뭐든지 먹질 못하고 음식만 먹으니까 음식만 먹을 수 있게,

싸는건 분명 똥을쌀꺼에요. 사람이니까, 똥을 싼다면 그 똥의 성분이 전에 먹었던 거였는지 ㅋㅋㅋ..

-----------------------------------------------------------------------------------------------------------------------------------

.map()

.map() 은 메서드 입니다. 자바스크립트에 기본적으로 있는 내장 메서드 라고 부르면 될까 싶네요.

이 메서드의 정확한 내용은 다음의 링크를 열어보세요.

.map() 메서드의 자세한 설명 : https://goo.gl/LUtpgJ

위의 예제에서 사용하는 부분만 요약해서 말씀드리겠습니다.

맵 메서드는 새로운 배열을 생성합니다.

맵 메서드는 매개변수로 3가지의 매개변수를 활용할 수 있습니다.

예제에서 자세히 보시면 food 라는 매개변수를 사용한게 보일꺼예요.

저 food 라는 매개변수가 헷갈리실 수 있습니다. 먹다 때 써먹었던 거라서? 하지만 그 예제의 싸다에서 사용하는 food 는 전혀 다른 매개변수 입니다.

다음의 코드를 봐주세요.

var a = [{
    title: 'ttl',
    name: 'soosana'
}, {
    title: 'luv',
    name: 'sasakie'
}];
var b = a.map(function(){
    return;
})
console.log(b);

이 코드를 실행시켜서 b 를 호출해 보았습니다.

보이시나요? 분명 a 라는 배열에 이것저것 넣어준거 같은데

공간만 있고 싹 다 정의되지 않았다는 의미인 undefined 가 들어있습니다.

아까 분명 .map() 는 3가지의 매개변수를 활용할 수 있다고 썻습니다. 그럼 그걸 활용해 보도록 하겠습니다.

첫번째 매개변수를 리턴해 봤습니다.

var a = [{
    title: 'ttl',
    name: 'soosana'
}, {
    title: 'luv',
    name: 'sasakie'
}];
var b = a.map(function(one, two, three){
    return one;
    // return two;
    // return three;
})
console.log(b);

결과는 다음과 같습니다.

그럼 이번엔 두번째 매개변수를 리턴해 보겠습니다.

var a = [{
    title: 'ttl',
    name: 'soosana'
}, {
    title: 'luv',
    name: 'sasakie'
}];
var b = a.map(function(one, two, three){
    // return one;
    return two;
    // return three;
})
console.log(b);

결과는 다음과 같습니다.

마지막으로 세번째 매개변수를 리턴해 보곘습니다.

var a = [{
    title: 'ttl',
    name: 'soosana'
}, {
    title: 'luv',
    name: 'sasakie'
}];
var b = a.map(function(one, two, three){
    // return one;
    // return two;
    return three;
})
console.log(b);

결과는 다음과 같습니다.

이렇게 매개변수를 알아봤는데 이 매개변수 세가지는 다음과 같은 의미를 지닙니다.

콜백 인수	정의
value	배열 요소의 값입니다.
index	배열 요소의 숫자 인덱스입니다.
array1	요소가 포함된 배열 개체입니다.

저는 편하게 one, two, three 라고 매개변수 이름을 줬는데 매개변수의 이름은 어떻게 지어도 괜찮습니다. 하지만 의미에 맞게 지으면 좋습니다.

물론 매개변수가 하나만 집어 넣으면 이 표에서 'value' 를 의미합니다. 두가지를 넣었으면 'value, index' 를 의미하구요

그래서 .map() 메서드를 사용할 땐 매개변수를 넣어줘야 합니다.