jh

• 객체 지향 프로그래밍

자바스크립트는 객체 지향 프로그래밍을 지원하는 스크립트 언어이고 객체 지향 프로그래밍은 객체를 중심으로 프로그래밍하는 패러다임이다. 객체란 데이터와 해당 데이터를 조작하는 메서드(함수)를 함께 묶어 놓은 것을 의미한다. 객체는 클래스를 통해 만들어진다.

객체 지향 프로그래밍의 장점은 코드의 재사용성과 유지보수성이 높다는 점이다. 객체는 독립적으로 작성되어, 다른 객체와의 상호작용을 통해 완성된 프로그램을 만들기 때문에 코드의 재사용성이 높다. 또한, 객체는 속성과 메서드를 함께 묶어 놓았기 때문에, 코드의 가독성과 유지보수성에 이점이 있다.

하지만 객체 지향 프로그래밍은 복잡한 객체 간의 관계를 구성하기 위해 많은 노력이 필요하며, 오버헤드가 큰 경우도 있어, 상황에 따라서 객체 지향 프로그래밍을 사용하기 적합한 경우와 그렇지 않은 경우를 판단해야한다

• 캡슐화

캡슐화란 객체의 상태와 행위를 하나로 묶어서 객체 내부에 은닉하는 것을 말한다. 즉, 객체의 내부 데이터와 메서드를 외부에서 직접 접근할 수 없도록 제한하는 것이다. 이를 통해 객체 내부의 데이터를 안전하게 보호할 수 있고. 자바스크립트에서는 closure와 symbol 등을 이용하여 캡슐화를 구현할 수 있다.

• 추상화

추상화란 객체의 공통된 속성과 행위를 추출하여 모델링하는 것을 말한다. 즉, 객체를 구성하는 속성과 메서드 중에서 필요한 부분만 추려내어 불필요한 세부사항을 감추는 것이다. 이를 통해 객체를 단순하게 만들어 사용자가 이해하기 쉽고 유지보수하기 용이하게 만들 수 있다.

• 상속

상속은 부모 객체의 속성과 메서드를 자식 객체에서도 사용할 수 있도록 하는 것이고, 자식 객체는 부모 객체의 속성과 메서드를 물려받아 사용할 수 있기 때문에 코드의 재사용성이 높아 진다. 자바스크립트에서는 prototype과 class를 이용하여 상속을 구현할 수 있다.

• 다형성

다형성은 객체지향 프로그래밍에서 같은 이름의 메서드나 속성이 다른 객체에서 다른 동작을 수행하도록 하는 것을 의미한다. 즉, 같은 이름의 메서드나 속성을 사용하지만, 다른 결과를 얻을 수 있다. 이를 통해 코드의 일관성을 유지하면서 다양한 상황에 대응할 수 있다. 자바스크립트에서는 오버로딩이 지원되지 않기 때문에, 함수의 인자나 반환값을 이용하여 다형성을 구현할 수 있다.

클래스

자바스크립트 클래스는 객체를 생성하기위한 템플릿이다. 객체를 만들기 위해 특정한 속성과 동작을 함수안에 정의하는것을 의미한다.

클래서 생성

클래스는 하나의 함수로 정의할수 있다(ES5)

function Car( model, colour, maxSpeed ){


}

클래스는 객체를 만들기 위한 constructor포함한 함수 이다.(ES6)

class Car {

constructor( model, color, maxSpeed){

this.model = model;

this.model = model;

    this.color = color;

    this.maxSpeed = maxSpeed;

  }

  accelerate() {

    console.log(`The ${this.color} ${this.model} is accelerating!`);

  }

  brake() {

    console.log(`The ${this.color} ${this.model} is braking!`);

}

}

인스턴스 

인스턴스는 해당 클래스로 부터 만들어진 객체를 말한다 즉, 클래스를 사용하여 객체를 생성할 때, 생성된 객체를  인스턴스라고 한다. 인스턴스는 클래스 속성과 메소드를 상속받는다. 

const myCar = new Car('BMW', 'black', 200);

const yourCar = new Car('Audi', 'white', 180);

