19일차(2)[Js & Java / this / 실습 예제]

진하의 메모장·2025년 2월 3일

this 객체 기반 언어 객체지향 언어의 설계 패러다임 복습 자바 자바스크립트 클래스 기반 객체지향 언어

공부일기

목록 보기

24/66

2025 / 02 / 03

오늘 수업 시간에는 객체 기반 언어와 클래스 기반 객체 지향 언어에 대해 배웠습니다.
객체를 사용할 때 this라는 키워드를 배우고 익숙해 질 수 있도록 문제도 풀었습니다.
실습 예제를 풀면서 객체와 this키워드 / 프로퍼티 접근 등 활용하며 기본을 쌓았습니다.

💌객체 기반 언어

객체 기반 언어(Object-Based Language)

클래스 없이 객체를 직접 사용하여 프로그램을 작성하는 방식입니다.

이 언어에서는 프로토 타입을 통해 객체가 생성되며, 클래스의 개념 없이 객체의 속성이나 메소드를 정의하고 다룰 수 있습니다.

1) 특징

① 클래스 없이 객체 생성

객체를 생성할 때 클래스라는 개념이 없이 객체를 직접 정의하고 사용할 수 있습니다.
객체는 프로토타입이라는 특성을 가지고 있어, 해당 객체에서 상속을 처리할 수 있습니다.

② 편리한 선언과 생성

객체를 선언하고 생성하는 과정이 동시에 이루어지므로, 자바스크립트처럼 직관적이고 간편하게 객체를 만들 수 있습니다.

③ 암시적 상속 부재

객체 기반 언어에서는 암시적 상속이 일어나지 않으며, 다형성을 지원하지 않습니다.
이는 객체 지향 언어의 특성 중 일부가 구현되지 않음을 의미합니다.

2) 예시(자바스크립트)

자바스크립트는 객체 기반 언어로, 객체를 직접 정의하고 사용할 수 있습니다.

class 없이 객체를 생성하고, 메소드를 정의할 수 있습니다.

프로토타입을 통해 객체 간 상속을 구현합니다.
// 객체 기반으로 객체 생성
let person = {
    name: "이한",
    age: 22,
    greet: function() {
        return `안녕하세요, ${this.name}`;
    }
};

console.log(person.greet());  // "안녕하세요, 이한"

person 객체는 클래스 없이 직접 생성된 객체입니다.
자바스크립트는 객체를 정의하고 메소드를 추가하는 것이 직관적이고 간단합니다.

💌 클래스 기반 객체 지향 언어

클래스 기반 객체 지향 언어 (Class-Based Object-Oriented Language)

클래스를 통해 객체를 생성하는 방식입니다.

클래스를 설계도처럼 사용하여 객체를 만듭니다.

객체 간 상속, 다형성, 캡슐화 등의 객체 지향 개념을 적용합니다.

이러한 방식은 객체지향 프로그래밍의 정형화된 방식입니다.

객체를 생성하기 위해서는 클래스 선언과 객체 생성이라는 두 가지 단계가 필요합니다.

1) 특징

① 클래스 사용

객체를 생성하려면 먼저 클래스를 정의하고, 그 클래스를 기반으로 객체를 생성합니다.
이는 객체 지향의 기본적인 규칙을 따르는 방식입니다.

② 객체 생성에 두 단계 필요

객체를 만들기 위해서는 클래스 선언과 객체 생성이라는 두 가지 단계가 필요합니다.
이 과정은 복잡할 수 있지만, 객체의 구조를 명확히 정의할 수 있습니다.

③ 상속과 다형성 지원

클래스 기반 언어는 상속과 다형성을 자연스럽게 지원합니다.
클래스를 상속하여 기존 클래스를 확장하거나, 메소드를 오버라이딩하여 다형성을 구현할 수 있습니다.

2) 예시(자바)

자바는 클래스 기반 객체 지향 언어로, 객체를 생성하기 위해 클래스를 정의하고, 그 클래스를 기반으로 객체를 생성합니다.
자바에서 객체 생성은 두 가지 단계로 이루어집니다.
- 클래스 정의 후 그 클래스를 이용해 객체 인스턴스화를 진행합니다.

// 클래스 정의
class Person {
    String name;
    int age;

    // 생성자
    Person(String name, int age) {
        this.name = name;
        this.age = age;
    }

    // 메소드
    public String greet() {
        return "안녕하세요, " + name;
    }
}

public class Main {
    public static void main(String[] args) {
        // 객체 생성
        Person person1 = new Person("이한", 22);
        System.out.println(person1.greet());  // "안녕하세요, 이한"
    }
}

