JavaScript 검색 결과

해당 글 163건

배열 메서드 : every, some 알아보기

every, some 배열 메서드를 활용한 배열 콘텐츠 유효성 검사하기 javascript // 배열이 특정 조건을 만족시키는지 확인하고자 하는 경우에는 Array 객체의 every 메서드를 사용하면 // 모든 원소가 조건을 통과하는지 확인할 수 있습니다. // 예를 들어 다음의 코드는 배열의 모든 원소가 알파벳과 숫자로만 이루어졌는지 확인하는 예제입니다. var arrElement = [123, 'aaa', 'abc', '-', 33, 'DDD']; var arrElement2 = ['aaa', 'abc','DDD']; // 테스트하는 함수 function textValue(el, idx, arr) { var textExp = /^[a-zA-Z]+$/; return textExp.test(el); } ..
JavaScript/연산자ㆍ메서드ㆍ프로퍼티 2017. 1. 23. 16:58

splice 와 indexOf 를 활용 예제

splice 와 indexOf 이용한 배열 원소를 검색하여 없애거나 바꾸기 javascript var animals = ['dog', 'cat', 'seal', 'walrus','lion','cat']; // 배열에서 원소를 제거 var deleteElement = animals.splice(animals.indexOf('walrus'), 1); console.log(deleteElement); // 반환값은 제거한 원소 console.log(animals); // 원래 배열은 제거한 원소를 제외한 원소를 반환 // 새로운 원소를 삽압하기 animals.splice(animals.lastIndexOf('cat'), 1, 'monkey','puma'); console.log(animals); var ani..
JavaScript/JS 활용 & etc.. 2017. 1. 23. 16:40

forEach, map, filter : 각 배열 원소에 함수 적용하기

forEach, map, filter 메서드 forEach 메서드 예제 살펴보기 javascript var charSets = ['ab', 'bb', 'cd', 'ab', 'cc', 'ab', 'dd', 'ab']; function replaceElement(element, idx, arr) { if (element == 'ab') { arr[idx] = '**'; } } charSets.forEach(replaceElement); console.log(charSets); charSets.forEach(function (el, idx, arr) { if (el == '**') { arr[idx] = '***' } }); console.log(charSets); map 메서드 : 배열의 모든 원소에 함수를..
JavaScript/연산자ㆍ메서드ㆍ프로퍼티 2017. 1. 23. 16:34

JavaScript : 프로토타입(prototype) 이해

JavaScript Prototype JavaScript는 클래스라는 개념이 없습니다. 그래서 기존의 객체를 복사하여(cloning) 새로운 객체를 생성하는 프로토타입 기반의 언어입니다. 프로토타입 기반 언어는 객체 원형인 프로토타입을 이용하여 새로운 객체를 만들어냅니다. 이렇게 생성된 객체 역시 또 다른 객체의 원형이 될 수 있습니다. 프로토타입은 객체를 확장하고 객체 지향적인 프로그래밍을 할 수 있게 해줍니다. 프로토타입은 크게 두 가지로 해석됩니다. 프로토타입 객체를 참조하는 prototype 속성과 객체 멤버인 proto 속성이 참조하는 숨은 링크가 있습니다. 이 둘의 차이점을 이해하기 위해서는 JavaScript 함수와 객체의 내부적인 구조를 이해 해야합니다. 이번 글에서는 JavaScript의..
JavaScript/Core & 개념ㆍ용어 2016. 12. 9. 12:05

insertAdjacentHTML() 메서드

insertAdjacentHTML - HTML 인접(adjacent)요소에 삽입하기 이 메서드를 사용하면 시작 태그의 앞, 시작 태그의 뒤, 종료 태그 앞, 종료 태그 뒤에 노드를 삽입하는 것이 가능합니다. 다음의 코드에서는 insertAdjacentHTML() 메서드를 사용해서 구성한 코드입니다. html how javascript var elm = document.getElementById('elm'); elm.insertAdjacentHTML('beforebegin', 'Hey-'); // 타켓 요소 전(형제레벨)에 생성- 시작 태그의 앞(형제 레벨로) elm.insertAdjacentHTML('afterbegin', 'jaehee-'); // 타켓 요소 다음(자식요소)에 생성 - 시작 태그의 뒤(..
JavaScript/연산자ㆍ메서드ㆍ프로퍼티 2016. 11. 3. 11:27

Chaining Pattern of JavaScript