예제로 사용한 Car 클래스에서 만들어진 myCar 객체는 model, color, maxSpeed 속성과 accelerate(), brake() 메서드를 가진 인스턴스입니다.

new 연산자 

new는 자바스크립트에서 인스턴스를 생성할 때 사용하는 특별한 연산자이다. new 연산자는 다음과 같은 역할을 한다

클래스로부터 새로운 객체(인스턴스)를 생성한다

객체를 초기화하는 constructor 메서드를 호출한다.

생성된 객체를 반환한다.

new 연산자는 클래스를 호출하여 새로운 인스턴스를 생성할 때 사용됩니다. new 연산자 뒤에는 클래스의 생성자 함수와 생성자 함수에 전달할 인수가 포함됩니다. new 연산자가 호출되면, 자바스크립트는 클래스의 constructor 메서드를 호출하여 객체를 초기화하고, 이를 새로운 인스턴스로 반환합니다.

생성자 함수

생성자함수는 클래스를 정의한 함수이며, 객체를 생성하고 초기화하는 역할을 한다. 

생성자함수는 일반적으로 대문자로 시작하는 이름을 사용하며, “new”연산자를 사용하여 객체를 생성할수 있는 함수를 의미한다. 

생성자 함수 내부에서는 this키워드를 사용하여 객체의 프로퍼티를 초기화 할수 있다 이렇게 생성된 객체는 해당 생성자 함수와 연결된 프로토타입 객체를 상속 받으며 생성자 함수 내부에서 정의된 메서드를 사용할수 있다.

function Person(name, age) {

  this.name = name;

  this.age = age;


  this.sayHello = function() {

    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);

  };

} // Person은 name 과 age 프로퍼티를 가지는 객체를 생성하고 sayHello 메서드를 정의한다.


const john = new Person('John', 30);

john.sayHello(); // "Hello, my name is John and I'm 30 years old.”

john은 Person 생성자 함수를 사용하여 생성된 새로운 객체.(인스턴스)

john.sayHello()는 Person 생성자 함수 내부에서 정의된 sayHello 메서드

ES5 클래스 작성 문법

function Person(name, age) {

  this.name = name;

  this.age = age;

}

Person.prototype.sayHello = function() {

  console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);

};

ES6 클래스 작성 문법

class Person {
  constructor(name, age) {

    this.name = name;

    this.age = age;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);

  }
}

const emptyObj = {};
    expect(typeof emptyObj === 'object').to.equal(true);
    expect(emptyObj.length).to.equal(undefined);

    const megalomaniac = {
      mastermind: 'Joker',
      henchwoman: 'Harley',
      getMembers: function () {
        return [this.mastermind, this.henchwoman];
      },
      relations: ['Anarky', 'Duela Dent', 'Lucy'],
      twins: {
        'Jared Leto': 'Suicide Squad',
        'Joaquin Phoenix': 'Joker',
        'Heath Ledger': 'The Dark Knight',
        'Jack Nicholson': 'Tim Burton Batman',
      },
    };
    
    
    
    
    
    expect(megalomaniac.length).to.equal(undefined);
    expect(megalomaniac.mastermind).to.equal('Joker');
    expect(megalomaniac.henchwoman).to.equal('Harley');
    expect(megalomaniac.henchWoman).to.equal(undefined);

위에 코드는 Koans를 풀면서 나의 부주의로 인해서 제일 시간을 많이 사용했던 문제. 

megalomaniac.hechwoman와 megalomaniac.hechWoman이 왜 다른지 한참을 찾았지만, 다른점은  "henchwoman"의 w 소문자와  W 대문자를 찾아내지 못했다. 나중에 다른 사람의 코드를 볼때 조금 더  Case-Sensitivity에 주의를 기울여야한다.

const arr = ['peanut', 'butter', 'and', 'jelly'];

    expect(arr.slice(1)).to.deep.equal(['butter', 'and', 'jelly']);
    expect(arr.slice(0, 1)).to.deep.equal(['peanut']);
    expect(arr.slice(0, 2)).to.deep.equal(['peanut', 'butter']);
    expect(arr.slice(2, 2)).to.deep.equal([]);
    expect(arr.slice(2, 20)).to.deep.equal(['and', 'jelly']);

