본문 바로가기

Script/JavaScript38

[JavaScript] Chapter 38. 추상 클래스, 추상 메소드 ES6 부터 JavaScript에서 class 문법을 지원하게 되었다. 그러면서 JavaScript로도 객체지향 프로그래밍을 하기 수월해졌다. (이전에는 생성자 함수와 prototype으로 구현하였다.) 그렇지만, 여전히 Java와 같은 언어 만큼 객체지향을 지원한다고 할 수 없다. 이를테면, JavaScript에서는 추상 클래스와 추상 메소드를(abstract) 문법적으로 지원하지 않는다. 그럼에도 JavaScript 기본 문법을 활용하여 추상 클래스와 추상 메소드를 구현할 수 있는 방법을 알아보자. 추상 메소드와 추상 클래스의 개념 먼저 추상 클래스와 추상 메소드의 개념에 대해 알아보자. 추상 메소드란 부모 클래스에서 정의하며, 자식 클래스에서 반드시 오버라이딩해야만 사용할 수 있는 메소드를 말한다... 2023. 3. 31.
[JavaScript] Chapter 37. 자바스크립트의 private 정보를 은닉화할 수 있는 방법 1. underscore (_) 필드앞에 밑줄을 붙여서 외부외서 접근할 수 없는 숨겨진 필드임을 나타내는 방식이다. const obj = { _private: 'foo', get public() { return this._private; }, } obj._private // 'foo' obj.public // 'foo' 자바스크립트의 모든 객체는 외부에서 접근이 허용되기 때문에 위의 예시처럼 실제로 은닉이 되지는 않는다. 하지만 쉽게 적용할 수 있고 널리 알려진 컨벤션이라 앞에 밑줄이 붙은 변수나 프로퍼티를 종종 볼 수 있다. 그렇지만 시간이 지나면서 다른 방법들도 등장했고 만약 모듈을 만들어서 배포하는 경우, 사용자들이 모든 필드에 접근할 수 있는 것은 큰 문제이기 때문에.. 2023. 3. 30.
[JavaScript] Chapter 36. 고차 함수와 콜백(Callback) – 일급 객체란 함수는 일급 객체이다. 자바스크립트에는 특별한 대우를 받는 일급 객체가 있다. 대표적인 일급 객체 중 하나가 바로 함수이다. 다음 조건을 만족하는 객체를 일급 객체라고 한다. 무명의 리터럴로 생성할 수 있다. (런타임 생성이 가능하다.) 런타임(할당 단계)에 함수 리터럴이 평가되어 함수 객체가 생성되고 변수에 할당된다. 변수나 자료구조(배열의 요소나 객체의 속성값)에 할당 할 수 있다. 다른 함수의 인자로 전달될 수 있다. 다른 함수의 결과로서 리턴될 수 있다. 자바스크립트 함수는 다음 위 조건을 모두 만족하므로 일급 객체이다. 함수는 객체이다. 함수가 일급 객체라는 것은 함수를 객체와 동일하게 사용할 수 있다는 의미이다. 함수는 객체이다. 함수를 객체처럼 사용할 수 있다. 변수, 배열 요소, 객체 값에.. 2023. 2. 7.
[JavaScript] Chapter 35. 일반 함수 vs 익명 함수 자바스크립트는 유연한 언어이다. 따라서 다른 일반적인 언어(Java, C)와 다르게, 함수를 선언하고 사용하는데 있어 굉장한 자유로움이 주어진다. 이는 능숙한 사람에게는 굉장한 이점으로 주어질 수 있지만, 미숙한 사람에게는 넘어야 할 허들이 되기도 한다. 자바스크립트에서 함수 선언 방식은 기본적으로 일반 함수와 익명 함수로 나눌 수 있다. 1. 일반 함수 일반적으로 다른 언어에서 사용하는 함수와 동일하다. 사용방식 또한 동일하며, 코드를 조금이라도 읽을 수 있는 사람이라면 매우 쉽게 이해할 수 있는 함수이다. 일반 함수는 다른 말로 함수 선언식이라고도 할 수 있다. function 함수명(){ 함수 로직 } // 예시 function SayHello(){ console.log("hello!"); } Sa.. 2023. 1. 26.
[JavaScript] Chapter 34. 맵 객체(Map Object) 자바스크립트로 앱을 개발할 때 꼭 사용하는 자료형이 바로 객체(Object)다. 값을 키와 값으로 묶어 저장하고 조회하는 기능은 어떤 앱을 개발할 때나 쓰게 되는 경우가 많다. 이번 포스팅에서는 자바스크립트 객체를 좀 더 뺀-씨하게 사용할 수 있는 ES6 문법인 맵 객체에 대해 알아보려 한다. 맵 객체 메소드 맵 객체는 기존 객체와는 다르게 메소드만을 이용해 값을 넣고 뺀다. 기본적으로 삽입, 조회, 삭제를 할 수 있는 메소드들은 다음과 같다. let max = new Map(); // set으로 맵 객체에 삽입 max.set('id', 0); max.set('이름', '마이클'); max.set('전공', '영문학'); max.set('나이', 25); // 이차원 배열로 넘겨주는 것도 가능 let m.. 2023. 1. 16.
[JavaScript] Chapter 33. 객체 복사하기 - 앝은 복사, 깊은 복사 자바스크립트객체(Object)는 Key(키):Value(값)의 1개 또는 여러 쌍으로 구성된다. Value(값)에는 숫자, 문자열 뿐만아니라 또 다른 객체(Object)를 넣을 수 있다. 자바스크립트객체를 복사하는 3가지 방법에 대해 알아본다. ​ 성명, 나이, 차량정보를 저장하고, 차량정보에는 엔진과 배기량을 저장한다. 자바스크립트객체를 복사하는 방법에는 크게 3가지가 있다. ​ ​ A방법은 복제없이 참조하는 변수만 만들어 앝게 복사한다. let grandeur = { engine: "gdi", cc: 3000 }; let aa = { name: "kildong", age: 20, car: grandeur }; let bb = aa; // Object Shallow Copy, 하위 Object Shal.. 2023. 1. 16.
[JavaScript] Chapter 32. Clean Code 작성법 클린코드를 만드는 것은 개발할 때 중요하다. 왜냐하면 개발할 때 여러명의 개발자와 함께 협업하기 때문에 읽기 쉽고 유지보수 하기도 좋아야하기 때문이다. 1. 화살표함수로 function 축약하기 ES6의 가장 유명한 함수 표현 방법인 화살표함수다. 긴 기존의 함수호출 return 방식을 화살표 함수를 사용하면 역시 간결하고 보기 좋게 축약할 수 있다. 하지만 재사용은 불가능하기 때문에, 매번 새롭게 작성해줘야 한다. // 기존의 함수 function getSize(width, height) { return width * height }; // 화살표 함수 getSize = (width, height) => (width * height) 2. 삼항연산자 사용 이런 if, else문은 삼항연산자를 사용하면 .. 2023. 1. 12.
[JavaScript] Chapter 31. 배열을 다루는 메소드_map, flatMap, filter, reduce map map() 메소드는 새로운 배열을 리턴하는 메소드다. 어떻게? 순서대로 주어진 함수를 실행한 return 값을 모아서 새로운 배열을 만들어 반환한다. 그렇기 때문에 원본 배열을 변경하지 않고 새로 가공한 배열을 얻을 수 있다. const arr = [1, 2, 3, 4 ,5]; const mapArr = arr.map(v => v); map() 메소드에 들어가는 인자는 총 세가지이다. 현재 값 index 값 현재 요소가 속한 배열 하지만 인자 세개 모두 꼭 입력해야하는 것은 아니다. map() 메소드를 사용하면 작성해줘야할 조건이 많은 for문을 사용하지 않아도 되기 때문에 코드가 간결해진다. 간단하게 가공할 수 있는 콜백함수를 사용한다면 map() 메소드 안에서 화살표 함수로 작성해도 되지만, .. 2023. 1. 12.
[JavaScript] Chapter 30. for ...in, for ...of의 차이 결론부터 말하면 for...in은 객체의 반복에서 사용되고, for...of는 배열의 반복에서 사용된다. for …in 문 객체의 열거 가능한 '속성들'을 순회할 수 있도록 해줌 객체의 key값에 접근 가능, value값에는 직접 접근 불가 모든 객체에서 사용 가능 for ...in문은 객체의 모든 '열거할 수 있는 속성들'을 순회할 수 있도록 해준다. (keys는 열거 가능한 속성, valueOf는 열거 불가능한 속성) 그렇기 때문에 for ...in 문은 객체의 key 값에는 접근 가능하지만, value 값에 직접적으로 접근하는 방법은 제공하지 않는다. for ...in 문을 사용해 배열과 객체의 요소에 접근하는 예제를 살펴보자. 위에서 언급했듯이 key 값에만 접근이 가능하기 때문에, 배열에서는 i.. 2023. 1. 10.
[JavaScript] Chapter 29. Array map 값을 여러개 가지고 있는 배열에서 모든 값을 꺼내고자 할 때, 꺼내는 방법은 정말 다양하게 알려져 있다. 이러한 배열에서 값 꺼내는 방법 중 map( ) 을 다뤄보도록 하자. map 정의 Array.prototype.map ( callbackfn [ , thisArg ] ) 주로 주어진 배열의 값을 재정의 할 때, 사용하는 방법으로 ECMA에는 "주어진 배열의 값들을 오름차순으로 접근해 callbackfn을 통해 새로운 값을 정의하고 신규 배열을 만들어 반환한다"라고 정의되어있다. const numbers = [1, 2, 3, 4, 5]; const result = numbers.map(number => number * number); console.log(numbers); // [1, 2, 3, 4, .. 2023. 1. 10.

티스토리툴바