자바는 클래스를 먼저 정의하고, 이를 바탕으로 person1 객체를 생성합니다.
클래스 선언을 통해 객체의 구조와 행동을 정의합니다.

💌 비교하기

객체 기반 언어 vs 클래스 기반 객체 지향 언어 비교하기

특징	객체 기반 언어	클래스 기반 객체 지향 언어
객체 생성	클래스를 사용하지 않고, 객체를 직접 생성	클래스를 정의하고 그 클래스를 바탕으로 객체 생성
클래스 사용	클래스 개념 없음, 객체를 직접 사용	클래스 기반으로 객체를 생성하고 상속, 다형성 지원
객체 생성 단계	객체 선언과 생성이 동시에 처리	클래스 선언 후, 객체를 생성하는 두 단계 필요
상속	암시적 상속 없음	상속을 통해 객체를 확장할 수 있음
다형성	다형성을 지원하지 않음	메소드 오버로딩과 오버라이딩을 통한 다형성 지원
편리성	선언과 생성이 간단하여 직관적이고 간편함	클래스를 정의하고 객체를 생성하는 단계가 필요, 복잡할 수 있음
예시 언어	자바스크립트, Lua 등	자바, C++, Python 등

💌 this 키워드

this는 "현재 실행 중인 코드가 속한 객체"를 참조하는 특별한 키워드입니다.
this는 코드가 실행될 때마다 참조하는 객체가 달라질 수 있기 때문에 상황에 따라 this가 가리키는 대상이 달라집니다.

1) 사용 예시

this는 JAEHYUN 객체를 가리킵니다.
this.name은 JAEHYUN.name과 같아서 '명재현'이 출력됩니다.

let JAEHYUN = {
    name : "명재현",
    age : 23,
    company : ["하이브", "KOZ"],
    song : function(){
        return `${this.name}이 노래를 부른다.`
    }
};
>
console.log(JAEHYUN.name); // 명재현

2) this의 대상

전역에서의 this

브라우저에서는 this가 전역 객체인 window를 가리킵니다.
Node.js에서는 this가 전역 객체인 global을 가리킵니다.

console.log(this);  // 브라우저에서는 'window', Node.js에서는 'global'

객체 메소드 내에서의 this

객체의 메소드 내에서 this는 그 메소드를 호출한 객체를 가리킵니다.

const person = {
  name: 'jinha',
  greet: function() {
    console.log(this.name);
  }
};

person.greet();  // 'jinha'

함수 호출에서의 this

일반 함수에서는 this가 전역 객체를 가리키거나 undefined일 수 있습니다.
화살표 함수 안에서 this를 사용하면, 그 함수가 선언된 곳의 this를 그대로 사용하게 됩니다.

const obj = {
  name: 'jinha',
  greet: function() {
    const arrowFunc = () => {
      console.log(this.name);
    };
    arrowFunc();
  }
};

obj.greet();  // 'jinha'

💌 실습 예제(1)

객체 기본

person이라는 객체를 생성하고, name, age, city 속성을 추가하세요.

person 객체의 name 속성을 출력하세요.

person 객체의 name 속성을 "john"으로 변경하세요.

person 객체에 hobby(배열) 속성을 추가하고, 여러 개의 취미를 요소로 추가하세요.

person 객체의 city 속성을 삭제하세요.

1. 객체 생성

person이라는 객체를 생성하고, name, age, city 속성을 추가하세요.
let person = {
    name : "jinha",
    age : 23,
    city : "deagu"
};

2. 객체 속성 접근

person 객체의 name 속성을 출력하세요.
console.log(person.name);

3. 객체 속성 변경

person 객체의 name 속성을 "john"으로 변경하세요.
person.name = "john"
console.log(person.name);

4. 객체 속성 추가

person 객체에 hobby(배열) 속성을 추가하고, 여러 개의 취미를 요소로 추가하세요.
person.hobby = ["게임하기", "음악감상", "독서하기"];
console.log(person.hobby);

5. 객체 속성 삭제

person 객체의 city 속성을 삭제하세요.
delete person.city;
console.log(person);

💌 실습 예제(2)

주소록 객체 만들기

사용자의 이름, 전화번호, 이메일을 저장하는 주소록을 만든다.

객체를 사용하여 각 연락처의 정보를 저장한다.

배열을 사용하여 연락처를 관리한다.

새 연락처를 추가하는 함수를 만든다.

전체 연락처 목록을 콘솔에 출력하는 함수를 만든다.

