Way in Wayne

JavaScript

• [Javascript]Symbol

  사부작사부작/Javascript 2022. 4. 25. 00:01

  #모던자바스크립트_딥다이브 스터디를 진행하면서 정리한 내용입니다. 심벌이란? 심벌은 ES6에서 도입된 7번째 데이터 타입으로 변경 불가능한 원시 타입의 값이다. 심벌 값은 다른 값과 중복되지 않는 유일무이한 값이다. 따라서 주로 이름의 충돌 위험이 없는 유일한 프로퍼티 키를 만들기 위해 사용한다. 심벌 값의 생성 1. Symbol 함수 심벌 값은 Symbol 함수를 호출하여 생성한다. 이때 생성된 심벌 값은 외부로 노출되지 않아 확인할 수 없으며, 다른 값과 절대 중복되지 않는 유일무이한 값이다. // Symbol 함수를 호출하여 유일무이한 심벌 값을 생성한다. const mySymbol = Symbol(); console.log(typeof mySymbol); // symbol // 심벌 값은 외부로 ..

  Read More
• [Javascript]배열(3) 고차함수

  사부작사부작/Javascript 2022. 4. 19. 21:45

  #모던자바스크립트_딥다이브 스터디를 진행하면서 정리한 내용입니다. 고차함수 고차함수는 함수를 인수로 전달받거나 함수를 반환하는 함수를 말한다. 고차 함수는 외부 상태의 변경이나 가변 데이터를 피하고 불변성을 지향하는 함수형 프로그래밍에 기반을 두고 있다. 함수형 프로그래밍은 순수함수와 보조 함수의 조합을 통해 로직 내에 존재하는 조건문과 반복문을 제거하여 복잡성을 해결하고 변수의 사용을 억제하여 상태 변경을 피하려는 프로그래밍 패러다임이다. 즉, 순수 함수를 통해 부수 효과를 최대한 억제하여 오류를 피하고 프로그램의 안전성을 높이려는 것이다. 1. sort sort 메서드는 배열의 요소를 정렬한다. 원본 배열을 직접 변경하여 정렬된 배열을 반환한다. sort 메서드는 시본적으로 오름차순으로 정렬한하다. ..

  Read More
• [Javascript]배열(2) 메서드

  사부작사부작/Javascript 2022. 4. 13. 09:52

  #모던자바스크립트_딥다이브 스터디를 진행하면서 정리한 내용입니다. 배열 메서드 자바스크립트는 배열을 다룰 때 유용한 다양한 빌트인 메서드를 제공한다. 배열 메서드는 결과물을 반환하는 패턴이 두 가지이므로 주의가 필요하다. 배열에는 원본 배열을 직접 변경하는 메서드(metator method)와 원본 배열을 직접 변경하지 않고 새로운 배열을 생성하여 반환하는 메서드(accessor method)가 있다. const arr = [1]; // push 메서드는 원본 배열(arr)을 직접 변경한다. arr.push(2); console.log(arr); // [1, 2] // concat 메서드는 원본 배열(arr)을 직접 변경하지 않고 새로운 배열을 생성하여 반환한다. const result = arr.con..

  Read More
• [Javascript]배열(1)정의, 특징, 생성 방법

  사부작사부작/Javascript 2022. 4. 12. 00:09

  #모던자바스크립트_딥다이브 스터디를 진행하면서 정리한 내용입니다. 배열이란? 배열은 여러 개의 값을 순차적으로 나열한 자료구조다. 자바스크립트는 배열을 다루기 위한 유용한 메서드를 다수 제공한다. 다음은 배열 리터럴을 통해 배열을 생성한 예이다. const arr = ['apple', 'banana', 'orange']; 1. 요소(element) 배열이 가지고 있는 값을 요소라고 하고, 자바스크립트의 모든 값은 배열의 요소가 될 수 있다. 배열의 요소는 배열에서 자신의 위치를 나타내는 0 이상의 정수인 인덱스를 갖는다. 이 인덱스로 배열의 특정 요소에 접근할 수 있다. 배열의 맨 앞 요소가 0이며, 뒤로 갈수록 하나씩 값이 오른다. 인덱스가 1이 아닌 0부터 시작하는 것에 주의하자. 또한 인덱스를 사용..

  Read More
