실무에서 사용하는 자바스크립트의 기초적인 문법들을 차근차근 정리해보려고 합니다.
// 실무에서 어떻게 사용하고 있나?

클래스

class ?!

클래스는 templete (틀) 이고 메모리에 올라가지 않고… 등등의 이야기는 뒤쪽에 정리하도록 하겠습니다.

먼저.. class 는 언제 쓰는 가?

중요한 건, 어떤 경우에 class를 쓰는 가 / 왜 쓰는 가 가 class 문법이 만들어진 중요한 포인트인 것 같습니다.

class 는 1. “연관” 있는 데이터 / 함수 들을 한 덩어리로 2. “묶어” (그 묶은 데이터를 field (속성 - 데이터) 이라고 하고, 함수를 method (행동)라고 합니다) 3. “틀” 을 만들어 데이터 마다 다른 결과물을 만들고 싶을 때 사용할 수 있습니다.

예를 들어, 삼각형의 가로, 삼각형의 세로, 삼각형의 넓이를 구하는 함수, 사각형의 가로, 사각형의 세로, 사각형의 넓이를 구하는 함수 등등의 데이터 / 함수들이 있다고 가정해 봅니다. 당연히 삼각형은 삼각형끼리 사각형은 사각형끼리 묶어서 관리하면 편리 할 것 입니다. 추가로 실제 값을 가지지 않은 삼각형 / 사각형의 틀을 가지고 있다면, 여러가지 값들을 가진 삼각형 / 사각형을 만들기 편할 것 입니다.

코드로 확인해 보겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

class 사각형 {
  // you can pass data to 삼각형 as creating 삼각형 object
  constructor(width, height, color){
    // fields
    this.width = width;
    this.height = height;
    this.color = color;
  }

  // methods
  printArea() {
    console.log(this.width * this height);
  }
}

이제 삼각형이라는 틀을 완성했습니다.
그럼 이 틀을 이용해 가로 10, 세로 10, 빨간색 이라는 데이터를 넣은 사각형을 만들어 보겠습니다.

1

const rectangle = new 사각형(10, 10, 'red');

원하는 데이터를 이 틀(class)에 넣어서 다양한 결과물을 만들어 낼 수 있습니다.

• 빨간(데이터) 사각형
• 파란(데이터) 사각형
• 가로, 세로 길이가 같은 (데이터) 사각형

(클래스를 붕어빵틀, 그리고 그 결과물을 팥 붕어빵, 크림 붕어빵 이라는 유명한 예시들이 있습니다….)

그리고, 그 결과물을 조금더 전문 용어로 표현 하면, 이것을 class 의 instance 또는 object 라고 합니다.

class 정의

• 연관된 데이터와 함수를 묶는 틀
• 묶인 데이터를 field(속성), 묶인 함수를 method (행동) 이라 함
• 그 틀에 의해 실제 데이터로 만들어진 결과물을 인스턴스 라고 함

class 특징

• 클래스는 한번만 선언 됨 - https://developer.cdn.mozilla.net/en-US/docs/Web/JavaScript/Reference/Classes#re-running_a_class_definition

• 안에 실제 데이터가 들어있지 않은 단순한 틀이기 때문에 메모리에 올라가지 않음 <- 조금 더 확인해보아야

“그래서, this가 뭔가요?”

“this는 해당함수를 어떤 방식으로 호출하느냐에 따라 결정 됩니다. blur blur blur…”
“그래서, this가 뭔가요?”

면접에서 this에 대해 한참을 설명하고 나서 들었던 질문입니다. 저는 this를 단순히 객체를 가리키는 것 이라고만 생각하고 있었습니다. 면접 후, this에 대해 좀더 자세히 공부하였고, 머릿속에 있던 자바스크립트의 개념들과 이것(여기서의 이것은?)을 연결하여 이해 할 수 있었습니다. 아래의 내용들은 제가 this에 대해서 공부하면서 함께 공부했던 내용들을 정리해놓은 것입니다. 주로 ZeroCho 님의 블로그를 보고 공부하였습니다.

1

Object.create(obj);

obj을 프로토타입으로 가질 객체를 생성하시오
return 값은, 명시된 객체를 프로토 타입으로 가지고, 명시된 속성들을 가지는 새로운 객체