slice(2,2) 문제의 예상 되는 나의 답은  and , jelly 였지만,  빈문자열이 답이였다. 

peanut , butter, and, jelly 

0             1           2      3               2 의 자리에서 2개를 생각했지만, 

slice 메서드의 실제로 추출하는 것은  2의 자리에서부터 2의자리까지의 배열의 요소를 추출한다. 

그리고 slice 메서드의 두번째 인자인 2는 실제로 -1 의 자리까지() 배열을 요소를 추출하므로 [] 빈배열을 출력한다는 것이다.

예를 들면  slice 메서드의 두번째 인지가 3 이라고 하면 -1 의 자리인 2의 자리까지의 배열을 요소를 출력한다. 

• 원시 자료형의 참조 자료형의 종류와 특징

원시 자료형 : String, Number, Boolean, Undefined, Symbol ,Null

- 원시 자료형은 보관함인 변수에 하나의 데이터를 담는다

- 고정된 저장공간을 차지한다

- 

참조 자료형 : 원시 자료형이 아닌것들, 배열, 객체, 함수 

- 참조자료형은 변수에 할당할 때, 변수 값이 아닌 주소를 저장

- 여러개의 데이터를 담음 

가비지 콜렉터(garbage collector)

가비지 콜렉터는 할당한 메모리 공간을 주기적으로 검사하여 더이상 사용되지 않는 메로리를 해제하는 기능을 말한다. 더이상 사용되지 않는 메모리란 어떤 식별자도 참조하지 않는 메로리 공간을 의미한다. 자바스크립트는 가비지 콜렉터를 내장하고 있는 매니지드 언어로써 가비지 콜렉터를 통해 메모리 누수 (memory leak)를 방지 한다. 

• 얕은 복사와 깊은 복사

 얕은 복사와 깊은 복사

참조 자료형을 복사하는데에는 대략 3가지 방법이 있습니다. 얕은 복사(shallow copy), 깊은 복사(deep copy), 완전한 깊은 복사입니다.

얕은 복사는 slice(), Object.assign(), spread syntax 등을 이용해 참조 자료형을 복사하는 것입니다. 이 방법을 사용해 복사하면 원본과 복사된 참조 자료형이 같은 요소를 가지고 있지만, 다른 주소를 참조하게 됩니다. 따라서 서로 값을 변경해도 서로에게 영향을 주지 않게 됩니다.

하지만, 참조 자료형 내부에 또다른 참조 자료형이 중첩되어 있는 상태에서는 가장 외부에 있는 참조 자료형만 복사되고 내부에 존재하는 참조 자료형은 같은 주소를 참조하게 됩니다.

이런 경우에 내부에 존재하는 참조 자료형까지 모두 복사하는 것이 깊은 복사입니다. 그러나 자바스크립트 내부적으로 깊은 복사를 수행할 수 있는 방법은 존재하지 않습니다. 자바스크립트의 문법을 응용해서 깊은 복사와 동일한 결과물을 만들어 낼 수 있을 뿐입니다.

이 때 사용하는 방법이 JSON.stringfy()와 JSON.parse()입니다.

let arr = [1, 2, [3, 4]];

console.log(JSON.stringify(arr)) // [1,2,[3,4]]

console.log(JSON.parse(JSON.stringify(arr))) // console.log(arr)과 동일 //

let str = JSON.stringify(arr);

console.log(str[0]); // [ //

console.log(str[1]); // 1 //

console.log(str[2]); // 2 //

위 방법을 사용해 깊은 복사를 할 수 있지만, 여기도 예외가 존재합니다. 바로 중첩된 참조 자료형 중에 함수가 포함되어 있을 경우 복사되지 않고 null이 되어버립니다. 따라서 이 방법 역시 완전한 깊은 복사라고 하기는 어렵습니다.

완전한 깊은 복사가 꼭 필요하다면 node.js 환경에서 외부 라이브러리인 lodash, 또는 ramda를 설치하면 됩니다. lodash와 ramda는 각각 방법으로 깊은 복사를 구현해 두었습니다. 다음은 lodash의 cloneDeep을 사용한 깊은 복사의 예시입니다.

