본문 바로가기
반응형

💻 개발자/🔨 HTML, CSS, JS

 (7)
[JS] 객체지향 JavaScript (feat. class & instance) 1. class와 instance 객체 지향 프로그래밍은 하나의 모델이 되는 청사진(BluePrint)을 만들고 그 청사진을 바탕으로 한 객체를 만드는 프로그래밍 패턴이다. 여기서 청사진을 class라 할 수 있고, 객체를 instance라고 할 수 있다. 정확히는 인스턴스 객체(instance object)다. //ES6 class Car { constructor(brand, name, color) { this.brand = brand; this.name = name; this.colr = color; } drive() { console.log(this.name + '이(가) 운전을 시작합니다' } } let stonic = new Car('kia', 'stonic', 'gray') stonic.col..
[JS] 내장 고차함수 이해하기 (Feat. map, filter, reduce) 자바스크립트(JS)에는 기본적으로 내장된 고차 함수(Built-in higher order functions)가 여러가지 있다. 그중에서 배열 메소드들 중 일부가 대표적인 고차 함수에 해당한다. 1. map 배열의 각 요소가 특정 논리(함수)에 의해 다른 요소로 지정(map) 된다. map은 아래와 같이 하나의 데이터를 다른 데이터로 맵핑(mapping)할 때 사용된다. const cartoons = [ { id: 1, bookType: 'cartoon', title: '식객', subtitle: '어머니의 쌀', createdAt: '2003-09-09', genre: '요리', artist: '허영만', averageScore: 9.66, }, { id: 2, // .. 이하 생략 }, // .. 이..
[JS] 고차함수(higher order function)이란? 고차 함수(higher order function)는 함수를 인자(argument)로 받을 수 있고, 함수의 형태로 리턴할 수 있는 함수이다. 함수는 변수에 저장할 수 있다. 함수를 담은 인자로 전달받을 수 있다. 함수 내부에서 변수에 함수를 할당할 수 있다. 함수는 이 변수를 리턴할 수 있다. 이때 다른 함수(caller)의 인자(arument)로 전달되는 함수를 콜백 함수(callback function)라고 한다. 1. 다른 함수를 인자로 받는 경우 function triple(num) { return num * 3; } function tripleNum(func, num) { return func(num); } // 함수 tripleNum은 다른 함수를 인자로 받는 고차 함수이다. // 함수 fu..
[JS] 객체(Object) 기초 1. 객체란? 주소록과 같이 한 대상의 다양한 정보들을 한 눈에 보기 좋게 정리할 때 필요한 자료 구조 객체는 키와 값 쌍(key-value pair)으로 이루어져 있다. 또한 객체는 중괄호(curly bracket) 내부에 키와 값이 존재한다. let user = { firstName: 'Adam', lastName: 'Kim', email: 'bobokook@gmail.com', city: 'Busan' }; // firstName, lastName 등을 키(key) // 'Adam', 'Kim' 등을 값(value) 2. 객체의 값을 사용하는 방법 2가지 방법1: Dot notation user.firstName; // 'Adam' user.city; // 'Busan' 방법2: Bracket no..
[JS] 배열(Array) 기초 1. 배열이란? 순서가 있는 값을 말하고 대괄호(square bracket)를 이용하여 만들 수 있다. 값: 요소(element) 순서: 인덱스(index) let num = [12, 21, 34, 46, 59] 대괄호 안의 하나하나의 값들을 요소라고 한다. 배열의 특징 중 하나는 인덱스(순서)의 기준이 1이 아닌 0이라는 점이다. 그렇기 때문에 아래와 같이 표현할 수 있다. num[2] === 34 그리고 만약에 2번 인덱스의 번호를 변경하려고 하면 아래와 같은 방법으로 진행하면 된다. num[2] = 99; consoloe.log(num); // 결과값 [12, 21, 99, 46, 59]; 또한 배열 안에 배열이 존재하는 경우가 있다. 이럴 경우에 내부 배열에 접근하는 방법은 다음과 같다. let ..
[JS] let, var, const 키워드 비교 let const var 유효 범위 블록 스코프 함수 스코프 블록 스코프 함수 스코프 함수 스코프 값 재할당 가능 불가능 가능 재선언 불가능 불가능 가능
[JS] 반복문 기초 (for문과 while문) JavaScript를 학습하면서 제일 이해하기 어려웠던 문법은 바로 반복문이었다. 이제 간단한 반복문 문제와 이중 반복문 문제를 풀 수 있을 정도는 되었지만 감을 잃지 않기 위해서 포스팅을 하기로 결정했다. 왜 그렇게 어렵게 느꼈나 지금 와서 생각해 보니 반복문 안에서 일어나는 일들을 머릿속으로 상상하는 데 어려움을 겪었던 것 같다. 그리고 할당(assignment)이라는 개념도 정확하게 인지하고 있지 않다 보니 더 헷갈렸지 않나 싶다. 기본적인 for문 let sum = 1; for (let i = 2; i
반응형

티스토리툴바