20.12.09
초보비둘기
·2020. 12. 9. 15:12
프로그래밍 언어는 개발을 도와주는 툴이다. 그리고 그 언어에는 3가지 종류가 있다.
Machine Languages(머신어)
-
0과 1로 조합된 것, 컴퓨터가 알아들을 수 있는 언어
-
하지만 사람이 알아듣긴 힘들것이다.
Assembly Languages(어셈블리어)
-
자바스크립트로치면 var, function, operator 등의 예약어가 굉장히 많은데 어셈블리어가 이런 일을 하는 언어라고 생각하면 된다.
-
가지수가 많지 않기 때문에 실제로 사용하기가 어렵다.
-
옛날에는 어셈블리어로 코딩을 했다.
High-Level Languages(고급어)
-
그래서 어셈블리어를 통해 함수 등을 만들고 그것들을 사용할 수 있게끔 만든 것이 지금의 프로그래밍 언어이며 고급어이다.
-
영어랑 문법이 비슷하다.
-
Interpreter라는 개념이 있는데 우리가 지금 배우고 있는 자바스크립트가 이에 속하며 컴파일의 과정을 거치지 않고 Line by line으로 읽으면서 바로 변화를 해준다.
-
모든걸 하나 안에서 순서대로 실행하게 하는 절차지향적 언어가 있고, 객체지향적 언어가 있는데 자바스크립트는 객체지향적 언어(OOP : Object Oriented Programming)라고 할 수 있다.
우리가 코딩을 하면 고급어 - 어셈블리어 - 머신어 순으로 컴퓨터에 전달된다.
머신어에서 고급어로 올라갈수록 적응성이 좋아지고 구현이 용이하다. 고급어에서 머신어로 내려갈수록 속도가 빠르고 코드의 밀도가 높아진다.
OOP(Object Oriented Programming)
-
명령어가 쭉 리스트로 존재하는것이 아닌, 여러개의 독립적인 객체들이 원탁에 둘러앉아 모여서 회의를 하는 느낌(객체끼리 메시지를 전달하며 함께 일을 수행한다.)이라고 생각하면 될 것이다.
-
최초에 class로 ptorotype을 constructor를 통해 정의를 하고, 그 안에 Properties나 Methods 등을 정의를 하게 되면 class를 통해 내가 원하는대로 여러가지를 찍어낼 수 있을 것이며 아주 효율적이라고 볼 수 있다.
OOP에는 기본적인 concepts가 있다.
Encapsulation (캡슐화)
바로 위에서 언급한 것처럼 class안에 Properties, Methods를 전부 집어넣고 말그대로 '캡슐화 한다' 라고 생각하면 된다.
let noodle = '스파게티면';
let time = 8;
let how = '꼬들꼬들한';
function getMessage(noodle, time, how) {
return `${noodle}을 ${time}분간 삶아서 ${how}식감의 요리를 완성한다.`;
}이렇게 생긴 코드가 있다고 한다면
let food = {
noodle: '스파게티면',
time: 8,
how: '꼬들꼬들한',
getMessage: function() {
return `${this.noodle}을 ${this.time}분간 삶아서 ${this.how}식감의 요리를 완성한다.`;
}
};
food.getMessage();이렇게 표현을 하는 것이라고 할 수 있다.
Inheritance (상속)
-
단어의 뜻 그대로 상속을 한다는 것인데 자식이 부모의 Properties를 물려받을 수 있다는 것이다.
-
그러므로 자식들 하나하나에 같은 속성을 주려면 그냥 부모에 속성을 한 번만 줘도 자식은 알아서 그것을 갖게 되므로 아주 간편하다.
Abstraction (추상화)
-
여러가지 객체가 있을 때, 그 객체들의 추상적인 공통점을 찾아 하나로 묶고 싶다고 생각해서 묶게 되면 그것이 곧 Abstraction이다.
-
하나의 공통된 속성으로 묶어 생각하면 훨씬 객체들을 다루기가 쉬울 것이다.
Polymorphism (다형성)
-
다형성이라하면 여러가지 형태가 존재한다는 뜻인데, OOP에서의 다형성은 class나 Method가 다양한 방식으로 동작이 가능하다는 뜻으로 해석을 할 수 있다.
-
대표적인 예시로 오버라이딩과 오버로딩을 들 수 있다.
-
오버라이딩은 자식이 부모로부터 Method를 상속받았을 때, 자식이 그 Method를 재정의한 후에 자식의 인스턴스를 생성해서 해당되는 Method를 사용하면 재정의된 Method를 사용할 수 있다는 것이다.
-
오버로딩은 같은 Method를 사용해도 해당 Method의 parameter를 다르게 하여 여러개를 생성하면 같은 Method라도 여러 형태가 될 수 있다는 것이다.
자바스크립트에서 Object를 생성하는 방법
객체 리터럴
- 변수를 이용하여 객체를 생성하면서 동시에 객체의 중괄호 안에 Properties를 할당하면 된다.
let dinner = {
menu: 'DarkGalbi닭갈비어둠의갈비',
servings: 4,
spicyLevel: 'normal'
};
생성자(new)
- 자바스크립트의 함수는 생성자로도 만들 수 있다. this를 사용하는 미리 정의해둔 함수에 new 키워드를 붙인채로 호출하면 된다.
- 생성자 함수 사용시, 함수의 첫 글자는 대문자로 사용한다.
- 생성자 함수 내부에 return문이 없을 경우, 생성된 객체를 return하며, 쓰고싶다면 return this를 사용해도 된다.
// return문 생략시 (아까와 같은 dinner라는 변수이지만 생성자함수를 사용시에는 앞글자를 대문자로 쓰자)
let Dinner = function(menu, servings, spicyLevel) {
this.menu = menu;
this.servings = servings;
this.spicyLevel = spicyLevel;
};
// return문 사용시
let Dinner = function(menu, servings, spicyLevel) {
this.menu = menu;
this.servings = servings;
this.spicyLevel = spicyLevel;
return this;
};이렇게 먼저 생성자 함수를 만들어 준 다음에
let dinner = new Dinner('DarkGalbi닭갈비어둠의갈비', 4, 'normal');
console.log(dinner);이렇게 새롭게 dinner를 사용하고 new 생성자를 이용해 Dinner의 parameter에 원하는 값을 넣고 console.log를 돌려보면
Dinner {menu: "DarkGalbi닭갈비어둠의갈비", servings: 4, spicyLevel: "normal"} 이 출력되는 것을 확인할 수 있다.
기본객체 생성자 함수
- new 연산자를 이용해서 기본객체인 Object()를 생성 후에 Properties를 추가하는 방식이다.
let dinner = new Object();
dinner.menu = 'DarkGalbi닭갈비어둠의갈비';
dinner.servings = 4;
dinner.spicyLevel = 'normal';이를 위와 같이 쓸 수 있겠다. 그리고 이것에 console.log(dinner)를 돌려보면 위의 경우와 같은 object가 나오는 것을 확인 할 수 있다.
Instantiation Patterns(인스턴스를 만드는 과정)
지금은 ES6의 등장으로 인해 class 키워드가 생겼지만 그 이전부터 JavaScript를 객체지향적으로 사용하기 위한 시도들이 있었고
그 방법으로는 다음과 같은 것들이 있으며 그중 특히 Pseudoclassical한 방법을 눈여겨볼 필요가 있다. 작동방식이 class키워드와 같기 때문이다.
Functional
- 함수를 이용해서 찍어내는 방식이다.
let Bike = function(position) {
let instance = {};
instance.position = position;
instance.move = function() {
this.position += 1;
}
return instance;
};
let bike1 = Bike(5);
let bike2 = Bike(10);
bike1.move();
Functional Shared
- 앞서 Functional방식은 인스턴스를 생성시마다 모든 메소드가 할당되므로 메모리를 절약하고자 만들어진 방법이다.
let extend = function(to, from) {
for (let key in from) {
to[key] = from[key];
}
};
let methods = {};
methods.move = function() {
this.position += 1;
};
let Bike = function(position) {
let instance = {
position: position
};
extend(instance, methods);
return instance;
};
let bike1 = Bike(5);
let bike2 = Bike(10);
bike1.move();
Prototypal
- Object.create(???)라는 것을 이용하여 ???에 해당하는 객체를 프로토타입으로하는 객체를 생성한다. 한눈에 봐도 위의 식들보다 비교적 간편하다.
let methods = {};
methods.move = function() {
this.position += 1;
};
let Bike = function(position) {
let instance = Object.create(methods);
instance.position = position;
return instance;
};
let bike1 = Bike(5);
let bike2 = Bike(10);
bike1.move();
Pseudoclassical
- 가장 눈여겨봐야할 패턴으로, 진짜 어이없게도 식이 간략하게 끝나버린다. 바로 prototype을 이용하는 방법이다. 위의 방법들과 다른점을 보면, 찍어낼 때마다 new 생성자를 써야한다는 특징이 있고 가장 많이 사용되는 방법이다.
let Bike = function(position) {
this.position = position;
};
Bike.prototype.move = function() {
this.position += 1;
};
let bike1 = new Bike(5);
let bike2 = new Bike(10);
bike1.move();
그렇다면 prototype이란 무엇인가?
자바스크립트를 말할 때, 프로토타입 기반의 언어라고 한다. 즉 자바스크립트를 배운다는 것은 반드시 프로토타입을 알아야 한다는 뜻이다. 위에서도 언급했듯이 자바스크립트는 객체지향적언어(OOP)이다. 하지만 Java, Python 등과는 다르게 class라는 것이 없었다. (지금은 class 문법이 생겼지만 근본적으로 자바스크립트가 class를 기반으로 한다는 것은 아니다.) 그 대신에 프로토타입이라는 개념이 있기 때문에 자바스크립트가 객체지향적언어일 수 있다는 것이다. 예를 들어 다음과 같은 코드가 있다고 생각해보자.
let Food = function(name) {
this.name = name;
};
Food.prototype.eat = function() {};
let DarkGalbi = new Food('DarkGalbi');위 코드에서는 prototype을 이용하였다. 이런 경우, DarkGalbi.eat를 사용 할 수 있게 되는데
Food → Food.prototype.eat → DarkGalbi 순으로 진행 되었다고 볼 수 있다.
그 이유는 Food를 이용해서 DarkGalbi를 생성하였으므로 DarkGalbi 입장에서는 Food의 프로토타입을 가지기 때문이다.
- Food의 입장에서 뒤에 .prototype을 붙이면 (Food.prototype) Food의 프로토 타입을 가리키는 말이다.
- Food.prototype 입장에서 뒤에 .constructor를 붙이면 (Food.prototype.constructor) Food를 가리키는 말이다.
- DarkGalbi 입장에서 뒤에 .__proto__를 붙이면 (DarkGalbi.__proto__) Food.prototype을 가리키는 말이다.
