명왕성의 공전기록

자바스크립트 내에서 상속 패턴과 전략 패턴은 모두 객체 지향 프로그래밍(OOP)를 지원하는 패턴이다. 둘다 코드의 재사용성을 높이며, 유지보수성을 향상시킨다는 장점이 있다. 두 패턴의 차이점에 대해 간단히 얘기하면, 상속 패턴의 경우, 부모 클래스로부터 다른 클래스가 상속받아 부모 클래스의 메서드나 프로퍼티를 정적으로 재사용하는 패턴이며, 전략 패턴의 경우, 동일한 문제를 해결하기 위해 다양한 알고리즘을 가진 객체들을 정의하고 이를 동적으로 교환하여 사용하는 패턴이다. 상속 패턴 (extends) 상속 패턴의 경우, 부모 클래스(기존 클래스)를 상속해 새로운 클래스를 생성하면 상속받은 부모 클래스의 속성과 메서드를 사용할 수 있다고 위에서 언급했다. 이때, 자식 클래스에서 부모 클래스의 메소드를 재정의 ..

class class란 ES6(2015)부터 추가된 기능 중 하나로 이를 통해 객체를 생성하는 것이 가능하다. 일반적으로 class는 생성자 함수(constructor), 프로퍼티, 메소드 등으로 이루어져 있고, contructor 함수는 객체가 생성될 때 실행되며 객체의 프로퍼티를 초기화하는 역할을 하며, new 연산자를 사용하여 해당 class 객체를 생성할 수 있다. 어떤 면에서 class는 '어떤 것'을 만들기 위한 레시피와 같은데, 갑자기 이삭토스트가 먹고 싶으니 토스트를 기준으로 설명한다. class Toast { constructor(bread, egg) { // 생성자 함수 this.bread = bread // 프로퍼티 this.egg = egg // 프로퍼티 } cook() { // 메..

This javascript 에서 함수의 this 키워드는 다른 언어들과 비교하여 조금 다르게 동작하며, 대부분의 경우 this의 값은 함수를 호출하는 방법에 의해 결정된다고 한다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this this - JavaScript | MDN JavaScript에서 함수의 this 키워드는 다른 언어와 조금 다르게 동작합니다. 또한 엄격 모드와 비엄격 모드에서도 일부 차이가 있습니다. developer.mozilla.org 여기서 this가 함수를 호출하는 방법에 의해 결정된다는 말에 집중해보자. // 예시 객체 let ex = { is : "this!", test1 : functio..

이전에 배열에서 스프레드 연산자를 활용하는 방법에 대해서 설명한 적 있다. 오늘은 객체에서 스프레드 연산자를 활용하는 방법까지 포함하여 포스팅해보려 한다. 배열에서의 스프레드 연산자 배열 복제 let arr = [1,2,3] let copyArr = [...arr] console.log(copyArr) // [ 1, 2, 3 ] // 기존 arr 변경 arr.pop() console.log(arr) // [ 1, 2 ] console.log(copyArr) // [ 1, 2, 3 ] 배열의 복제는 스프레드 연산자를 활용하여 위와 같이 사용할 수 있다. 기존의 배열이 변경되더라도 복제한 배열이 변경되지 않는다. (참조값 복사가 아닌 값 복사라는 의미다.) 스프레드 연산자를 활용한 구조분해할당 (rest 문..

배열 관련 메서드 : map / filter / sort / reduce 문자열 관련 메서드 : slice / substring / substr/ split / join slice / substring / substr 차이 map map 메서드 역시 배열을 순회하는 메서드이다. 다만, 모든 순회(반복) 과정에서 return 값이 존재해야 하며, 없을 경우 'undefined'를 반환한다. // map 예시 const arr = [1,2,3,4,5] arr.map((el) => { if(el % 2 == 0 ){ // 부여한 조건 return el } }) // 반환값 : [ undefined, 2, undefined, 4, undefined ] 추가적으로 꼴보기 싫은 undefined를 단번에 제외하려면..

break : 원하는 구간에서 반복문 종료 // break 예시 for(let i = 0 ; i < 5 ; i++){ if(i===2){ break // break의 경우 switch 반복문에서 항상 사용 } console.log(i) // 0 1 } continue : 해당 구간의 반복문을 실행하지 않음 (생략) // continue 예시 for(let i = 0 ; i < 5 ; i++){ if(i===2){ continue } console.log(i) // 0 1 3 4 } 반복문의 여러 문법 for ~ in // Key ~ in 예시 const obj = { name : 'otter', age : 30 } for(let key in obj){ console.log(key, obj[key]) //..

Shallow Copy & Deep Copy (얕은 복사 & 깊은 복사) 얕은 복사 : 객체의 주소값(참조값)까지만 복사 깊은 복사 : 객체의 실제 값까지 복사 // 객체 안에 객체가 있을 경우에도 원본과의 참조가 완전히 끊어진 객체를 말함 이중 객체나 이중 배열로 이루어진 경우, 얕은 복사로는 원하는 복사가 되지 않으니, 깊은 복사를 활용해줄 필요가 있다. 깊은 복사 let origin = { name : "otter", favoriteFood : { first : "sushi", second : "hamburger" } } 라고 한다면, const copy = JSON.stringify(origin) const deepCopy = JSON.parse(copy) 하는 형태로 깊은 복사를 해줄 수 있음 ..

// isNaN, Number.isNaN // 숫자 판별에 주로 사용 isNaN("1") isNaN("asd") // NaN 값만 판별 Number.isNaN(NaN) // indexOf const arr= ['a','b','c'] arr.indexOf("a") // 있을 시 인덱스 반환 arr.indexOf("e") // 없을 시 -1 반환 // new Array // 특정길이의 배열을 만들 때 사용 가능 const arr2 = new Array(5) arr2 // fill 빈공간을 채워주는 메서드 arr2.fill("a")