1

function.call(object);

의미: function이라는 함수가 실행될 때 그 안의 this가 object를 가리키도록 해

자바스크립트의 Prototype 이란, 어떠한 객체가 만들어지기 위한 그 객체의 모태(원형)를 말한다. 자바스크립트의 모든 객체는 Object 객체의 프로토타입을 기반으로 확장 되었다.

Prototype은 크게 두가지 특징을 가지고 있다.

1. 생성자 (constructor) 와 쌍을 이룬다.
2. Instance 와 연결되어 있다. (Dunder proto와 prototype chain)

첫번째, 생성자 (constructor) 와 쌍을 이룬다.

마치 “부부”처럼, 생성자가 있으면 Prototype은 반드시 존재한다. 생성자에는 아내인 Prototype에 대한 정보를 “기본적”으로 가지고 있다. 그 정보(prototype의 reference)를 prototype 이라는 속성에 저장 한다. 반대로 아내 prototype도 남편의 정보(constructor의 reference)를 constructor라는 속성에 저장하고 있다.

아래 이미지에서 파란색 줄은 Object라는 생성자의 prototype 속성에 저장된 정보를, 노란색 줄은 생성자 아내(prototype)의 constructor 속성에 저장된 정보를 보여준다.

각각의 속성의 값들은 그 자체로 아내(prototype)와 남편(constructor)을 가리킨다.

this가 객체를 가리킨다 하지만, 어떤 객체를 가리키는지는 this를 사용하는 해당 함수를 “어떤 방식으로 호출하느냐” 에 따라 결정된다.

객체 생성자(Object Constructor)는 비슷한 객체를 무수히 만들어낼 수 있다.

cf. 객체 리터럴로 객체를 생성할 수도 있다. var dog = { name: ‘메시’, breed:’푸들’, weight: ‘6kg’}

객체 생성자 만들기

1
2
3
4
5
6
7

function Dog(name, breed, weight) {
  //객체 생성자 특징 1. a function, 2.name with Upper Case
  this.name = name; //3. 'this' Keywords
  this.breed = breed;
  this.weight = weight;
  //4. return nothing
}

객체 생성자 특징

1. 객체 생성자는 함수이다.
2. 생성자 함수명은 일반적으로 대문자로 시작한다.
3. this 키워드를 사용한다.
4. 생성자 함수는 아무것도 반환하지 않는다.

1
2
3
4
5
6
7
8
9
10
11

var indices = [];
var array = ['hi', 'b', 'hi', 'c', 'hi'];
var element = 'hi';
var idx = array.indexOf(element);

for(;idx !== -1;){
  indices.push(idx);
  idx = array.indexOf(element, idx + 1);
}

console.log(indices);//[0, 2, 4];

arr.indexOf(searchElement, fromIndex) fromIndex부분은 fromIndex 부분부터 searchElement를 찾으라는 뜻이다. fromIndex가 음수라면, 배열의 처음부터 searchElement를 찾게 되고, fromIndex가 배열의 길이보다 크거나 같다면, -1이 반환된다.

<출처>

• https://developer.mozilla.org

코딩문제를 풀때, 특정 요소를 삭제하는 방법은 자주 사용된다. 아래는 배열의 특정 요소 삭제 방법과 내가 자주 실수하는 포인트들을 정리하였다. 다음은 배열의 특정 요소 삭제 방법 이다.

1

배열이름.splice(인덱스, 1);

간단한 사용 예시

1
2
3
4

var array = [1, 2, "ipad", 3, 4, 5];
var apple = array.splice(2, 1);
//array = [1, 2, 3, 4, 5]
//apple = ['ipad'], apple은 배열, array 타입이 된다

실수하는 포인트

주의사항

1. slice가 아닌 splice
2. 문자열에서는 사용이 불가능하다
3. splice는 기존 배열또한 변형이 일어나며, slice는 기존배열에 변화를 주지 않는다 (2019.5.2 update)

—참고 Object의 속성을 지우는 메서드는 delete이다

1
2
3

var object = { Brand: "Samsung", ModelNumber: "2098d0dkd0" };
delete object.ModelNumber; //delete_객체명.속성명
//object = {Brand: 'Samsung'}