본문 바로가기

JavaScript/Syntax

(23)
[JavaScript] OOP(Object-Oriented Programming) 자바스크립트는 다음의 3가지 특성을 모두 갖는 multi-paradigm 프로그래밍 언어이다. -Procedual programming -Object oriented programming -Functional programming 1. 객체지향프로그래밍 -등장배경: 실제 세계의 사물의 성질과 특성을 시스템에 적용하려는 목적으로 도입되었다. 객체란 현실 세계의 사물이나 개념을 시스템에서 이용하기 위해 현실 세계를 자연스럽게 표현하여 쉽게 이용할 수 있도록 만든 소프트웨어 모델이다. -OOP Basic concepts: 현실의 문제를 시스템으로 모델링하는 과정에는 다음 4가지 특성을 이용한다. (https://sanxang.tistory.com/45) 1. Encapsulation 2. Inheritanc..
[JavaScript] Functional programming 1. First-class function -프로그래밍 언어가 갖는 일반적인 특징이다. -자바스크립트는 함수를 일급 객체(first-class citizen)로 취급 한다. *이 말은 즉, 함수는 그 자체로 value이며 객체의 일종이다. -일급 객체 함수는 다음과 같은 성질을 갖는다. 1. 변수에 할당할 수 있다. const func1 = function() {...} ; *이때 func1은 함수 value이고, func1()은 함수 호출임 2. 객체 프로퍼티에 할당할 수 있다. (메소드) 3. 다른 함수의 arguments로써 input data로 사용할 수 있다. *이때 함수를 인자로 받는 어떤 함수를 고차함수(high-level, higher-order function)라 함 (내가 직접 호출함)..
[JavaScript] DOM 개요 -자바스크립트 런타임에는 웹브라우저, 웹서버(node.js) 등이 있다. 커피 머신 또한 자바스크립트 런타임이 될 수도 있다. -각 런타임마다 특정 기능(API)이 지원되는데 이들을 한데 묶어 host environment라 부른다. -웹브라우저 런타임 환경에는 language core인 자바스크립트를 기본적으로 지원하며 추가적으로 웹 페이지 내 모든 컨텐츠를 제어할 수 있는 문서객체모델(DOM)과 그 외의 모든 것을 제어할 수 있게 해주는 브라우저객체모델(BOM)가 제공된다. * DOM의 node 객체를 통해 페이지 내 문서 영역에, BOM의 window 객체를 통해 브라우저 창, 탭, 스토리지 등에 접근할 수 있다. -그 밖에 AJAX(fetch API), Timer, Geolocation, C..
[JavaScript] Destructuring Assignment 1. 구조 분해 할당(Destructuring assignment) -ES6 문법이다 -배열과 객체를 분해하여 각 값을 변수로 연결한다 -함수에서 많은 매개변수를 처리하거나, 매개변수에 default 값을 설정할 때 사용되기도 한다 -모든 iterable(반복 가능한 것)에 적용 가능하다 -할당 연산자(=) 좌측에는 상응하는 변수 이름이 오고, 우측에는 분해하고자 하는 데이터가 자리한다 -배열 활용 예) 1) const [a, b, c] = [1, 2, 3, 4]; // a->1, b->2, c->3 *[1, 2, 3, 4]이 파괴(destructive)되는 것은 아니다. 복사 후 변수에 분해(destructurize) 하는 것임 2) const [a, , c] = [1, 2, 3, 4]; // a->1..
[JavaScript] Closure 1. 중첩 함수(Nested Function) -함수 내부에서 새로 선언한 함수를 중첩 함수라 부른다. -특히 함수를 반환하는 고차함수는 프로그래밍에서 매우 중요한 역할을 한다. -고차함수는 주로 함수 자체나 객체 메소드로 반환 값을 갖는다 -중첩 함수 가운데에 자신이 선언된 부모 함수의 변수 환경에 항상 접근할 수 있는 함수를 클로저 함수라고 부른다 2. 렉시컬 환경(Lexical Environment) -이전 Scoping 파트에서 렉시컬 환경에 대해 이미 한 번 짚고 넘어갔었다.(https://sanxang.tistory.com/29) -함수를 호출하면 고유의 렉시컬 환경이 자동으로 만들어진다. (변수와 달리 호출할 때마다 초기화 된다는 점에 유의) -렉시컬 환경에는 parameter(& 함수 호..
[JavaScript] Data type2 -Javascript code를 실행하는 JS Engine은 JS Runtime(Browser, Node.js)에 내장되어 있다. -JS Engine은 heap과 call stack이라는 두 메모리를 사용한다. *heap : 큰 용량의 데이터를 저장하는 공간 *call stack : 실행되는 코드를 tracking하며 실제 작업 수행이 일어나는 공간 1. Primitive type vs Reference type -Primitive types(원시 자료형) : string, number, boolean, undefined, null ... 등 크기가 고정된 단일 데이터를 말한다. -Reference types(참조 자료형) : Object, Array, Function, Date, RegExp ... 등..
정규표현식 1. 정규표현식(regular expression)이란? -문자열 처리를 간편하게 할 수 있다 -특정 텍스트의 패턴을 검색하고 수정할 때 사용한다 -주로 유효성 검사에서 사용된다 2. 리터럴 패턴 -슬래시(/)는 따옴표(")와 동일하다 -플래그(Flag)는 정규표현식 검색의 기본 설정값을 수정하게 해주는 옵션이다 1) 대소문자를 구별하여 검색한다 -> /i 로 해제 2) 출력은 최초 1회만 진행된다 -> /g 로 해제 3) 행이 바뀌면 검색을 중단한다 -> /m 로 해제 *s : .이 개행문자 \n도 포함하도록 함 *u : 유니코드 전체를 지원 *y : 문자 내 특정 위치에서 검색을 진행 -정규표현식을 처리하는 자바스크립트 내장 메소드가 존재한다. RegExp.prototype.exec() RegExp...
[JavaScript] 배열 배열(Arrays)이란? -Ordered collections of values -for문과 인덱스를 사용하여 배열의 모든 요소를 순회할 수 있다 *ES6 : 인덱스를 사용하지 않고 배열의 모든 요소를 순회하는 방법 -> for(const item of arr) {...} -[ ] 안에는 다양한 data type이 함께 담길 수 있다. ['string', number, variables, expression, function calls, [other arrays...]]; *유사배열객체(Array-like object) : 생김새는 index를 갖는 요소의 나열(순서 있는 목록), 즉 배열과 같아 위치 기반으로 접근이 가능하다. length 프로퍼티 값을 가지지만 forEach()나 map() 등 배열의..