- [ 💻 코드스테이츠 x 경남abclab/Section 2 ]2-3. [JavaScript] 객체지향 과제2023-11-07 16:52:20# Beesbeesbees 객체 지향에서 배운 내용을 바탕으로 꿀벌의 발달 단계를 나타내는 꿀벌 클래스 만들기 과제이다. Class Structure ├── Grub │ └── Bee │ ├── HoneyMakerBee │ └── ForagerBee 최종 코드의 구조이다. Grub은 Bee의 부모, Bee는 HoneyMakerBee와 ForagerBee의 부모이다. # Grub class Grub { constructor() { this.age = 0; this.color = "pink"; this.food = "jelly"; } eat() { return `Mmmmmmmmm jelly`; } } module.exports = Grub; Grub class functionality ✓ `age` 속성은 ..
- [ 💻 코드스테이츠 x 경남abclab/Section 2 ]2-2. [JavaScript] 프로토타입2023-11-06 16:44:29# 프로토타입 JavaScript는 프로토타입(Prototype) 기반 언어입니다. 여기서 프로토타입은 원형 객체를 의미합니다. JavaScript는 프로토타입 기반 언어입니다. 프로토타입 체인을 사용하여 객체 지향 프로그래밍의 특성 중 상속을 구현합니다. 흠...🤔 이게 무슨...무슨뜻이지? 챗 지피티의 설명! 프로토타입 기반 언어에서 객체는 다른 객체로부터 직접 상속되며, 이 상속 관계를 "프로토타입 체인"이라고 합니다. 간단히 말하면, 모든 JavaScript 객체는 다른 객체를 상속하고, 그 상속된 객체는 또 다른 객체를 상속할 수 있습니다. 이러한 체인을 따라 객체는 부모 객체의 프로퍼티 및 메서드를 사용하거나 재정의할 수 있습니다. JavaScript에서 프로토타입을 사용하여 객체 간 상속을 ..
- [ 💻 코드스테이츠 x 경남abclab/Section 2 ]2-1. [JavaScript] 객체지향2023-11-06 15:43:25# 객체지향 자바스크립트는 프로토타입 기반의 객체 지향 언어입니다. 객체 지향 프로그래밍은 소프트웨어를 객체(데이터와 해당 데이터를 조작하는 메서드로 구성된 개체)로 구조화하는 프로그래밍 패러다임 객체 지향 프로그래밍은 코드를 재사용하기 쉽고 유지 관리하기 쉽게 만들며, 복잡한 시스템을 모듈화하고 추상화할 수 있습니다. 특징 설명 프로토타입 기반 클래스 기반 상속 대신 프로토타입을 사용한 상속 메커니즘을 갖고 있습니다. 객체 거의 모든 것이 객체로 표현됩니다. 함수, 배열, 문자열, 숫자 등 모든 것이 객체입니다. 상속 객체는 다른 객체(프로토타입)로부터 속성과 메서드를 상속받을 수 있습니다. 다형성 다형성을 지원하며, 동적으로 인터페이스를 구현하는 다양한 객체를 다룰 수 있습니다. 캡슐화 데이터와 관련..
- [ 💻 코드스테이츠 x 경남abclab/Section 2 ]1. [JavaScript] 고차함수2023-11-03 16:36:01# 일급 객체 first-class citizen 자바스크립트에서 함수는 일급 객체(First-Class Object)입니다. 이것은 함수가 다음과 같은 특징을 가지는 것을 의미합니다: 1. 변수에 할당할 수 있습니다: 함수는 변수에 할당할 수 있으며, 이 변수를 통해 함수를 참조하거나 호출할 수 있습니다. const greet = function(name) { console.log(`Hello, ${name}!`); }; greet("Alice"); // 함수 호출 주의) 변수에 함수를 할당할 때 함수 표현식은 변수에 할당한 다음 사용할 수 있다. * 함수 표현식은 할당 전에 사용할 수 없습니다. * square(7); // --> ReferenceError: Can't find variable: sq..
- [ 💻 코드스테이츠 x 경남abclab/Section 1 ]11. DOM2023-11-01 16:37:30# DOM이란? DOM은 Document Object Model의 약자로, 웹 페이지의 구조화된 표현을 나타내는 프로그래밍 인터페이스입니다. DOM은 웹 페이지를 나타내는 트리 구조를 형성하며, 이 구조는 웹 페이지의 모든 요소와 그들 간의 관계를 포함합니다. 각 HTML 요소, 텍스트, 이미지, 링크, 폼 필드 및 기타 모든 내용은 DOM에서 노드로 표현됩니다. DOM은 웹 페이지의 HTML 또는 XML 문서를 메모리에 불러와서 스크립트 언어(일반적으로 JavaScript)를 사용하여 이 문서 구조에 접근하고 조작할 수 있는 방법을 제공합니다. DOM은 웹 페이지에 동적인 기능을 추가하거나 웹 페이지의 내용을 변경하는 데 사용됩니다. # DOM의 특징 DOM은 다음과 같은 주요 특징을 갖습니다: 1. ..
- [ 💻 코드스테이츠 x 경남abclab/Section 1 ]10-2. [JavaScript] JavaScript Koans2023-10-30 16:47:02오늘은 JavaScript Koans 문제풀이를 하며 개념 정리 및 몰랐던 부분을 정리하는 포스트이다. 01. Introduction 02. Types-part1 느슨한 연산자 '==' 와 엄격한 연산자 '==='에 대해서 복습했다. 앞으로는 엄격한 동치 연산(strict equality) '==='을 사용하라는 안내도 받았다. it(function () { expect(1 + '1').to.equal('11'); }); it(function () { expect(123 - '1').to.equal(122); }); it(function () { expect(1 + true).to.equal(2); }); it( function () { expect('1' + true).to.equal('1true');..
- [ 💻 코드스테이츠 x 경남abclab/Section 1 ]9-2. [JavaScript] 스코프2023-10-27 15:13:37스코프 Scope JavaScript에서의 스코프는 "변수접근 규칙에 따른 유효범위"이다. 스코프 규칙 1. 안쪽 스코프에서 바깥쪽 스코프로는 접근할 수 있지만, 바깥쪽 스코프에서 안쪽 스코프로의 접근은 불가능하다. 2. 스코프는 중첩이 가능하다. - 가장 바깥쪽의 스코프는 전역 스코프(Global Scope) - 전역이 아닌 다른 스코프는 전부 지역 스코프(local scope) - 지역 스코프에 선언한 변수는 지역변수, 전역 스코프에 선언한 변수는 전역변수 - 지역변수는 전역변수보다 더 높은 우선순위를 가짐 예제) let name = '고기만두'; function showName() { let name = '김치만두'; // 지역 변수 console.log(name); // 두 번째 출력 } cons..
- [ 💻 코드스테이츠 x 경남abclab/Section 1 ]9-1. [JavaScript] 자료형, 복사2023-10-27 12:03:04원시 타입과 참조 타입 자료형(type) : 값(value)의 종류 원시 타입 (primitive type) 참조 타입 (reference type) number, string, boolean, undefined, null, symbol 원시 자료형이 아닌 모든 자료형 (배열, 객체,함수 ...) * 원시 자료형을 변수에 할당시 메모리 공간에 값 자체가 저장 * 원시 값을 갖는 변수를 다른 변수에 할당시 원시 값 자체가 복사후 전달 * 원시 자료형은 변경 불가능한 값(immutable value) 즉, 한 번 생성된 원시 자료형은 읽기 전용(read only) 값 특징 * 참조 자료형을 변수에 할당하면 메모리 공간에 주소값이 저장 * 참조 값을 갖는 변수를 다른 변수에 할당시 주소값이 복사후 전달 * 참..
- [ 💻 코드스테이츠 x 경남abclab/Section 1 ]8-2. [JavaScript] 객체2023-10-26 11:05:03# 객체 Object 객체는 키와 값으로 이루어져 있습니다. let user={ firstName: 'mandoo',//first name : 키 'mandoo': 값 lastName: 'an',//키와 값 사이는 콜론 : 으로 구분한다. }; 중괄호로 객체를 만들고 {} first name : 키 'mandoo': 값 키와 값 사이는 콜론 : 으로 구분한다. 키-값 쌍은 쉼표로 구분해준다. # 객체의 값을 사용하는 방법 Dot notation let user={ firstName: 'mandoo', lastName: 'an', }; user.firstName // 'mandoo' user.lastName // 'an' 2.Bracket notation let user={ firstName: 'mando..
- [ 💻 코드스테이츠 x 경남abclab/Section 1 ]8-1. [JavaScript] 배열2023-10-25 11:33:50# 배열? * 배열은 순서가 있는 값 순서(index) : 0부터 번호를 매김 값=요소( element) * 배열 만드는 법 let myNumber = [73, 98, 86, 61, 96]; //대괄호를 이용해서 배열을 만들고, 각각의 원소는 쉼표로 구분한다. *값은 인덱스를 이용해 접근 let myNumber = [73, 98, 86, 61, 96]; //myNumber의 배열의 3번째 인덱스를 조회하려면? myNumber[3];//61 //배열의 변수를 변경하고 싶다면? myNumber[3]=200;//200의 값 할당 myNumber; //[73, 98, 86, 200, 96]; *퀴즈 1 let fruits = [ 'banana', 'apple', 'pineapple' ]; console.log(..