javascript 검색 결과

해당 글 44건

자바스크립트 비공개 프로퍼티와 메서드

JS 비공개(private) 멤버 및 특권(privileged) 메서드 자바 등 다른 언어와는 달리 자바스크립트에는 private, protected, public 프로퍼티와 메서드를 나타내는 별도의 문법이 없습니다. 객체의 모든 멤버는 public, 즉 공개되어 있습니다. 자바스크립 객체의 모든 멤버는 공개되어 있다 위에 언급했듯이 다른 언어와 달리 별도의 문법이 없기 때문에 일반적으로 객체의 모든 멤버는 공개되어 있습니다. 다음의 예제를 살펴봅니다. javascript var myObj = { myProp : 1, getProp: function () { return this.myProp; } }; console.log(myObj.myProp); // myProp 에 공개적으로 접근할 수 있다. co..
JavaScript/JS 객체지향 프로그래밍 2018. 12. 25. 21:06

call/apply & this 값 설정

call() 또는 apply()를 사용한 this 값 설정하기 this의 값은 함수가 호출된 컨텍스트에 따라 보통 달라집니다.(new 키워드를 사용한 경우는 예외) 하지만 apply()나 call()을 사용해 함수를 호출할 때 this가 참조할 객체를 정해주는 방식으로 this의 값을 조작(제어)할 수 있습니다. 말하자면, 이 방식은 자바스크립트에게 "JS야~ X함수를 호출해. 하지만 X함수에는 this 값으로 Z객체를 사용하라고 일러줘~!!!"라고 말하는 셈과 같습니다. 이 방식을 사용하면 바로 자바스크립트에서 설정한 this의 값을 재정의 할 수 있습니다. call() & this 값 설정 다음의 코드는 하나의 객체와 하나의 함수를 정의한 후 call()을 사용해 함수를 호출하며, 함수 내부의 thi..
JavaScript/this 키워드 2016. 10. 4. 08:57

arguments 객체

Argument Object 호출하는 함수의 파라미터에 test(5, true,'str')와 같이 세 개의 파라미터를 넘겨주고 호출을 받는 함수의 파라미터에 받는 이름을 작성하지 않더라도 세 개의 파라미터 값을 사용할 수 있다. 이렇게 호출한 함수의 파라미터 값을 호출받은 함수에서 파라미터 값을 저장해 두고 있는데, 호출한 함수의 파라미터 값을 저장해 두는 곳이 arguments 객체이다. 호출받은 함수에서 arguments 객체에 접근하기 위해서는 오브젝트 이름이 필요하며 arguments가 그 이름이다. 즉, arguments 객체에 호출한 함수의 파라미터 값이 순서에 따라 저장되며 호출하는 함수에서 파라미터를 지정하지 않더라도 arguments 객체가 생성되고 파라미터가 없으면 빈 값이 저장되지만 ..
JavaScript/연산자ㆍ메서드ㆍ프로퍼티 2016. 9. 29. 13:30

배열 메서드 join()

join method 배열 메서드인 join 메서드에 대해 알아봅니다. Array.join() join 메서드는 배열의 원소를 결합해서 하나의 문자열로 만듭니다. Syntax JavaScript array.join(separator); 인자(Parameters) 인자명 데이터형 필수/옵션 설명 separator string 필수 배열의 원소를 하나의 문자열로 결합할 때 원소와 원소 사이에 위치할 문자열 반환값(Return) string 설명(Description) 첫번째 인자(separator)로 배열의 원소를 결합해서 하나의 문자열을 만듭니다. string.split와 반대되는 기능입니다. 예제 코드 JavaScript var a = new Array("welcome","coding","everybod..
JavaScript/연산자ㆍ메서드ㆍ프로퍼티 2016. 9. 29. 13:29

Array.splice 메서드

배열 메서드 splice() Array 객체의 splice 메소드에 대해 알아봅니다. splicesplice 배열 데이터를 원하는 만큼 삭제할 수 있습니다. 기본 => splice(start, length) 즉, (해당인덱스부터, 삭제할 개수) 세번째 매개변수부터는 배열에 데이터를 삽입할 수 있습니다. 항상 원래 배열에서 삭제한 데이터의 배열을 반환합니다. 삭제한 것이 없다면 빈 배열을 반환합니다. 요약 배열의 특정구간을 추출하거나, 특정구간에 특정 배열을 추가합니다. 문법(Syntax) JavaScript array.splice(index, howmany, element1, ...., elementN); 인자(Parameters) 인자명 데이터형 필수/옵션 설명 index number 필수 배열에 추가..
JavaScript/연산자ㆍ메서드ㆍ프로퍼티 2016. 9. 29. 13:28

Array.slice() - slice 메소드

배열 메서드 - slice 배열 메서드 중에 slice 메서드에 대해 알아봅니다. slice() Array.slice() 메서드는 배열의 일부분(slice) 혹은 부분 배열(subarray)을 반환합니다. slice() 메서드는 전달 인자를 두 개 받는데, 각 인자는 반환될 부분의 처음과 끝을 각각 명시합니다. 반환되는 배열은 첫 번째 전달인자가 지정하는 위치부터 두 번째 전달인자가 지정하는 위치를 제외한 그 사이의 모든 원소를 포함합니다. 만약 전달 인자를 하나만 명시하면, 그 위치에서 배열 끝까지의 모든 원소를 포함하는 부분 배열을 반환합니다. 만약 전달 인자가 음수라면 배열의 마지막 원소에서 상대적인 위치로 배열 원소를 지정합니다. 예를 들어, 전달 인자 -1은 배열의 마지막 원소를 가리키며, 전달..
JavaScript/연산자ㆍ메서드ㆍ프로퍼티 2016. 9. 29. 13:28

Array 객체의 메소드

Array 주요 멤버 메소드 내용 join([str]) 배열에 들어 있는 값을 모두 붙여서 하나의 문자열로 반환 ex) test.join() // 결과 "test1,test2,test3" sort(function) 배열값들을 매개변수(값을 비교하는 함수)를 이용하여 정렬 파라미터인 function은 선택사항(필수아님) reverse() 배열의 순서를 정반대로 바꾼다 concat(array) 두개의 배열을 합해 하나의 배열로 반환(1차원 배열로 반환) push() 배열의 마지막에 새로운 원소를 추가(반환 값은 추가한 후의 lengh) pop() 배열의 마지막의 원소를 추출(가장 최근에 push()한 것을 추출) 반환값은 삭제한 배열의 원소(엘리먼트), pop의 파라미터는 사용하지 않음 다음의 코드를 통해 ..
JavaScript/연산자ㆍ메서드ㆍ프로퍼티 2016. 9. 29. 13:27

