지난 포스팅에서 이어집니다. [Javascript] 클래스와 객체지향 프로그래밍 1. 객체 공장 만들기 청소부들의 정보가 담겨 있는 객체를 만들어 데이터를 관리한다고 생각해 보자. 두 명의 청소부가 있을 때 다음과 같이 객체를 만들 수 있을 것이다. let cleaner1 = { name: 'Jin', d sulki.tistory.com 지난 포스팅에서 다음과 같이 클래스 Cleaner와 그 클래스를 상속받는 서브클래스 CleanerPlus를 생성했다. class Cleaner { constructor(name, department) { this.name = name; this.department = department; } clean() { return `${this.name} has cleaned t..
1. 객체 공장 만들기 청소부들의 정보가 담겨 있는 객체를 만들어 데이터를 관리한다고 생각해 보자. 두 명의 청소부가 있을 때 다음과 같이 객체를 만들 수 있을 것이다. let cleaner1 = { name: 'Jin', department: 'lobby', clean: function() { return `Jin has cleaned the lobby.` } } let cleaner2 = { name: 'Kim', department: 'bedroom', clean: function() { return `Kim has cleaned the bedroom.` } } 그렇지만 청소부가 수십 명, 수백 명이 된다면 어떨까? 담아야 할 정보의 개수(프로퍼티의 개수)가 수십개로 늘어난다면 어떨까? 매번 객체들..
함수들을 입력받아 입력받은 함수들을 연달아 결합하는 함수 'pipe'를 만들어 보자. //출력 예시 function square(num) { return num * num; } function add5(num) { return num + 5; } function mul3(num) { return num * 3; } function isOdd(num) { return num % 2 !== 0; } let output = pipe(add5, square); console.log(output(4)); // --> 81 output = pipe(square, add5, mul3); console.log(output(4)); // --> 63 output = pipe(square, mul3, add5, add5,..
1. DOM(Document Object Model) 2. CRUD(Create-Read-Update-Delete) Create: 요소 추가하기 Append: 요소를 부모와 연결하기 Read: 요소를 조회하기 Update: 요소를 갱신하기 Delete: 요소를 삭제하기 1. DOM(Document Object Model) DOM은 html 요소를 객체(object)처럼 조작할 수 있는 모델이다. HTML은 한번 작성되면 페이지를 옮겨 가지 않는 한 바뀌지 않지만, DOM을 이용하면 사용자의 행동에 따라 html 요소를 동적으로 조작할 수 있게 된다. 2. CRUD(Create-Read-Update-Delete) DOM을 이용할 때 가장 기본이 되는 것은 html 엘리먼트를 만들고, 조회하고, 갱신하고, ..
1. 스코프 1-1. let, var, const와 스코프 2. 클로저 2-1. 클로저의 활용 1. 스코프 스코프란 변수 접근 규칙에 따른 유효 범위를 말한다. 함수 또는 블록에 의해서 나뉘어진 범위에 울타리를 치는 것과 같다. 스코프에서 핵심이 되는 규칙은 안쪽 스코프는 바깥쪽 스코프에서 선언된 변수에 접근할 수 있지만 바깥쪽 스코프는 안쪽 스코프에서 선언된 변수에 접근할 수 없다는 것이다. 가장 바깥의 스코프는 전역 스코프(global scope)라고 불린다. 이와 구별되는 개념은 지역 스코프(local scope)로, 전역 스코프가 아닌 스코프는 모두 지역 스코프다. 지역 스코프에서 선언된 지역 변수는 전역 스코프에서 선언된 전역 변수보다 높은 우선순위를 가진다. 즉, 같은 이름으로 선언된 변수라면..
1. 원시 자료형 vs 참조 자료형 2. 원시 자료형 2-1. 변경 불가능한 값 2-2. 변수에 실제 값을 저장 2-3. 값에 의한 참조 3. 참조 자료형 3-1. 변경 가능한 값 3-2. 변수에 참조 값을 저장 3-3. 참조에 의한 전달 1. 원시 자료형 vs 참조 자료형 원시 자료형 참조 자료형 타입 숫자, 문자열, 불리언, BigInt, null, undefined, 심벌 객체(배열 포함) 변경 변경 불가능(immutable) 변경 가능(mutable) 변수 할당 방식 변수에 실제 값을 저장 변수에 참조 값을 저장 복사 방식 원시 값 자체를 복사(값에 의한 전달) 참조 값을 복사(참조에 의한 전달) 2. 원시 자료형 2-1. 변경 불가능한 값 원시 자료형은 변경 불가능한 값이다. 변수에 값을 한번 ..
1. 객체란 2. 객체 리터럴 3. 프로퍼티 4. 프로퍼티 추가과 삭제 1. 객체란? 자바스크립트는 객체 기반의 프로그래밍 언어이다. 원시 값을 제외한 나머지 값(함수, 배열, 정규 표현식 등)은 모두 객체다. 2. 객체 리터럴 객체를 생성하는 가장 일반적인 방법은 객체 리터럴을 사용하는 것이다. 객체 리터럴은 {} 안에 0개의 프로퍼티를 정의하고 변수에 할당한다. var person = { lastName: 'Lee', firstName: 'Jeanne', sayHello: function(){ console.log(`Hello! My name is ${firstName} ${lastName}.` } } 3. 프로퍼티 객체는 프로퍼티의 집합이고, 프로퍼티는 키와 값으로 이뤄져 있다. 프로퍼티에 접근하기..
1. 자바스크립트에서의 배열 2. 배열 기본 메서드 2-1. isArray 2-2. indexOf 2-3. includes 2-4. push, pop, unshift, shift 2-5. slice 2-6. Splice 2-7. split, join 2-8. concat 1. 자바스크립트에서의 배열 자바스크립트에서 배열의 타입은 객체다. 그러나 다른 객체와 달리 배열은 값의 순서가 있고 length 프로퍼티가 있다는 점에서 독특한 객체다. 값의 순서가 있기 때문에 인덱스로 참조할 수 있고 순차적으로 값에 접근하기 적합하다. 2. 배열 기본 메서드 배열에는 원본 배열을 직접 변경하는 메서드와 원본 배열을 직접 변경하지 않고 새로운 배열을 생성해 반환하는 메서드가 있다. 전자는 mutator method, ..