1. 주소록 객체 생성

사용자의 이름, 전화번호, 이메일을 저장하는 주소록을 만든다.
let newContact = {
    Name: name,
    Email: email,
    num: num,
 };

2. 배열 생성

배열을 사용하여 연락처를 관리한다.

주소록의 각 목록을 받을 빈 배열 address를 생성합니다.

객체를 push를 사용하여 address라는 빈 배열에 넣어줍니다.
let address = [];

address.push(newContact);

3. 연락처 추가 함수

새 연락처를 추가하는 함수를 만든다.

객체 자체를 함수에 넣어서 생성할 수 있도록 외부에서 값을 받아옵니다.

함수를 사용할 때 마다 받아온 name, email, num 값으로 객체가 하나씩 생성됩니다.

name, email, num에 넣을 값을 작성하여 함수를 호출합니다.
function addContact(name, email, num) {
  let newContact = {
    Name: name,
    Email: email,
    num: num,
  };
  address.push(newContact);
}

addContact("yh", "yhyhyh@naver.com", "000-1234-0000");
addContact("jh", "jhjhjh@naver.com", "000-5678-0000");
addContact("yh", "hyhyhy@naver.com", "000-4321-0000");
addContact("sh", "shshsh@naver.com", "000-8765-0000");

3. 결과 출력 함수

전체 연락처 목록을 콘솔에 출력하는 함수를 만든다.

① for문 사용

function write() {
  for (let i = 0; i < address.length; i++) {
    console.log(address[i]);
  }
}

② foreach 사용

function write2() {
  address.forEach((i) => {
    console.log(i);
  });
}

③ 교수님께서 하신 방법[foreach + 백틱( ` )사용]

function write3() {
  address.forEach((contact) => {
    console.log(
      `이름 : ${contact.Name}, 이메일 : ${contact.Email}, 연락처 : ${contact.num}`
    );
  });
}

💌 전체 코드

위의 코드를 모두 하나로 합친 것입니다.

let address = [];

function addContact(name, email, num) {
  let newContact = {
    Name: name,
    Email: email,
    num: num,
  };
  address.push(newContact);
}

addContact("yh", "yhyhyh@naver.com", "000-1234-0000");
addContact("jh", "jhjhjh@naver.com", "000-5678-0000");
addContact("yh", "hyhyhy@naver.com", "000-4321-0000");
addContact("sh", "shshsh@naver.com", "000-8765-0000");

write();
write2();
write3();

function write() {
  for (let i = 0; i < address.length; i++) {
    console.log(address[i]);
  }
}

function write2() {
  address.forEach((i) => {
    console.log(i);
  });
}

function write3() {
  address.forEach((contact) => {
    console.log(
      `이름 : ${contact.Name}, 이메일 : ${contact.Email}, 연락처 : ${contact.num}`
    );
  });
}

19일차(2) 후기

수업 시간에 설명도 듣고 바로 문제도 풀어보니까 이해가 빠른 것 같습니다.

매개변수를 정하고 외부에서 값을 받아와 사용하는 부분이 아직은 미숙한 건지 할 때마다 오류가 나오긴 하는데... 그래도 계속 해보다보면 괜찮아질거라고 생각합니다.

근데 결론적으로는 원하는 결과를 도출했으니 괜찮은거 아닐까요 ⁽⁽◝( ˙ ꒳ ˙ )◜⁾⁾

그래도 다음에 사용할 때는 실수하지 않도록 조심하겠습니당~ (̵̵́^ᴥ^)̵̵̀

진하의 메모장

૮꒰ ྀི〃´꒳`〃꒱ა

이전 포스트

19일차(1)[객체 / 프로퍼티 / 메소드]

다음 포스트

19일차(2)[Js & Java / this / 실습 예제]

공부일기

💌객체 기반 언어

1) 특징

2) 예시(자바스크립트)

💌 클래스 기반 객체 지향 언어

1) 특징

2) 예시(자바)

💌 비교하기

💌 this 키워드

1) 사용 예시

2) this의 대상

💌 실습 예제(1)

1. 객체 생성

2. 객체 속성 접근

3. 객체 속성 변경

4. 객체 속성 추가

5. 객체 속성 삭제

💌 실습 예제(2)

1. 주소록 객체 생성

2. 배열 생성

3. 연락처 추가 함수

3. 결과 출력 함수

💌 전체 코드

19일차(1)[객체 / 프로퍼티 / 메소드]

20일차(1)[객체(2) / 자바스크립트 옵셔널]

0개의 댓글