const lodash = require('lodash');

const arr = [1, 2, [3, 4]];

const copiedArr = lodash.cloneDeep(arr);


console.log(arr); // [1, 2, [3, 4]]

console.log(copiedArr); // [1, 2, [3, 4]]

console.log(arr === copiedArr) // false

console.log(arr[2] === copiedArr[2]) // false

CLI : Command Line Interface

 Command Line Interface 또는 명렁어 인터페이스는 텍스트 터미널을 통해 사용자와 컴퓨터가 상호작용하는 방식을 뜻한다. 즉 작업 명령은 사용자가 컴퓨터 키보드 등을 통해 문자열의 형태로 입력하며, 컴퓨터로 부터의 출력 역시 문자열 형태로 출력한다.

 Ex ) windows - CMD , Mac, Ubunto, Centos, etc: Terminal

 Basic Command: 기초 명령어 

절대 경로 : 내가 가고자하는 루트부터 시작한 위치경로

상대경로 : 위치를 내 현재 위치의 상대적인 경로

 ls : 현재 디렉토리에 있는 폴더와 파일으 확인하는 명령어 

    -l 옵션: 폴더, 파일들의 정보를 자세히 출력한다.
    -d 옵션: 디렉토리를 검색하는 옵션

    ls -l *.txt : 텍스트 확장명으로 된 파일만 출력 

cd : 경로를 이동 

    cd .. : 현재 위치에서 한단계 위의 경로로 이동

mv : 파일의 이름을 바꾸거나 파일을 다른 디렉토리로 이동하는 명령어

    mv 기존파일명 새로운파일명

    mv 위치/기존파일명 새로운위치/기존파일명

 mkdir : 현대 데렉토리에 새로운 디렉토리를 생성하는 명령어 

    -p 디렉토리를 만들면서 한번에 하위 디렉토리는 생성하는 옵션

    mkdir -p /test01/test02/test03

 touch : 파일의 용량이 0인 파일을 생성하는 명령어 

 rm : 파일이나 디렉토리를 삭제하는 명령어

    -r 옵션: 현재 디렉토리 밑에 있는 모든 파일과 디렉토리를 삭제한다.
    -f 옵션: 삭제 여부를 물어보지 않고 삭제한다.

 head : 문서의 상위 몇줄을 출력하는 명령어 

     ex ) head -20 list.txt : 상위 20줄을 출력

 tail : 문서의 하위 몇줄을 출력하는 명령어이다.

Text Editor : Vim

vi 명령어

커서이동

$ : 커서를 줄 맨끝으로 이동합니다.

0 : 숫자 0을 누르면 그 줄의 맨 앞으로 커서가 이동합니다. 빈칸을 포함하여 맨 앞으로 이동합니다.

gg : 커서를 문서의 맨 처음 줄로 위치합니다.

G : 커서를 문서의 맨 마지막 줄으로 위치합니다.

w : 다음 단어의 첫 글자로 이동시킵니다. 특수문자 발견시 멈춥니다.

W : 다음 단어의 첫 글자로 이동시킵니다. 단어를 공백으로 구분합니다. 따라서 공백 이후를 다음 단어로 취급합니다.

입력

명령에서 대문자 명령을 소문자 명령의 반대의 기능을 하게 됩니다.

a : 현재 커서의 다음에 글자를 입력할 수 있습니다.

A : 현재 줄의 맨 끝에 글자를 입력할 수 있습니다.

i : 현재 커서에서 글자를 입력할 수 있습니다.

I : 현재 줄의 맨 앞에 글자를 입력할 수 있습니다.

삭제,되돌리기

d : 선택 영역을 삭제합니다. 이떄 선택은 위에 등장한 v로 선택합니다.

dw : 현재 커서부터 다음 단어(공백 포함, 특수문자 제외)까지 모두 지웁니다. 이것을 응용하면 bdw가 왜 한 단어를 삭제하는지 알 수 있습니다.

bdw : 현재 단어 삭제 (b - 단어 앞으로 이동, dw : 다음 단어까지 삭제)

dd : 한줄 전체를 삭제합니다.

ndd : n개의 줄을 한번에 삭제시킵니다.

