본문 바로가기

UI개발

자바스크립트 클로저 클로저 closure 내부함수가 외부함수 변수에 접근할 수 있는 것 외부함수가 종료되었더라도 내부함수에서 외부함수의 변수에 접근할 수 있는 방법 함수 안에서 또 다른 함수를 선언하여 내부함수를 만들 수 있다. function outerFuc(){ // 외부함수 function innerFuc(){ // 내부함수 } innerFuc(); } outerFuc(); 내부함수에서 외부함수 지역변수에 접근할 수 있다. function outerFuc(){ var text = '지역변수'; function innerFuc(){ console.log(text); } innerFuc(); } outerFuc(); 외부함수가 더 이상 사용되지 않아도 내부함수가 외부함수 변수에 접근할 수 있다. function outer.. 더보기
네임스페이스 네임스페이스 전역 변수와 함수를 하나의 함수로 감싸 지역변수로, 객체 안의 속성으로 만드는 것을 네임스페이스를 만든다고 표현 전역 변수와 객체, 함수들 = 지저분한 코드 var abc = 'ABC'; var aaa = 'AAA'; var m = {}; m.mm = 'mmm'; function abcFunc(){ console.log(abc, aaa, m.mm); } abcFunc() 객체 리터럴 패턴 하나의 전역 객체를 생성한 후 그 전역 객체 안에 구현 var obj = { x : 'x', y : function(){ console.log( this.x ); } } obj.x; obj.y(); 단점 : 수정 가능 obj.x = '바보 메롱'; 방지하려면 즉시실행함수를 추가한 패턴으로 var obj = .. 더보기
자바스크립트 렉시컬스코프 함수의 상위 스코프를 결정하는 두 가지 동적스코프 - 함수를 어디서 호출했는지에 따라 상위 스코프 결정 정적스코프 - 함수를 어디서 선언했는지에 따라 상위 스코프 결정 정적스코프 = 렉시컬스코프 lexical scope var msg = 'zz'; function log(){// 함수 선언 순간 가장 가까운 변수 참조 console.log(msg); } function outer(){ msg = 'ㅋㅋ'; log(); } outer(); // ㅋㅋ var msg = 'rr'; function log(){// 함수 선언 순간 가장 가까운 변수 참조 console.log(msg); } function outer(){ var msg = 'ㄱㄱ'; log(); } outer(); // rr 전역변수를 지양해야하.. 더보기
자바스크립트 함수표현식 함수표현식 함수 표현식은 값을 반환하는 식 함수를 변수에 할당하는 방법 var funcExpressions = function() { console.log('안녕'); }; funcExpressions(); // funcExpressions 변수에 익명함수를 저장한 것 기명 함수 표현식 var funcExpressions = function namedFuc() { // 이름이 있기 때문에 namedFuc(); // 호출 가능 } namedFuc(); // 밖에서는 호출할 수 없다 funcExpressions(); // funcExpressions 변수에 namedFuc 함수를 저장한 것 함수 표현식과 선언식의 차이점 : 호이스팅 함수 표현식 장점 : 익명 함수의 콜백 사용, 클로저 즉시 호출 함수 표현식.. 더보기
[프로그래머스] 정수 내림차순으로 배치하기 - javascript 프로그래머스 코딩테스트 연습 - 정수 내림차순으로 배치하기 설명 정수 n의 각 자릿수를 큰 것부터 작은 순으로 정렬한 새로운 정수를 리턴 조건 n는 길이 1이상 8000000000 이하인 자연수 입출력 예 n return 118372 873211 solution.js function solution(n) { return Number(n.toString().split('').sort().reverse().join('')); } solution(118372) 풀이 toString() - 문자타입으로 변환 split() - 문자열을 구분자로 잘라서 배열로 저장 sort() - 배열을 정렬 reverse() - 원소 순서를 반대로 join() - 배열 합치기 Number() - 숫자타입으로 변환 숫자를 문자로 .. 더보기
[프로그래머스] 문자열 내림차순으로 배치하기 - javascript 프로그래머스 코딩테스트 연습 - 문자열 내림차순으로 배치하기 설명 문자열 s에 나타나는 문자를 큰 것부터 작은 순으로 정렬해 새로운 문자열을 리턴하는 함수 s는 영문 대소문자로만 구성되어 있으며, 대소문자는 소문자보다 작은 것으로 간주 조건 s는 길이 1이상인 문자열 입출력 예 s return "Zbcdfg" "gfedcbZ" solution.js function solution(s) { return s.split('').sort().reverse().join(''); } solution('Zbcdefg') 풀이 split() - 문자열을 구분자로 잘라서 배열로 저장 sort() - 배열을 정렬 reverse() - 원소 순서를 반대로 join() - 배열 합치기 문자열을 한글자씩 잘라 배열에 저장 후 .. 더보기
자바스크립트 - 콜백의 동기와 비동기 callback 함수 = 나중에 실행하는 함수 자바스크립트에서 함수는 다른 함수의 인자로 넘길 수 있고(argument), 리턴 값으로 함수를 쓸 수 있고, 변수에 함수를 넣을 수 있다. 이를 일급 객체라고 한다. 동기적(순차적) 콜백 function fakeSetTimeout(callback, delay){ callback(); } console.log('0'); fakeSetTimeout(function(){ console.log('어쩌고'); }, 0); console.log('1'); /* 0 어쩌고 1 */ 비동기적 콜백 console.log('0'); setTimeout(function(){ console.log('저쩌고'); }); console.log('1'); /* 0 1 저쩌고 (저쩌고.. 더보기
이벤트 전파를 중단하는 방법 이벤트 전파 가장 아래 있는 div를 클릭할 경우 부모 div의 클릭이벤트까지도 모두 동작하는 것. 이러한 이벤트 전파를 막기 위해 사용하는 코드 event.preventDefalut() 현재 이벤트의 기본 동작을 중단. event.stopPropagtion() 현재 이벤트가 상위로 전파되지 않도록 중단. event.stopImmediatePropagtion() 현재 이벤트가 상위뿐 아니라 현재 레벨에 걸린 다른 이벤트도 동작하지 않도록 중단. return false event.preventDefalut()와 같다. 더보기
자바스크립트 객체지향 - Prototype Prototype 객체의 원형 function Ultra(){} Ultra.prototype.ultraProp = true; function Super(){} Super.prototype = new Ultra(); function Sub(){} Sub.prototype = new Super(); var o = new Sub(); console.log(o.ultraProp);// true new를 붙이면 함수는 생성자가 되고 객체를 리턴한다. var o = {}; 로 하지 않는 이유는? 객체를 만들 때 객체가 가지고 있어야하는 메소드(데이터)인 프로퍼티 값을 가지고 있어야 하기 때문에 function func(){} func.prototype // func {} func.protoyupe.name = "커.. 더보기
자바스크립트 객체지향 - 상속 상속 inheritance 상속은 객체의 로직을 그대로 물려 받는 또 다른 객체를 만들 수 있는 기능. 단순히 물려받는 것이 아니라 기존 로직을 수정하고 변경해서 파생된 새로운 객체를 만들 수 있게 해줌. function Person(name){ this.name = name; this.introduce = function(){ return '나는 ' + this.name; } } var p1 = new Person('찡찡이'); console.log( p1.introduce() ); // 나는 찡찡이 prototype 사용 function Person(name){ this.name = name; } Person.prototype.name = null; Person.prototype.introduce =.. 더보기
자바스크립트 객체지향 - this this this는 함수 내에서 함수 호출 맥락(context)을 의미한다. 맥락이라는 것은 상황에 따라서 달라진다는 의미. 가변적이다. 함수를 호출했을 때 this function func(){ if( window === this ){ console.log('this는 window'); } } func(); // this는 window 메소드를 호출했을 때 this var o = { func : function(){ if(o === this){ console.log('this는 o') } } } o.func(); // this는 o 메소드가 소속되어있는 객체가 this 생성자를 호출했을 때 this var funcThis = null; function Func(){ funcThis = this; } v.. 더보기
자바스크립트 객체지향 - 전역객체 전역객체 global object 모든 객체는 window 전역객체의 프로퍼티다. function func(){ console.log('안녕하세요'); } func(); window.func(); var o = { 'func' : function(){ console.log('안녕하세요'); } } o.func(); window.o.func(); 전역객체 이름은 호스트 환경에 따라 달라진다. 웹브라우저에서 전역객체는 window이지만 node.js에선 global이다. 더보기

티스토리툴바