본문 바로가기

개념/javaScript

(24)
[javaScript] 객체지향프로그래밍 OOP 객체 지향 프로그래밍이란? 객체 지향 프로그래밍(OOP, Object-oriented programming)은 인간이 사물을 파악하는 방식과 비슷하게 개발하는 패러다임을 말한다. 붕어빵틀(클래스)과 붕어빵(인스턴스)을 만드는 방식으로 코딩하여 가독성있고 깔꼼하게 프로그래밍을 하는 것이다. 이 객체 지향 프로그래밍은 데이터와 기능을 한곳에 묶어서 처리한다. 속성과 메서드가 "객체"라는 개념에 묶여서 구현이된다. ++ 참고 ++ 객체지향프로그래밍의 '객체'는 그냥 일반 {key: value}객체가 아니라 class로 찍어내는 instance객체를 말한다. ++ 참고 ++ 엄격한 의미에선 '클래스지향프로그래밍'이라고 하는 것이 더 맞지만, 큰 의미에서 그냥 객체지향프로그래밍이라고 부른다. 객체 지향 프로그래밍..
[javaScript] 클래스와 인스턴스 클래스 = 붕어빵틀 클래스는 새로운 객체를 만들어내기 쉽게 짜 놓은 객체 생성틀이다. 일종의 원형, 아이디어, 청사진 정도로 생각할 수 있다. 마치 붕어빵을 만들기 쉽게하기 위해서 붕어빵틀이 있는 것처럼, 즉, 비슷한 형식으로 여러가지 다른 버전을 만들어야 할 때에 쉽게 복제해 낼 수 있게 하는 도구이다. 이 클래스는 es6문법에서는 이렇게 단순하게 만들 수 있다. 앞에 class만 써주고 이름을 정한 후 중괄호 열어주면 붕어빵틀 만들 준비 끝이다. 🛑 주의! 클래스명은 보통 대문자로 시작하며, 동사가 아닌 명사로! 작성한다. class Boongeoppang{ //여기에 클래스내부에 종속될 것들을 정의 } 🛑 오브젝트가 처음 어떻게 만들어질지 정의하는 클래스, 붕어빵틀을 원형객체(original fo..
[javaScript]내장 고차 함수 filter,map,reduce javaScript의 함수는 일급객체 뭔가 간지나는 용어 일급객체, 뭐 대단한 의미는 없고, 자바스크립트에서 함수는 아래와 같이 세가지가 특이하기 때문에, '일급객체' 라고 큭별히 분류한다. 변수에 할당(assignment) 할 수 있다. 다른 함수의 전달인자(argument)로 전달될 수 있다. 다른 함수의 결과로서 리턴될 수 있다. 고차 함수란 고차함수란 함수를 전달인자로 받을 수 있거나 함수를 리턴할 수 있는 함수를 말한다. -하나라도 만족하면 고차함수- ✔️ 함수를 전달인자로 받는가? ✔️함수를 리턴할 수 있는가? 콜백함수란 콜백함수란 다른 함수의 전달인자로 전달되는 함수를 말한다. 따라서 고차함수는 콜백함수를 전달받는 함수이다. (콜백함수는 실행될수도, 안될수도, 특정 조건에서만 실행될 수도 있..
[javaScript]객체 메서드 정리 & 객체의 반복문과 복사 객체란 객체란 순서가 없는 키와 값 묶음의 조합이다. 이름표가 붙여진 폴더들을 보관하는 서랍장같은 것! 상자를 열면 각각의 자료가 네임택이 붙여져서 구분되어 있는 장면을 생각해보면 된다. 배열처럼 랜덤한 값들이 아니라, 의미하는 바가 있는 묶음을 나타낼때 쓴다. 키(key)혹은 property라고 부르는 것이 이름표가 되고, 그에 해당하는 자료,즉 value가 있다. 객체의 모양 객체는 다음과 같이 생겼다. let user = { name: 'chillDev', email: 'bunnyatgym@gmail.com', city: 'Bucheon' } value에는 텍스트, 숫자, 함수, 객체, 배열 등 다양하게 들어갈 수 있다. 객체를 만드는 법 콜론(:)로 키와 값을 구분한다. 쉼표(,)로 key&val..
[javaScript] 배열 메서드 정리 & 배열의 반복문과 복사 배열이란 배열은 순서가 있는 값의 묶음을 말한다. 배열은 대괄화를 이용해서 만들며, 대괄호 내부의 순서(index)로 조회할 수 있다. 이때 index에 해당되는 value를 배열에서만 특화적으로 요소,혹은 원소(element)라고 부르기도 한다. 배열의 모양 배열은 다음과 같이 생겼다. let myArray = [32,45,33,52,12]; 요소는 예시처럼 숫자가 아니라, 문자,객체,배열 등 다양한 형태가 모두가능하다. 배열을 만드는 법 대괄호(square bracket)을 이용해서 만든다. 각각의 원소는 쉼표로 구분해준다. 배열을 조회하는 법 배열이름[index] let myNumber = [12,33,24,35,22] myNumber[1] //33 각각의 요소에 0부터 순서대로 매겨지는 index..
[javaScript] 과제로 얻은 여러가지 깨달음 정리 본 글은 코드스테이츠 프론트앤드 부트캠프의 koans 페어 프로그래밍을 하면서 기존에 알고 있던 사실에 추가로 알게된 사실들 + 까먹기 쉬운 사실들 위주로 정리하였다. 몇몇은 자료들을 찾아서 덧붙이기도 했다. 시간이 허락할 때 하나씩 주제별 글에 붙여넣거나, 따로 새로운 글을 작성하는 것..이 목표...이긴하다..🥴 1. 자바스크립트의 이상한 현상들만 모아놓은 저장소가 있다. wtfjs(what the f*ck javaScript)의 약자로, 예상치 못한 띠용! 스러운 자바스크립트 현상들을 모아 놓고, 왜 그런지 해석해보는 저장소가 있다. 재미로 보고, 되도록 값을 정확하게 예측할 수 있는 방향으로 사용하는 걸 지향해야한다. 2. 자바스크립트 호이스팅 호이스팅 : 변수의 선언과 초기화를 분리한 후, 선언..
[javaScript] spread와 rest, 그리고 구조분해할당 🧠자바스크립트가 획기적으로 편리해진 ES6 2015년에 출시된 ES6(ECMA Script6)에선 자바스크립트의 가독성과 유지보수성을 획기적으로 향상할 수 있는 문법이 많이 추가되었다. let, const, 템플릿 리터럴, 그리고 spread와 rest까지 모두 ES6버전에서 추가된 것들이라고 한다. ✂️Spread : '...array'로 배열을 푼다. 주로 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때에 사용한다. function sum(x, y, z) { return x + y + z; } const numbers = [1, 2, 3]; sum(...numbers) // 1+2+3 = 6 리턴 🧶Rest: '...parameter'로 배열로 묶는다. 파라미터를 배열의 형태로..
[javaScript] 클로저(closure)란? 어휘적 환경(lexcial environment)이란? 📦클로저란 클로저 = '함수와 함수가 선언된 어휘적 환경(Lexcial Environment)의 조합' 이 말을 완벽하게 이해하기 위해서는 자바스크립트가 어떻게 변수의 유효범위를 지정하는지(Lexical scoping)를 먼저 이해해야 한다. 👀어휘적 범위 지정 (Lexical Scoping) 사실 '어휘적 범위 지정'이란 말 자체가 굉장히 뭉뚱그려 말하는 추상적인 느낌을 주는데, 그게 맞다. 이는 '어휘적 범위 지정'이라는게 'a의 경우 b가 된다.' 식의 정형화된 규칙이 아니라, 일종의 자바스크립트가 그때그때 변수를 읽는 방식을 퉁쳐서 부르는 표현이기 때문이다. 어휘적 범위 지정(lexical scoping)의 "lexical"이란, 변수가 어디에서 사용 가능한지 알기 위해 그 변수가 소스코드 내 어..
[javaScript] 스코프와 let,const,var 🔭스코프(scope)란 함수의 유효범위 scope는 범위를 뜻하며, 사격시 멀리있는 물체를 정확하게 조준하기 위해 달려있는 작은 망원경을 뜻하기도 한다. 컴퓨터 공학과 javaScript 세상에선 '변수의 유효범위'를 뜻한다고 한다. 📦스코프 규칙 1 : 안쪽 스코프는 눈구멍 뚫린 상자 기본적인 스코프의 원칙은 이렇다. 바깥쪽 스코프에사 선언한 변수는 안쪽 스코프에서 사용가능 안쪽 스코프에서 선언한 변수는 바깥쪽 스코프에서 사용 불가능 그러니까 안쪽에 있는 눈구멍 두개가 뽕뽕 뚫린 상자가 있다고 치자. 그 안쪽에선 바깥에 뭐가 있는지 보이겠지만, 반대로 바깥쪽에서 상자를 본다면 뭐가 들어있는건지 모를것이다. 마찬가지로 안쪽 스코프 범위에선 바깥쪽 스코프 범위의 변수가 뭔지 가져와 쓸 수 있지만, 바깥쪽 ..
[javaScript]원시자료형과 참조자료형 🔍원시자료형과 참조자료형 한눈에 비교하기 원시자료형(primitive data type) 참고자료형(reference data type) string, number, bigint, boolean, undefined, symbol, (null) 배열array,객체object,함수function 고정된 저장 공간을 차지하는 데이터 크기가 얼마든지 커질수 있는 데이터 값 자체를 저장 값을 가르키는 주소를 저장, 실제저장 장소는 heap 크기가 정해져있음 주소가 가르키는 heap은 크기가 정해져있지 않음 값 자체를 복사해옴 let a=1; a=b; b=2; a //1 주소를 복사해옴, 가르키는 값은 그대로 let e=[10,20]; let f=e; f[0]=50; e; //[50,20]