u : 만약 잘못 삭제시켰다면 u를 눌러서 되돌릴 수 있습니다. 삭제 뿐만 아니라 모든 명령에서 실수했다 싶으면 u로 되돌리시면 됩니다.

복사 & 붙여넣기

y : 선택한 영역을 복사합니다. 선택은 v로 선택할 수 있습니다.

yw : 현재부터 한 단어의 끝까지 복사할 수 있습니다.

byw : 현재 커서가 위치한 이 단어를 복사합니다.

yy : 한줄 복사를 할 수  있습니다.

nyy : n줄 복사

p : 현재 커서 아랫줄에 복사한 텍스트 붙여넣기

기본 명령어:를 누른상태

: set nu - 줄 표시를 합니다. 코드에서 라인을 확인하고 싶다면 아래의 명령으로 볼 수 있습니다. 혹은 set number를 full로 쳐주어도 됩니다.

: set nonu - 줄 표시를 해제합니다. 더 이상 라인을 보고싶지 않으면 이 명령으로 해제할 수 있습니다.

: 숫자 - 한번에 라인을 이동하고 싶으면 숫자를 치고 이동할 수 있습니다.

: w - 지금 수정된 사항을 write한다는 것으로 저장을 의미합니다. 하지만 vi 프로그램을 닫지는 않습니다.

: wq - 수정된 사항을 저장하고 나가겠다(quit)는 명령입니다. vi 프로그램을 저장함과 동시에 닫는 명령입니다.

: q! - 어떨때는 vi 편집기가 수정했는데 저장하지 않는다는 이유로 놓아주지 않는 경우가 있는데 이떄 저장하기 싫다면 q!를 사용하면 됩니다.

: set ts=n - 탭의 간격을 조절하는 명령어로 n은 숫자입니다. 예를 들어 set ts=4인 명령을 내린다면 탭의 간격은 공백 4개와 같은 간격을 갖습니다.

창분할 - 2가지가 존재합니다.

: sp - 현재 창을 평행 분할합니다.  다음 창은 Ctrl+w,w (Ctrl 누른 상태에서 w를 두번 누름)로 이동할 수 있습니다.

: sp [filename] : 파일 이름을 지정해주면 그 파일이 열립니다.

: vs - 현재 창을 수직 분할 합니다. 마찬 가지로 다음 창은 Ctrl+w,w로 이동할 수 있습니다.

: vs [filename] : 마찬가지로 파일 이름을 지정해서 현재 파일이 아닌 다른 파일을 열 수 있습니다.

Variable: 변수

변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말한다.

ler var result = 10;

// result : 변수이름
//10 : 변수 값

할당: 변수에 값을 할당하는것 

참조: 변수에 저장된 값을 읽어 들이는것 

변수 선언: Variable declaration

변수를 선언하는 것은 값을 저장하기 위한 메모리 공간을 확보하고 , 확보된 메모리 공간의 주소를 연결해서 값을 저장한다는 뜻이다.

조금더 자세히 변수를 선언 과정을 보면, 자바스크립트에서 변수 선언은 값을 저장하기 위해 메모리 공간을 확보하는것이다. 아직 변수에 값을 할당하지 않은 상태를 의미한다. 변수의 선언에 의해서 메모리 공간이 확보된 상태는 비어있는 상태가 아닌 자바스크립트 엔진에 의해서 Undefined라는 값이 할당되어 초기화 된 상태이다. 

그래서 많이 볼수 있는 오류가 아래 처럼 변수를 선언만 하고 값을 할당하지 않으면 Undefined라는 값을 출력되는 이유다.

let result; 	//선언만 하고 값을 할당하지 않은 상태

result		//호출
<< undefined

** 만약 값을 선언하지 않고 호출하게 되면 ** ReferenceError: Can't find variable **오류가 발생한다. **

값의 할당: Assignment

변수의 값을 할당할때는 "=" 를 사용한다 할당연산자는 우변의 값의 좌변의 변수에 할당한다. 

let result; // 변수 선언

result = 10; // 변수 할당

**변수선언은 소스코드가 실행되는 시점인 이전에 실행되고, 값의 할당은 소스코드가 순차적으로 실행되는 시점인 런타임에 실행된다.**