체이닝패턴 체이닝 패턴이란 객체에 연쇄적으로 메서드를 호출할 수 있도록 하는 패턴입니다. 여러 가지 동작을 수행할 때, 먼저 수행한 동작의 반환 값을 변수에 할당한 후 다음 작업을 할 필요가 없기 때문에 호출을 여러 줄에 걸쳐 쪼개지 않아도 됩니다. javascript myobj.method1('hello').method2().method3('world').method4(); 만약 메서드에 의미있는 반환 값이 존재하지 않는다면, 현재 작업중인 객체 인스턴스인 this 를 반환하게 됩니다. 이렇게 하면 객체의 사용자는 앞선 메서드에 이어 다음 메서드를 바로 호출할 수 있습니다. javascript var obj = { value : 1, increment : function () { this.value +..
JavaScript/JS 객체지향 프로그래밍 2016. 10. 31. 07:00

자바스크립트의 객체 상수

객체 상수 자바스크립트에는 상수가 없지만 대다수 최신 브라우저 환경에서는 const 문을 통해 상수를 생성할 수 있습니다. 흔히 사용되는 우회적인 방법으로, 명명 규칙을 사용하여 값이 변경되지 말아야 하는 변수명을 모두 대문자로 쓰기도 합니다. 이 규칙은 실제로 자바스크립트 내장 객체에서도 사용됩니다. javascript Math.PI; // 3.1415922653589793 Math.SQRT2; // 1.4142135623720951 Number.MAX_VALUE; // 1.7976931348623157e+308 사용자 정의 상수에도 동일한 명명 규칙을 적용하여, 생성자 함수에 스태틱 프로퍼티로 추가할 수 있습니다. javascript // 생성자 var Widget = function () { // ..
JavaScript/JS 활용 & etc.. 2016. 10. 30. 09:30

Static member of JavaScript

스태틱 멤버 스태틱 프로퍼티와 메서드란 인스턴스에 따라 달라지지 않는 프로퍼티와 메서드 를 말합니다. 클래스 기반 언어에서는 별도의 문법을 통해 스택틱 멤버를 생성하여 클래스 자체의 멤버인 것처럼 사용할 수 있습니다. 예를 들어 MathUtils 클래스에 max() 라는 스태틱 메서드가 있다면MathUtils.max(2,5) 와 같은 식으로 호출할 수 있습니다. 이것은 공개 스태틱 멤버의 예로, 클래스의 인스턴스를 생성하지 않고도 사용할 수 있습니다. 비공개 스태틱 멤버는 클래스 사용자에게는 보이지 않지만 클래스의 인스턴스들은 모두 함께 사용할 수 있습니다. 그럼 자바스크립트에서 공개와 비공개 스태틱 멤버를 구현하는 방법을 살펴보도록 합니다. 공개 스태틱 멤버 자바스크립트에는 스태틱 멤버를 표기하는 별도..
JavaScript/JS 객체지향 프로그래밍 2016. 10. 29. 16:15

모듈 패턴(기타) 및 샌드박스 패턴 #3

모듈 노출 패턴, 생성자를 생성하는 모듈 그리고 샌드박스 패턴 이 포스팅에서는 전 포스팅의 모듈 패턴 #2 에서 알아본 내용 이외의 패턴들에 대해 알아봅니다. 모듈 노출 패턴 전 포스팅에서 비공개 멤버와 관련된 패턴을 살펴보면서 이미 노출 패턴을 다룬 바 있습니다. 모듈 패턴도 비슷한 방식으로 작성할 수 있습니다. 즉, 모든 메서드를 비공개 상태로 유지하고, 최종적으로 공개 API 를 갖출 때 공개할 메서드만 골라서 노출하는 것입니다. javascript var MYAPP = MYAPP || {}; MYAPP.namespace = function (ns_string) { var parts = ns_string.split('.'), parent = MYAPP, i; // 처음에 중복되는 전역 객체명은 제거..
JavaScript/JS 객체지향 프로그래밍 2016. 10. 19. 08:31

Global NameSpace Function(범용 네임스페이스 함수)

네임스페이스 패턴 생성시 유용한 범용적인 네임스페이스 함수 프로그램의 복잡도가 증가하고 코드의 각 부분들이 별개의 파일로 분리되어 선택적으로 문서에 포함하게 되면, 어떤 코드가 특정 네임스페이스나 그 내부의 프로퍼티를 처음으로 정의한다고 가정하기가 위험합니다. 네임스페이스에 추가하려는 프로퍼티가 이미 존재할 수도 있고 따라서 내용을 덮어쓰게 될 지도 모릅니다. 그러므로 네임스페이스를 생성하거나 프로퍼티를 추가하기 전에 먼저 이미 존재하는지 여부를 확인하는 것이 최선입니다. 다음의 예제를 살펴보도록 합니다. javascript // 위험하다. var MYAPP = {}; // 개선안 if (typeof MYAPP === 'undefined') { MYAPP = {}; } // 또는 더 짧게 작성할 수 있다..
JavaScript/JS 활용 & etc.. 2016. 10. 15. 07:00

모듈화와 모듈 패턴(module pattern) #2

Module Pattern모듈화와 모듈 패턴에 대해 알아봅니다. 먼저 이 개념에 대해 알아보기 전에 고유변수(private member)와 특권메소드(privileged member)에 대해 간략히 짚고 넘어가자. 자바 등 다른 언어와는 달리 자바스크립트에는 private, protected, public 프로퍼티와 메서드를 나타내는 별도의 문법이 없다. 객체의 모든 멤버는 public, 즉 공개되어 있다.다시 말해서,자바스크립트에는 고유 구성원(private member)이란 개념이 없으며 객체의 프로퍼티는 모두 공용(public)이다. 하지만 '고유변수'란 개념은 존재한다. 예를 들어 함수 안에서 정의한 변수는 함수 밖에서 접근할 수가 없으므로 모두 고유변수(private member)라고 간주한다...
JavaScript/JS 객체지향 프로그래밍 2016. 10. 14. 15:17

module pattern (모듈패턴) #1

Module Pattern 모듈 패턴을 알아보기 전에 네임스페이스란 용어부터 짚고 넘어가 보겠습니다. 네임스페이스란 수많은 함수, 객체, 변수들로 이루어진 코드가 전역 유효범위를 어지럽히지 않고, 애플리케이션이나 라이브러리를 위한 하나의 전역 객체를 만들고 모든 기능을 이 객체에 추가하는 것을 말합니다. 예를 들어 jQuery와 같은 라이브러리에서 jQuery가 네임스페이스를 가지며 jQuery 이름 내에 모든 기능을 추가하는 것을 말합니다. 다시 말해서, 코드에 네임스페이스를 지정해주며, 코드 내의 이름 충돌뿐만 아니라 이 코드와 같은 페이지에 존재하는 또 다른 자바스크립트 라이브러리나 위젯등 서드파티 코드와의 이름 충돌도 미연에 방지해 주는 것입니다. 우리는 이러한 네이스페이스 패턴을 작은 기능들 만..
JavaScript/JS 객체지향 프로그래밍 2016. 10. 14. 15:08

커링 함수 (Curring function)

커링(Curring)커링은 수학자 하스켈 커리로 부터 유래된 이름이고 함수를 변형하는 과정을 말한다.함수의 전달인자 몇 개를 미리 채움으로써 더 간단한 함수를 만드는 방법입니다. 커링은 인도 음식인 커리와 아무런 관계가 없습니다. 커링은 수학자 하스켈 커리(Haskell Curry)로 부터 유래되었습니다.(하스켈 프로그래밍 언어가 그의 이름에서 따온 것이다.) 커링은 이 변형 방법의 원래의 발명가인 모세 쉔핀켈 이름을 따서 쉔필켄이라고도 부릅니다. 커링을 사용하는 경우 어떤 함수를 호출할 때 대부분의 매개 변수가 항상 비슷하다면 커링을 사용할 만한 후보라고 할 수 있다. 매개변수 일부를 적용하여 새로운 함수를 동적으로 생성하면 이 동적 생성된 함수는 반복적으로 사용되는 매개변수를 내부적으로 저장하여, 매..
JavaScript/JS 활용 & etc.. 2016. 10. 14. 07:00

메모제이션(Memoization) 패턴

함수 프로퍼티 - Memoization Pattern(메모제이션 패턴) 함수는 객체이기 때문에 프로퍼티를 가질 수 있습니다. 사실 함수는 처음부터(생성될 때부터) 프로퍼티와 메서드를 가지고 있습니다. 예를 들어, 각 함수는 어떤 문법으로 생성하는 자동으로 length 프로퍼티를 가지고 있습니다. 이 프로퍼티는 함수가 받는 인자의 개수를 값으로 가지게 됩니다. javascript function func(a, b, c) {} console.log(func.length); // 3 이 기록된다. 언제든지 함수에 사용자 정의 프로퍼티를 추가할 수 있습니다. 함수에 프로퍼티를 추가하여 결과(반환 값)을 캐시하면 다음 호출 시점에 복잡한 연산을 반복하지 않을 수 있습니다. 이런 활용 방법을 메모제이션(Memoiz..
JavaScript/JS 활용 & etc.. 2016. 10. 13. 09:29

자기 자신을 정의하는 함수(lazy function)

자기 자신을 재정의하는 함수 함수는 동적으로 정의할 수 있고 변수에 할당할 수 있습니다. 새로운 함수를 만들어 이미 다른 함수를 가지고 있는 변수에 할당하면, 새로운 함수가 이전 함수를 덮어 쓰게 됩니다. 어떤 면에서는 이전의 함수 포인터가 새로운 함수를 가리키도록 재사용하는 것이다. 이러한 일을 이전 함수의 본문 내에서 할 수도 있습니다. 이 경우 함수는 자기 자신을 새로운 구현으로 덮어쓰고 재정의할 수 있습니다. 아마도 실제보다 더 복잡하게 들릴 텐데 간단한 아래의 예제를 통해 알아보도록 합니다. lazy function definition(게으른 함수 선언) 다음의 예제를 살펴보도록 합니다. javascript var scareMe = function () { console.log('Boo!!!')..
JavaScript/JS 활용 & etc.. 2016. 10. 12. 09:39