• [Javascript] Class (2) 인스턴스, 추가 기능, 상속

  사부작사부작/Javascript 2022. 4. 4. 23:59

  #모던자바스크립트_딥다이브 스터디를 진행하면서 정리한 내용입니다. 클래스의 인스턴스 생성 과정 class Person { // 생성자 constructor(name) { // 1. 암묵적으로 인스턴스가 생성되고 this에 바인딩된다. console.log(this); // Person {} console.log(Object.getPrototypeOf(this) === Person.prototype); // true // 2. this에 바인딩되어 있는 인스턴스를 초기화한다. this.name = name; // 3. 완성된 인스턴스가 바인딩된 this가 암묵적으로 반환된다. } } 1. 인스턴스 생성과 this 바인딩 1) new 연산자와 함께 클래스를 호출하면 클래스 안의 constructor의 코드가..

  Read More
• [Javascript]Class (1)정의와 메서드

  사부작사부작/Javascript 2022. 3. 29. 21:52

  #모던자바스크립트_딥다이브 스터디를 진행하면서 정리한 내용입니다. 클래스는 프로토타입의 문법적 설탕인가? 자바스크립트와 같은 프로토타입 기반 객체지향 언어는 클래스가 필요 없는 객체지향 프로그래밍 언어다. ES5에서는 클래스 없이도 다음과 같이 생성자 함수와 프로토타입을 통해 객체지향 언어의 상속을 구현할 수 있다. // ES5 생성자 함수 var Person = (function () { // 생성자 함수 function Person(name) { this.name = name; } // 프로토타입 메서드 Person.prototype.sayHi = function () { console.log('Hi! My name is ' + this.name); }; // 생성자 함수 반환 return Perso..

  Read More
• [Javascript] 클로져

  사부작사부작/Javascript 2022. 3. 29. 14:44

  #모던자바스크립트_딥다이브 스터디를 진행하면서 정리한 내용입니다. 렉시컬 스코프 자바스크립트 엔진은 함수를 어디서 호출했는지가 아니라 함수를 어디에서 정의했는지에 따라 상위 스코프를 결정한다. 이를 렉시컬 스코프(정적 스코프)라고 한다. const x = 1; function foo() { const x = 10; bar(); } function bar() { console.log(x); } foo(); // ? bar(); // ? 위 예제에서 bar 함수의 결과 값은 10이 아니라 1이다. 이것은 자바스크립트 엔진이 렉시컬 스코프를 따르기 때문이다. 렉시컬 환경의 외부 렉시콜 환경에 대한 참조에 저장할 값, 즉 상위 스코프에 대한 참조는 함수 정의가 평가되는 시점에 함수가 정의된 환경(위치)에 의해 ..

  Read More
• [Javascript]this

  사부작사부작/Javascript 2022. 3. 26. 18:52

  #모던자바스크립트_딥다이브 스터디를 진행하면서 정리한 내용입니다. this 키워드 객체는 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합적인 자료구조다. 따라서 동작을 나타내는 메서드는 자신이 속한 객체의 상태를 참조하고 변경할 수 있기때문에 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. 객체 리터럴 방식으로 생성한 객체는 메서드 내부에서 자신이 속한 객체를 가리키는 식별자를 재귀적으로 참조할 수 있다. const circle = { radius: 5, getDiameter() { // 이 메서드가 자신이 속한 객체의 프로퍼티나 다른 메서드를 참조하려면 // 자신이 속한 객체인 circle을 참조할 수 있어야 한다. return 2 * circle.r..

  Read More