즉, 자바스크립트 파일을 실행시키면 자바스크립트 엔진은 파일을 읽어 코드를 실행하는데 코드를 읽기 전에 선언된 변수를 먼저 실행하고, 그다음 코드를 순차적으로 읽으면서 변수의 값을 할당한다. 

console.log(result) // << undefined (선언이 된상태, 값을 할당하기전)

let result; // 변수 선언
result = 10; //값의 할당

console.log(result) // << 10

Function: 함수 

함수는 일련의 과정을 코드로 구현하고 코드블록을 감싸서 하나의 실행 단위로 정의한 것이다.

함수로 입력을 전달 받는 변수를 매개변수, 입력은 인수 출력을 반환값이라고 한다

function add(x,y){ //add: 함수이름 , x,y : 매개변수
	return x + y; //x+y:반환값
}

add(2,5); // 2,5: 인수            //함수호출

함수는 정의만 한다고해서 실행되지않고, 함수호출을 통해서 함수를 실행 할 수 있다.

인수를 매개변수를 통해 함수에 전달하면서 함수의 실행을 지시해야한다. 이름 함수 호출이라한다. 

호출을 하면 코드 블록 { ...}가 실행되고 실행결과 즉 반환값을 반환한다. 

함수를 사용하는 이유

동일한 작업을 반복적으로 실행한다면 같은 코드를 중복해서 여러번 작성해야한다.

이떄, 함수를 사용하면 효율적이다. 함수는 몇번이든 호출을 통해서 코드를 재사용이 가능하다.

또한 코드 중복을 감소시킬수있고, 유지보수의 편의성, 코드의 신뢰성을 높이는 효과가 있다. 

적절한 함수의 이름은 함수 내부코드를 이해하지 않고도 함수의 역할을 파악할수 있어 코드의 가독성을 높인다

함수의 정의 

함수 정의 방식 

function addNum(x,y){ //함수 선언문
	return x + y;
} 


var addNum = function(x,y){ // 함수 표현식 
	return x+y;
}

var addNum = new Function(x,y, 'return x+y'); //  Function 생성자 함수



var addNum = (x, y) => x, y;  // 화살표함수 (ES6)

** 변수는 선언, 함수는 정의한다고 표현. 함수 선언문이 평가되면 식별자가 암묵적으로 생성되고 함수 객체가 할당된다. 따라서  ECMAScript. 사양에서도 변수에는 선언, 함수에는 정의 라고 표현한다.**

Loop Statement: 반복문

반복문은 조건식의 평가 결과가 참인 경우 코드블록이 실행된다. 그후 조건식을 다시 평가하여 여전히 참인 경우 코드블록을 다시 실행한다.

for (변수 선언문 또는 할당문; 조건식; 증감식;){
	조건식이 참인 경우 반복 실행될문;
}

for (var i = 0; i < 2; i++){
	console.log(i);
}

**어떤 식도 선언하지 않으면 무한루프가 된다.

for(;;){
	...
} //무한루프

for 중첩문 

for(let i = 2; i<=9; i++){
    for(let j = 1; j <= 9; j++){
        let sum = i * j;
        document.write(i + "*" + j + "=" + sum);
        document.write("<br>");
    }
}//for문 중첩으로 구구단을 출력

While Statement: while문

while문은 주어진 조건식의 평가 경과가 참이면 코드블록을 계속반복해서 실행된다. 

**for문은 반복횟수가 명확할때 사용,  while문은 반복횟수가 불명확할때 사용

while문은 조건물의 평가 결과가 거짓이 되면 코드블록을 실행하지 않고 종료된다. 만약 조건식의 평가 결과가 불리언 값이 아니면 불리언 값으로 강제 변환하여 놀리적 참, 거짓을 구별한다. 

var count = 0;


while(count<3){
	console.log(count);
    count++
}

do...while 문

do...while문은 코드블록을 먼저 실행하고 조건식을 평가한다. 따라서 코드블록은 무조건 한 번 이상 실행된다.

var count = 0 

do{
	console.log(count);
    count++;
}while (count<3);