front-end/JavaScript 9

[JavaScript] 이벤트1

이벤트 모델 이벤트를 연결하는 방법 표준 이벤트 모델 addEventListener(type, listener) addEventListener(type, listener, options) addEventListener(type, listener, useCapture) type : 이벤트 유형 listener : 지정할 이벤트를 받을 객체 options capture 이벤트 대상의 DOM 트리 하위에 위치한 자손 EventTarget으로 이벤트가 전달되기 전에 이 listener가 먼저 동작해야함을 나타내는 옵션 default : false once listener가 최대 한 번만 동작해야 함을 나타낸다 true라면 listener가 동작하고 스스로를 제거한다 passive true일 경우 preventD..

[JavaScript] Array.prototype.forEach , map, filter

Array.prototype.forEach() 이 메서드는 주어진 콜백 함수를 배열 요소 각각에 대해 실행한다 arr = [10,20,30] arr.forEach( callback( currentValue, currentIndex, Array ),thisArg ) 반환값은 기본적으로 undefined이다 주어진 callback을 배열에 있는 각 요소에 대해 오름차순으로 한 번씩 실행한다. callback은 다음 세 인수와 호출된다. 현재 요소 값 현재 요소 인덱스 순회 중인 배열 thisArg를 통해 this로 사용할 값을 결정한다. forEach로 처리할 요소의 범위는 최초로 callback을 호출한 시점 전에 설정된다. -> 이미 호출이 됐다면 추가된 요소는 callback이 방문하지 않는다 arr ..

[JavaScript] 생성자 함수

객체 리터럴로 객체를 생성하는 방법은 일반적이고 간단한 방법이다 객체리터럴 외에도 객체를 만드는 방법은 다양하다. 생성자함수 Object.create 메서드 클래스 생성자 함수로 객체를 만드는 방법을 살펴본다 생성자 함수 (constructor) : new 연산자와 함께 호출하여 객체를 생성하는 함수 인스턴스 (instance) : 생성자 함수에 의해 생성된 객체 생성자 함수로 인스턴스를 공장에서 찍어내듯 만들 수 있다. new 연산자와 함께 생성자 함수를 호출하면 객체를 생성하여 반환한다. new 연산자 new 연산자는 사용자 정의 객체 타입 혹은 내장 객체 타입의 인스턴스를 생성한다. 빌트인 생성자 함수 Object 생성자 함수를 이용하여 객체를 만드는 방법 const person = new Obje..

[JavaScript] 객체 리터럴

자바스크립트는 객체기반의 프로그래밍 언어이다 자바스크립트를 구성하는 것은 원시 값과 객체로 나뉜다 원시값을 제외한 나머지 값은 모두 객체다 (함수, 배열, 정규표현식 등등) 원시 타입은 단 하나의 값을 나타내는데, 객체 타입은 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조이다 객체는 다양한 원시 값과 다른 객체들로 이뤄질 수 있다 원시타입의 경우 변경 불가능한 값인데, 객체는 변경 가능한 값이다. 객체는 프로퍼티의 집합으로, 프로퍼티는 키와 값으로 구성된다 자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 값이 될 수 있다. 자바스크립트의 함수는 일급 객체이다. 즉, 값으로 취급 된다 다시 말해, 함수 또한 프로퍼티 값으로 사용할 수 있다. 프로퍼티 값이 함수일 경우, 메서드라고 부른다 위..

[JavaScript] 타입 변환

타입 변환은 명시적 타입 변환과 암묵적 타입 변환이 있다 명시적 타입 변환 (타입 캐스팅) 개발자가 의도적으로 값의 타입을 변환하는 것 var x = 308; var s = x.toString(); console.log(typeof s, s) // str '308' 암묵적 타입 변환 (타입 강제 변환) 표현식을 평가하는 도중 자바스크립트 엔진에 의해 암묵적으로 타입이 변환되는 것 var x = 308 var s = x + ''; console.log(typeof s, s); // str '308' 타입 변환은 기존 원시 값을 직접적으로 변경하는 것이 아니다 원시 값은 변경 불가능한 값이라서 변경이 안된다 타입 변환은 기존 원시 값을 사용해서 다른 타입의 새로운 원시 값을 만드는 것이다. 자바스크립트 엔진..

[JavaScript] 변수

메모리란 데이터를 저장할 수 있는 메모리 셀의 집합체라고 할 수 있다. 컴퓨터는 메모리 셀 단위로 데이터를 저장하거나 읽어들이게 된다. 이때 각 셀은 고유의 메모리 주소를 갖게 되는데, 메모리 주소는 메모리 공간의 위치를 나타낸다. 컴퓨터는 모든 데이터를 2진수로 처리한다. 그래서 저장되는 데이터는 데이터 종류와 무관하게 모두 2진수로 저장된다. 이때 데이터 값은 메모리 상의 임의의 주소에 저장되며, 이 값들로 cpu는 연산을 수행할 수도 있다. 연산 결과 또한 메모리 상의 임의의 주소에 저장된다. 그리고 메모리에 저장되는 모든 값 역시 2진수로 저장된다. 값이 저장될 때 메모리 주소는 메모리의 상황에 따라 임의로 결정된다. 그렇기 때문에 동일한 코드를 동일한 컴퓨터에서 실행하더라도 메모리 주소는 변경이..

[JavaScript] 자료

프로그래밍에서 프로그램이 처리할 수 있는 모든 것을 자료라 하며, 자료를 형태에 따라 나눈 것을 자료형이라 한다 크게 원시타입과 객체타입으로 나뉜다 원시타입에서 가장 기본적이면서 많이 사용하는 자료형은 Number, String, Bool 이다 데이터 타입이 필요한 이유 값은 메모리에 저장하고 참조할 수 있어야 한다 메모리에 값을 저장하려면 확보해야 할 메모리 공간의 크기를 결정해야 한다. 다시 말해, 몇 바이트의 메모리 공간이 필요한지 미리 알아야 낭비를 안할 수 있다. 예를 들어, 숫자 값 10을 변수에 저장할 때 저장하기 위해 메모리 공간을 확보한 다음, 확보된 메모리에 숫자 10을 2진수로 저장한다. 이런 처리를 하려면 숫자 값에 저장할 때 확보해야 할 메모리 공간의 크기를 알아야 한다 자바스크립..

[JavaScript] 표현식과 문

값 값 : 표현식이 평가되어 생성된 결과 평가 : 식을 해석해서 값을 생성하거나 참조하는 것 모든 값은 데이터 타입을 가지고, 메모리에 2진수 나열로 저장된다. 메모리에 저장된 값은 데이터 타입에 따라 다르게 해석될 수 있다. [0100 0001] -> 65, 'A' 값은 다양한 방법으로 생성할 수 있는데, 그 중 가장 기본적인 방법은 리터럴을 사용하는 것이다. 리터럴 리터럴은 사람이 이해할 수 있는 문자나 약속된 기호로 값을 생성하는 표기법이다. 사람이 이해할 수 있는 문자 등을 코드에 작성하면 자바스크립트 엔진이 코드를 평가해서 그 값을 생성한다 즉, 자바스크립트 엔진은 런타임에 리터럴을 평가해서 값을 생성한다. 문 (statement) 문이란 프로그램을 구성하는 기본 단위이자 최소 실행 단위이다. ..