[OOP] JavaScript 객체 지향 프로그래밍 - 3. 객체의 기본과 반복문

 

들어가며

어느 정도 개발에 대한 감을 익혔다고 생각했습니다. 코드를 순서에 맞게 작성하는 능력들을 아주 조금이지만 쌓아 올릴 수 있었습니다. 하지만 시간이 지나면서 제 코드를 봤을 때 너무 더럽다고 느껴졌습니다. 중복되는 코드가 많았고, 비효율적인 코드들도 많이 볼 수 있었습니다. 코드를 조금 더 재사용성이 높게 작성한다면 더 효율적으로 시스템이 동작할 수 있었을 텐데, 아쉬움이 남았습니다. 이런 고민을 하면서 객체지향 프로그래밍에 대해 배워야겠다고 생각했습니다. 앞으로 객체지향을 배우면서 공부하고 느낀 점들을 정리해나가고자 합니다. 아래 내용은 생활코딩의 OOP 수업을 듣고 정리한 내용입니다.

 

 

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

 

객체의 기본

만약 학교에 학생들의 데이터가 담긴 배열을 만들어본다면 다음과 같을 것입니다.

 

 

배열을 만들면서, 배열 안에 원소를 담았습니다. 여기서 만약 원소 epitone를 출력하고 싶다면 이렇게 하면 됩니다. 

 

 

정말 간단하게 데이터를 표현할 수 있습니다. 하지만 경우에 따라서 각각의 데이터가 어떤 데이터인지를 풍부하게 설명하는 정보가 필요할 수 있습니다. 이런 경우에 사용하는 것이 객체입니다.

 

객체를 만든다면 다음과 같이 만들 수 있습니다. epitone이라는 원자의 값은 어떤 이름을 갖게 되는가를 지정할 수 있습니다. 

 

 

여기서 만약 객체의 epitone이라는 값을 출력하고 싶다면 어떻게 해야 할까요? 

 

 

배열에서 원하는 값을 찾고 싶을 땐 중괄호로 접근했지만, 객체에서는 점도 사용할 수 있습니다. 그리고 대괄호로도 접근할 수 있습니다. 하지만 배열은 점을 통해서 원하는 값을 찾아낼 수 없습니다. 만약 junsei를 junse2i로 적어야 한다면 어떻게 하면 수정할 수 있을까요? 

 

 

이와 같이 작성한다면, 원자의 값을 업데이트할 수 있습니다. 그렇다면 만약 값을 삭제하고 싶다면, 어떻게 해야 할까요? 이때 delete라는 연산자를 사용합니다.

 

 

이렇게 해서 콘솔값을 찍어보면, undefined가 뜨는 것을 확인할 수 있었습니다.

 

정리해보면, 객체는 이름이 있는 정보를 정리 정돈할 때 쓰는 도구이며, 객체에 있는 값을 읽을 땐 점이나 대괄호를 통해서 읽을 수 있습니다.

그리고 값을 업데이트하거나 추가하고 싶을 때도 점이나 대괄호를 이용해서 추가하고, 원자를 지울 때는 delete 연산자를 사용하면 됩니다. 그렇다면, 객체에서는 어떻게 반복문을 사용할 수 있을까요? 이에 대해 알아보겠습니다.

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

 

 

객체와 반복문

배열의 핵심은 반복문와 함께 사용될 때 배열의 장점이 빛납니다. 배열은 여러 개의 데이터를 담고 있고, 반복문을 통해 반복적으로 처리할 때 거대한 작업을 할 수 있습니다. 그렇다면, 배열의 데이터를 반복해서 출력한다면 어떻게 해야 할까요?

 

 

console 값에서 시각적으로 더 좋게 표현해보기 위해 사용해볼 것이 바로 console.group입니다. console.group안에 array loop라고 하고, console.groupEnd라고 하면 그 안에서 출력되는 것이 바로 같은 그룹입니다. 그룹 안에 있는 콘솔 로그를 더 가시적으로 표현해줍니다. 즉 들여 쓰기가 됩니다. 반복문을 보면 console 창에 잘 출력된 것을 볼 수 있습니다. 

 

 

그렇다면 object에서는 반복문을 어떻게 사용할까요? 여기서는 for in 문을 사용할 수 있습니다. for... in문은 객체가 갖고 있는 원소의 값만큼 중괄호에 있는 코드가 실행됩니다. in이라는 키워드 뒤쪽에는 객체가 옵니다. 앞에는 객체가 반복적으로 실행될 때마다 그 순번에 해당하는 원소의 이름이 주입될 변수가 옵니다. 만약  순번에 해당하는 원소의 값을 가져오고 싶다면 어떻게 해야 할까요?

 

 

memberObject.name을 출력하면 어떻게 될까요? 이럴 경우 undefined가 뜨는 것을 확인할 수 있습니다. 여기 있는 '.' 뒤에는 변수가 올 수 없습니다. 객체의 각각의 원소를 속성이라 하는데, 여기에는 속성의 이름이 와야 합니다.

 

 

이를 배열에서 사용하는 대괄호로 바꿔주면 name의 값은 변수가 됩니다. name에 들어있는 값이 들어오면서 각각의 값을 갖게 됩니다.  이런 식으로 객체에 있는 값들을 모조리 꺼내서 반복적인 작업을 처리할 수 있습니다.

 

 

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

마치며

객체지향에 대한 기본을 쌓아가고 있습니다. 앞으로 포기하지 않고, 하나씩 지식을 쌓아 가다 보면 언젠가는 기초가 튼튼한 개발자가 될 수 있을 것이라 믿습니다. 제대로 된 방향으로 하나씩 공부하고 싶습니다.

 

 

 

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

출처