본문 바로가기

Javascript

 (31)
[Javascript: apply] 함수의 호출 / apply 응용 함수의 호출: Function.apply(), Function.call() function sum(arg1, arg2) { return arg1+arg2; } alert(sum.apply(null, [1,2])) // sum(1,2) apply 응용 o1 = {val1:1, val2:2, val3:3} o2 = {v1:10, v2:50, v3:100, v4:25} function sum() { var _sum = 0; for(name in this){ // this값을 프로그래밍적으로 변경해서 사용할 수 있게 된다. _sum += this[name]; } return _sum; } alert(sum.apply(o1)); // 6 alert(sum.apply(o2)); // 185
[Javascript: Arguments] Arguments란? / function length Arguments란? 함수에서 arguments라는 변수에 함수를 호출할 때 입력한 인자가 담겨있다. 배열처럼 사용한다. 객체의 일종. function sum(){ var i, _sum = 0; for(i = 0; i < arguments.length; i++){ // 인자의 길이만큼 for문 document.write(i+' : '+arguments[i]+' '); _sum += arguments[i]; // 인자값을 배열처럼 접근 } return _sum; } document.write('result : ' + sum(1,2,3,4)); // 원하는 개수만큼의 인자 전달 가능 * Arguments(인자)와 parameters(매개변수)의 차이 function a(arg1) { // arg1: 매개변수..
[Javascript: 클로저(closure)] 내부함수, 외부함수, 클로저란 내부함수가 외부함수의 맥락(context)에 접근할 수 있는 것을 가리킨다. 내부함수와 외부함수 function outter() { // 외부함수 var title = 'coding everybody'; // 외부함수의 지역변수 function inner() { // 내부함수 alert(title); // 내부함수에서 외부함수의 지역변수 접근 } inner(); } outter(); * 정적 유효범위와의 차이점을 기억할 것! https://jisun-rea.tistory.com/entry/Javascript-%EC%9C%A0%ED%9A%A8%EB%B2%94%EC%9C%84-%EC%A0%84%EC%97%AD%EB%B3%80%EC%88%98-%EC%A7%80%EC%97%AD%EB%B3%80%EC%8..
[Javascript: 콜백(Callback)] 콜백의 정의 / 비동기 처리 / Ajax 처리의 위임 var sortFunc = function(a, b) { return a-b; // if(a>b) return 1; else if(a
[Javascript: 값으로서의 함수] 속성값 / 메소드 / First-class citizen 값으로서의 함수 자바스크립트에서는 함수도 객체이다. 즉, 값이다. 함수 역시 변수에 담을 수 있는 속성을 갖고있다는 뜻이다. // 변수 a에 담겨진 함수 function a(){} // var a = function(){}; // 객체의 속성값(b)에 담겨진 함수(메소드) a = { b:function() {} } 다른 함수의 인자로 전달될 수 있다. // 첫번쨰 인자는 함수, 두번째 인자는 함수의 파라미터값 function cal(func, num){ return func(num) } function increase(num){ return num+1 } function decrease(num){ return num-1 } alert(cal(increase, 1)); // 2 alert(cal(decre..
[Javascript: 유효범위] 전역변수 / 지역변수 / 전역변수 사용법 / 유효범위의 대상(함수) / 정적 유효범위 전역변수와 지역변수 var vscope = 'global'; // 전역변수 function fscope(){ var vscope = 'local'; // 지역변수 alert('함수안 '+vscope); } fscope(); // 함수안 local alert('함수밖 '+vscope); // 함수밖 global * 같은 이름의 지역변수와 전역변수가 동시에 정의되어 있으면 지역변수가 우선한다. 그런데 만약 코드가 다음과 같다면 결과는 이렇게 바뀐다. var vscope = 'global'; function fscope(){ vscope = 'local'; // var 키워드 삭제 alert(vscope); // local } fscope(); alert(vscope); // local * var을 생략하면 ..
[Javascript: 정규표현식(Regular expression)] 패턴 / 리터럴 / 객체 생성자 / RegExp 객체 사용 / 문자열 메소드 / 옵션 / 캡처 / 치환 패턴 만들기(객체 생성): 정규표현식 리터럴과 객체 생성자 /* 정규표현식 리터럴 */ var pattern1 = /a/; // '/'와 '/'사이의 a가 우리가 찾고자하는 것 /* 정규표현식 객체 생성자 */ var pattern2 = new RegExp('a'); // 위의 방법과 같은 결과 RegExp 객체 사용(메소드 실행): RegExp.exec(), RegExp.test() 정규표현식을 통해 객체를 생성했다면 이제 문자열에서 원하는 문자를 찾아내보자. ex) 어떤 문자열에서 url 혹은 email 등에 해당되는 정보를 추출해내고 싶다. /* RegExp.exec(): 찾고자하는 패턴이 있다면 그것을 배열로 리턴 */ var pattern = /a/; console.log(pattern.exec..
[Javascript: 모듈(Module)] 모듈화 / 라이브러리 모듈화 예제: greeting.js, main.html // greeting.js function welcome() { return 'hello world'; } // main.html * script 태그에 src라는 속성을 확인하여 그 속성값에 해당하는 파일을 읽어와서 script 태그 안에 넣는 것과 같은 효과를 낸다. 라이브러리: jQuery 예제 https://jquery.com/ jQuery What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and..

티스토리툴바