DevLog__[javascript: 객체지향, 매개변수]

Jaewon Lee·2020년 9월 22일

JavaScript

Javascript

목록 보기

5/12

# Intro

개발자는 누구나 될 수 있지만 아무나 될 순 없다.....재원왈....ㅋㅎ 좀 멋있었다.

그런데 진짜 그런 것 같다! 누구나 시도 할 수는 있는데, 꾸준하게 오래하는 것이 쉬운것은 아니기 때문에 아무나 될 순 없다고 생각한다. 새벽 감성으로다가 저질러봤다.👊

아무튼 아무나가 되지 않기 위해! 배운 내용을 복습 겸 정리해보자.

# javascript

객체지향.....class....instance.....기본중의 기본적인 내용은 확실히 하고 가즈아!!!!!!!!!!!🔥

1. 객체지향

1) 객체지향이 뭐에요?

객체 지향 프로그래밍은 컴퓨터 프로그래밍 패러다임중 하나로, 프로그래밍에서 필요한 데이터를 추상화시켜 상태와 행위를 가진 객체를 만들고 그 객체들 간의 유기적인 상호작용을 통해 로직을 구성하는 프로그래밍 방법이다.
객체 지향 프로그래밍은 기업 면접에서도 많이 나오는 질문 중에 하나이다. 이 글 맨아래 첫번째 URL에 첨부한 링크를 참고하여 알아두자

2) Class와 Instance

class

객체(instance)를 찍어내는 틀

class 내부에서 속성(변수)과 메소드(함수)로 객체(instance)를 정의한다.

instance

class를 통해 나온 상품?

같은 class를 가지는 두개의 instance는 속성에 따라 서로 다른 값을 지닌다.

자료형에서 나온 참조형인 객체와 다른 개념이다.

인스턴스는 속성(변수)과 메소드(함수)로 이루어져 있다.

속성은 인스턴스의 특징점과 유사하고, 메소드는 객체가 실행하는 일(행동)과 유사하다.

3) Class 선언과 Instance 생성

Class 선언

function으로 선언

function Car(brand, name, color) { 
  // 인스턴스가 만들어질 때 실행되는 코드 
};

class로 선언

class Car() {
  constructor(brand, name, color) { 
    // 인스턴스가 만들어질 때 실행되는 코드 
  }
}

Instance 생성

new 키워드

let avante = new Car(‘Hyundai’, ‘avante’, ‘black’);
let mini = new Car(‘bmw’, ‘mini’, ‘white’);

4) Instance의 속성과 메소드 정의

인스턴스의 속성 정의 : this

function

function Car(brand, name, color) {
  this.brand = brand;
  this.name = name;
  this.color = color;
};

class

class Car() {
  constructor(brand, name, color) {   // constructor: 생성자함수
    this.brand = brand;
    this.name = name;
    this.color = color;
  }
}

인스턴스의 메소드 정의 : this

function

function Car(brand, name, color) {
  Car.prototype.refuel = function () { /*연료 공급을 구현하는 코드*/}   
  Car.prototype.drive = function () { /* 운전을 구현하는 코드 */}
};

class

class Car() {
  constructor(brand, name, color) { /* 속성 정의 생략*/}
  refuel() { /* 연료 공급을 구현하는 코드*/ }
  drive() { /* 운전을 구현하는 코드 */}
}

5) prototype? constructor? this?

prototype : class의 메소드를 만들때 사용
-> 빵틀로 찍어내는 상품들이 무슨 행동을 해야하는지 정의한다.
constructor : 인스턴스의 초기 속성값을 생성하는 생성자함수
->클래스에 매개변수가 전달되면 그 값으로 인스턴스의 첫 속성값이 설정되는 함수이다.
this : 자바스크립트의 this는 좀 다르다. 제쳐두고, 인스턴스에서 쓰임을 보면 new 키워드로 생성된 인스턴스의 내부 변수를 지칭한다. 자세한 내용은 글 아래 첨부한 두 번째 URL을 참고하자.

2. 매개변수

1) 매개변수가 뭐에요?

함수의 인자
함수에 들어가는 값!
함수의 input!

2) 매개변수를 유동적으로 늘리는 법

Rest Parameter : ...arr

function abc(...arr) {
  console.log(arr);
}
abc(1, 2, 3, 4, 5)
// OUTPUT : [1, 2, 3, 4, 5] 배열!!!!

arguments

function abc() {
  console.log(arguments);
}
abc(1, 2, 3, 4, 5)
// OUTPUT : [1, 2, 3, 4, 5, function...] 유사객체배열!

3) 매개변수의 초기화

function abc(str='leejaewon', num = 1) {
  console.log(`${str} is only ${num}`)
}
abc();
// OUTPUT : leejaewon is only 1

# Work Off

기본적인 내용이지만 언어마다 약간의 차이가 존재할 수 있기 때문에 유심히 보는 것이 좋을 것 같다는 생각을 했다. 실무적이고 코드 중심으로 블로깅을 하는 것이 아니라 이론적인 내용을 중심으로 작성하고 있는데, 복잡한 개념도 차곡차곡 정리할 수 있는 좋은 시간들이라는 것을 느꼈다.

그렇다고 해서, 실습이 중요하지 않은 것은 절대 아니니 추석을 이용해서 하고 싶었던 실습을 진행하고 블로깅을 해봐야겠다!

[참고문서]
객체 지향 프로그래밍이 뭔가요? (꼬리에 꼬리를 무는 질문 1순위, 그놈의 OOP), 정아마추어 JEONG_AMATEUR, https://jeong-pro.tistory.com/95 2017. 11. 15. (접속일: 2020.09.23 03:55AM)

자바스크립트의 this는 무엇인가?, ZeroCho TV,https://www.zerocho.com/category/JavaScript/post/5b0645cc7e3e36001bf676eb 2년전 등록 (접속일: 2020.09.23 03:55AM)

기본기가 탄탄한 풀스택 개발자가 되는 그날까지 🔥🔥🔥

Jaewon Lee

Communication : any

이전 포스트

DevLog__[javascript: TestBuilder]

다음 포스트