Event flow & Event Handling

이벤트 흐름과 이벤트 핸들링 이 글에서는 이벤트 흐름과 핸들링에 대해 알아봅니다. 이벤트 흐름 단계 단 계설 명 캡처링 단계(capture phase) 이벤트가 문서의 루트객체인 Document를 거쳐 이벤트가 발생한 타겟 객체의 부모 객체까지 전달되는 단계 타겟 단계(target phase)이벤트가 발생한 객체로 전달되는 단계 버블링 단계(bubbling phase)타겟 객체의 부모에서 Document 객체까지 전달되는 단계 Dom Level 2 - 이벤트 핸들링 addEventListener(), removeEventListener() elm.addEventListener( string type, Function handler, useCapture) addEventlistener 메소드의 매개변수 매..
JavaScript/JS 활용 & etc.. 2016. 9. 29. 13:02

[자바스크립트] 이벤트 모델의 전파 과정

이벤트 전달을 막는 4가지 방법 이벤트 모델은 DOM의 구조를 두 번 순회합니다. 이벤트가 호출되면 최상위 루트에서 자식 엘리멘트들을 타고 이벤트 타깃까지 내려가는 캡쳐 단계가 일어나고 다시 반대로 이벤트의 타킷으로부터 최상위 루트까지 올라가는 버블 단계가 일어납니다. 이러한 이벤트 전파 과정을 통해서 예상치 못한 결과가 발생하는 경우가 있는데 예를 들어 부모 요소와 자식 요소 두 곳에 click 이벤트를 생성한 후 자식 요소를 클릭하여 이벤트를 호출할 때 클릭하지 않은 부모 요소에서 클릭이 발생하게 됩니다. 이런 의도치 않은 반응이 일어나 문제가 발생되는 것은 이벤트 모델의 전파과정 중 버블링 단계에서 이벤트를 발생하기 때문입니다. 하지만 event 객체에 stopPropagation() 메소드를 호출..
JavaScript/JS 활용 & etc.. 2016. 9. 29. 13:02

함수 선언문과 함수 표현식에서의 세미콜론(;)

Semi Colon 일반적으로 코드를 작성할 때 함수 표현식에서는 ;(세미콜론)을 붙히고 함수 선언문으로 작성할 시에는 ;(세미콜론)을 붙이지 않는다. 이것은 하나의 관습이고 코드 작성시 권장되는 방식이다. 그리고 자바스크립트에서 세미콜론 사용을 강제하지는 않는다. 그 이유는 자바스크립트 인터프리터가 자동으로 세미콜론을 삽입시켜 주기 때문이다. 하지만 세미콜론에 신경을 쓰지 않는다면 소스 압축 배포를 하거나 디버깅을 할 시에 심각한 상황에 직면하게 될 것이다. 다음의 코드 예제를 살펴보자 // 'hello world!!!' 를 출력하려는 코드 // 함수 표현식에 세미콜론을 사용하지 않음 var test = function() { return 300; } // 세미콜론 없음 (function() { con..
JavaScript/JS 활용 & etc.. 2016. 9. 29. 13:01

자바스크립트 네임스페이스 패턴 - namespace pattern

