목록독학 (43)
함께 성장하는 프로독학러
안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 ES6 의 강력한 기능 중 하나인 class에 대해서 알아보겠습니다. class는 생성자 함수의 업그레이드 버전이라고 보면 됩니다.생성자 함수에 대해서 간단하게 살펴보도록 하죠. 1234567891011121314151617181920function person (name, job) { this.name = name; this.job = job;}; person.prototype.getName = function(){ console.log(this.name);}; function korean (name, job) { person.apply(this, arguments);}korean.prototype = new person(); var man_1 = ne..
안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 자바스크립트의 생성자 함수와 prototype 객체에 대해서 알아보도록 하겠습니다. 먼저 prototype 객체에 대해서 알아보겠습니다. 일단 이름부터가 무시무시합니다. 저도 처음에 프로토타입 객체니 생성자니 this니 constructor니... 하는 용어들에 압도된 적이 있었는데요, 천천히 알아가 보도록 합시다. 자바스크립트에는 여러가지 데이터 형태가 있습니다.Boolean, Number, String, Null, undefined, Object, Array, Function 등 여러가지의 데이터 타입이 있습니다.이 데이터 타입을 크게 기본 타입과 객체로 나누어 볼 수 있습니다. 기본 타입 : Number, String, Boolean, undefin..
안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 ES6의 property shorthand(단축 속성명)에 대해서 알아보록 하겠습니다.property shorthand는 객체를 정의 할 때 객체의 key값과 value의 값이 같으면, key 와 value 값을 각각 표기하지 않고 한 번만 표기하는 것을 의미합니다. 코드를 통해 살펴보도록 하겠습니다. var a = "foo", b = 42, c = {}; var o = { a: a, b: b, c: c };먼저 선언부에서 변수 a, b, c, 에 각각 "foo", 42, {} 를 할당했습니다.그리고 변수 o 에 객체를 할당하는데, 해당 객체의 key 'a' 는 변수 a의 값("foo")을 value 값으로 가지고, key 'b' 는 변수 b의 값(42)..
안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 배열과 문자열에서 사용가능한 메서드인 slice 메서드에 대해서 알아보도록 하겠습니다. slice 메서드는 단어에서 의미를 유추해 볼 수 있듯이 배열이나 문자열의 원소를 잘라내 추출하는 것입니다.먼저 표현식부터 살펴보겠습니다. arr/str.slice([beginIndex][, endIndex])배열이나 문자열에서 사용하는 메서드이며 파라메터로는 beginIndex 와 endIndex 가 옵니다.beginIndex 는 말 그대로 슬라이스를 시작하는 인덱스 번호를 의미합니다.배열과 문자열 공통으로 0부터 시작하는 인덱스를 의미합니다.* beginIndex 값이 생략되면 0 부터 슬라이스 하겠다는 의미입니다.* beginIndex 값이 음수라면 배열이나 문자..
죠>안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 비구조화 할당, destructuring assignment에 대해서 알아보겠습니다. 비구조화 할당 이라는 말이 쉽게 이해되는 말은 아니라고 생각합니다.간단히 말하자면 배열이나 객체의 요소를 해체하여 별개의 변수로 추출할 수 있도록 하는 것입니다.이 말도 와닿지 않으신가요? 괜찮습니다. 코드를 통해서 살펴보도록 하죠. var a, b, rest; [a, b] = [10, 20]; console.log(a); // 10 console.log(b); // 20위의 코드의 첫 줄에서 변수 a, b, rest를 선언했습니다. (선언만 하고 아직 할당하지 않은 상태)그리고 두 번째 줄에서 이름 없는 배열 두 개가 같다고 표현했습니다.왼쪽 항에 있는 배열은 a,..
안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 배열의 원소를 삭제하거나 삭제하고 새로운 원소들을 추가하는 메서드인 splice 메서드에 대해서 알아보겠습니다. 표현식은 다음과 같습니다. array.splice(start) array.splice(start, deleteCount) array.splice(start, deleteCount, item1, item2, ...)splice의 메서드의 인자로 들어오는 값은 차례로 start, deleteCount, items 입니다. start는 삭제할 배열의 요소의 index 번호를 의미합니다.그리고 뒤에 나오는 deleteCount 인자는 start 부터 몇 개의 요소를 삭제할지 결정하는 숫자입니다.즉, start 인덱스부터 deleteCount 갯수만큼 ..
안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 ES6의 method shorthand에 대해서 알아보겠습니다. 표현식부터 살펴보도록 하겠습니다. // 단축 메서드명 (ES6) var o = { property([parameters]) {}, get property() {}, set property(value) {}, * generator() {} };위와 같이 객체 안에서 메서드를 지정할 때 function을 생략할 수 있습니다. 이해를 돕기위해 예제를 살펴보겠습니다. 1234567891011var obj = { add: function (a, b){ return a+b; }, mult: function (a, b){ return a*b; }} console.log(obj.add(10, 5)); //..
안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 ES6의 computed property name에 대해서 알아보겠습니다. computed property name 는 객체의 key값을 표현식(변수, 함수 등을 이용)을 통해 지정하는 것입니다.사용법은 아래와 같습니다. var i = 0; var a = { ["foo" + ++i]: i, ["foo" + ++i]: i, ["foo" + ++i]: i };위에서 본 것과 같이 속성명에 표현식을 사용하려면 대괄호("[ ]") 안에 표현식을 쓰면 됩니다.표현식은 위에서와 같이 변수가 들어올 수도 있고, 함수가 들어올 수도 있습니다. 변수가 프로퍼티의 키로 들어오는 예제에 대해서 살펴봅시다. 12345678910var name1 = "장동건";var name2..
안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 배열의 filter 메서드에 대해서 알아보도록 하겠습니다.filter 메서드는 메서드의 이름과 같이 배열의 원소들 중 조건에 만족하는 원소들을 필터링 하는 메서드 입니다. 표현식부터 살펴보겠습니다. var new_array = arr.filter(callback[, thisArg])filter 메서드의 인자로는 콜백함수와 생략가능한 thisArg 값이 들어옵니다.콜백함수는 기존의 배열에서 필터링을 할 수 있도록 하는 함수입니다.이 함수의 인수는 element, index, array 입니다. 각각 배열의 원소, 해당 원소의 index값, filter 메서드를 행하는 대상 배열입니다.세 인수 중 index와 array는 생략이 가능합니다.filter 메서드..
안녕하세요, 프로독학러 입니다. 오늘은 배열과 문자열에서 사용 가능한, 검색을 위한 메서드인 indexOf 메서드에 대해서 알아보도록 하겠습니다. 먼저, 표현식부터 살펴 보겠습니다. arr/str.indexOf(searchElement/searchValue[, fromIndex])메서드의 첫 번째 인자로는 검색할 대상이 들어옵니다.(배열일 경우 검색할 엘리먼트, 문자열일 경우 검색할 문자)그리고 생략 가능한 두 번째 인자는 검색을 시작할 index입니다.만약 배열이라면 배열의 index값 (0 부터 시작해서 하나씩 증가)을 의미하며,문자열이라면 문자열 각각의 문자 하나하나를 의미합니다. (마찬가지로 첫 번째 글자부터 0, 1, 2, 3 ...) indexOf 메서드의 리턴값은 배열일 경우에 검색된 엘리먼..