자바스크립트 설계 패턴 - Namespace Pattern 네임스페이스는 프로그램에서 필요로 하는 전역 변수의 개수를 줄이는 동시에 과도한 접두어를 사용하지 않고도 이름이 겹치지 않게 해줍니다. 자바스크립트의 언어 문법에 내장되어 있지는 않지만, 네임스페이스는 꽤 쉽게 구현할 수 있는 기능입니다. 네임스페이스 패턴 대개 애플리케이션이나 라이브러리를 위해 전역 유효 범위에 수많은 함수, 객체, 변수들로 어지럽히지 않도록 하기 위해 전역 객체를 하나 만들고(단 하나만 만드는 것이 이상적이다) 모든 기능을 이 객체에 추가하는 패턴을 네임스페이스 패턴이라고 합니다. 다음의 예제는 안티 패턴입니다. JavaScript // 수정 전 : 전역 변수 5개 // 경고 : 안티 패턴 // 생성자 함수 2개 functio..
JavaScript/JS 객체지향 프로그래밍 2016. 9. 29. 10:38

자바스크립트 프로토타입(Prototype)

Prototype 자바스크립트는 C++,자바와 같은 클래스를 정의하고 이를 통해 객체를 생성하여 객체지향 프로그래밍을 하는 것과는 달리 클래스란 개념이 없다. 대신에 객체 리터럴이나 생성자 함수로 객체를 생성하여 객체지향 프로그래밍을 지원하는데 이렇게 객체리터럴, 생성자 함수로 생성된 객체의 부모 객체가 바로 '프로토타입 객체'이다. 즉, 상속개념과 마찬가지로 자식 객체는 부모 객체가 가진 프로퍼티에 접근하거나 메소드를 상속받아서 호출하는 것이 가능하도록 해준다. 그래서 자바스크립트는 클래스 기반이 아닌 프로토타입 기반의 객체지향 프로그래밍을 지원가능하도록 해준다. 자바스크립트의 모든 객체는 객체 자신의 부모인 프로토타입 객체를 가리키는 숨겨진 프로퍼티가 있는데 이 숨겨진 프로퍼티가 prototype 프..
JavaScript/JS 객체지향 프로그래밍 2016. 9. 29. 10:28

함수의 프로토타입 - prototype

프로토타입 체인(Prototype Chain) 자바스크립트는 Function() 인스턴스에 자동으로 prototype 이라는 속성을 만듭니다. 구체적으로 말하자면 prototype 속성은 new 키워드와 생성자 함수를 같이 사용해서 만든 객체에 연결됩니다. 인스턴스들은 생성자 함수의 prototype 속성을 통해 공통의 메소드와 속성을 공유하고 상속합니다. 중요한 사실은 이러한 공유가 속성을 검색하는 동안 일어난다는 것입니다. 즉, 우리가 어떤 객체의 속성을 찾거나 접근하면 자바스크립트는 그때마다 해당 객체는 물론 프로토타입 체인에서도 그 속성을 찾습니다. 함수는 모두 prototype 객체를 포함하고 있다. 심지어 생성자 함수로 사용할 생각이 전혀없는 함수도 prototype 객체를 자동으로 포함한다...
JavaScript/JS 객체지향 프로그래밍 2016. 9. 29. 10:26

자바스크립트는 프로토타입 기반의 객체지향 프로그래밍 언어이다.

프로토타입 기반 프로그래밍 자바스크립트를 객체지향적인 언어라고 말할 수 있는 가장 중요한 이유 중 하나는 프로토타입 상속(prototypal inheritance) 이라는 확장과 재사용을 가능하게 해주기 때문입니다. 프로토타입 기반 프로그래밍은 객체의 원형인 프로토타입을 이용하여 새로운 객체를 만들어내는 프로그래밍 기법입니다. 이렇게 새롭게 만들어진 객체 역시 자기자신의 프로토타입을 가지고 있으며 이 새로운 객체의 원형을 이용하면 또 다른 새로운 객체를 만들어 낼 수도 있으며 이런 방식,구조로 객체를 확장하는 방식을 프로토타입 기반의 프로그래밍 언어라고 말합니다. 자바스크립트에서 사용되는 프로토타입이란 용어는 크게 두가지로 나누어지고 있기 때문에 이 두가지를 구분하는 것이 중요합니다. 프로토타입 프로퍼티..
JavaScript/JS 객체지향 프로그래밍 2016. 9. 29. 10:22

String 클래스

String 클래스란? String 클래스에는 문자열을 생성하는 기능은 물론 문자열과 관련된 다양한 기능을 가지고 있습니다. 문자열 처리를 문자열 리터럴인 "문자열" 형태로 많이 사용했기 때문에 간과할 수도 있겠지만 사실 문자열 리터럴은 자동으로 String(문자열) 클래스로 변환되어 사용되어 집니다. 주요 기능 String 클래스에서 자주 사용되는 프로퍼티와 메서드는 다음과 같습니다. 프로퍼티 목록 프로퍼티 내 용 (설명) length 문자열 개수 메소드 목록 프로퍼티 내 용 (설명) charAt(n) n번째 문자 구하기 charCodeAt(n) n번째 문자의 코드 값 구하기 concat(str) 문자열 뒤쪽에 str 을 연결해서 새로운 문자열을 만들기 indexOf(substr) substr 문자열이..
JavaScript/Core & 개념ㆍ용어 2016. 9. 29. 09:30