본문 바로가기

전체 글53

arguments(인자) arguments 함수에는 arguments라는 변수에 담긴 숨겨진 유사 배열이 있다. 이 배열에는 함수를 호출할 때 입력한 인자가 담겨있다. 아래 예제를 보자. 결과는 10이다. function sum() { let _sum = 0; for (let i = 0; i < arguments.length; i++) { document.write(i + ":" + arguments[i] + " "); _sum += arguments[i]; // 1 3 6 10 } return _sum; } document.write(`result : ${sum(1, 2, 3, 4)}`); // 10 함수 sum은 인자로 전달된 값을 모두 더해서 리턴하는 함수다. 그런데 1행처럼 함수 sum은 인자에 대한 정의하가 없다. 하지.. 2021. 7. 17.
클로저(Closure) 클로저(closure)는 내부함수가 외부함수의 맥락(context)에 접근할 수 있는 것을 가르킨다. 클로저는 자바스크립트를 이용한 고난이도의 테크닉을 구사하는데 필수적인 개념으로 활용된다. 내부함수 자바스크립트는 함수 안에서 또 다른 함수를 선언할 수 있다. 아래의 예제를 보자. 결과는 경고창에 coding everybody가 출력될 것이다. function outter() { function inner() { let title = "coding everybody"; console.log(title); } inner(); } outter(); 위의 예제에서 함수 outter의 내부에는 함수 inner가 정의 되어 있다. 함수 inner를 내부 함수라고 한다. 내부함수는 외부함수의 지역변수에 접근할 수 .. 2021. 7. 17.
값으로서의 함수와 콜백 값으로서의 함수와 콜백 function a(){} === let a =function (){} === let a = () => {} 위의 예제에서 함수 a는 변수 a에 담겨진 값이다. 또한 함수는 객체의 값으로 포함될 수 있다. 이렇게 객체의 속성 값으로 담겨진 함수를 메소드(method)라고 부른다. 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)).. 2021. 7. 17.
함수 유효범위 : 전역변수와 지역변수 함수 유효범위 : 전역변수와 지역변수 유효범위(Scope)는 변수의 수명을 의미한다. 아래의 예제를 보자. 결과는 global이다. var vscope = "global"; // 전역변수 global function fscope() { var vscope = "local"; // 지역변수 local // alert(vscope); // 'local' 함수내부위 vscope가 없을떄 "global" } let a = "sc"; console.log(a); // sc function fscope2() { // alert(vscope); // "global" var lv = "local variables"; a = "kk"; console.log(a); //kk } fscope(); fscope2(); con.. 2021. 7. 16.
상속, prototype 상속, prototype; const user = { name: "Mike", }; user.name; // "Mike" user.hasOwnProperty("name"); // true user.hasOwnProperty("age"); // false const user = { name: "Mike", hasOwnProperty: function () { console.log("haha"); }, }; user.hasOwnProperty(); // "haha" const car = { wheels: 4, drive() { console.log(drive); }, }; const bmw = { color: "red", navigation: 1, }; const benz = { color: "black",.. 2021. 7. 13.
call, apply, bind call, apply, bind 함수 호출방식과 관계없이 this를 지정할 수 있음 call call멧서드는 모든 함수에서 사용할 수 있으며, this를 특정값으로 지정할수 있습니다. const Mike = { name: "Mike", }; const Tom = { name: "Tom", }; function showThisName() { console.log(this.name); } showThisName.call(Mike); // Mike showThisName.call(Tom); // Tom function update(birthYear, occupation) { this.birthYear = birthYear; this.occupation = occupation; } update.call(Mike.. 2021. 7. 13.
setTimeout /setInterval setTimeout 일정 시간이 지난 후 함수를 실행 setInterval 일정 시간 간격으로 함수를 반복 function fn() { console.log(3); } setTimeout(fn, 3000); setTimeout(() => { console.log(3); }, 3000); const tid = function showName(name) { console.log(name); }; setTimeout(showName, 3000, "Mike"); clearTimeout(tid); // 3초가 지나기 전에 이 코드가 실행되어 아무것도 일어나지않는다 setInterval function showName(name) { console.log(name); } const tid = setInterval(s.. 2021. 7. 12.
어휘적 환경(Lexical Environment) 클로저 어휘적 환경(Lexical Environment) closeure 클로저 함수와 렉시컬 환경의 조합 함수가 생성될떄 당시의 외부 변수를 기억 생성 이후에도 계속 접근 가능 let one; one = 1; function addOne(num) { console.log(one + num); // } addOne(5); //6 내부Lexical 환경 one = 1 // addOne : function 전역Lexical 환경 num = 5 ----------------------------------------------- function makeAdder(x) { return function (y) { return x + y; }; } // 5 const add3 = makeAdder(3); // x cons.. 2021. 7. 12.
나머지 매개변수, 전개구문 / (Rest parameters, Spread syntax) 나머지 매개변수, 전개구문 (Rest parameters, Spread syntax) ... 인수전달 function showname(name) { console.log(name); } showname("Mike"); // 'Mike' showname("Mike", "Tom"); // '? showName(); // undefined arguments 1. 함수로 넘어 온 모든 인수에 접근 2. 한수내에서 이용 가능한 지역 변수 3. length / index 4. array 형태의 객체 5. 배열의 내장 메서드 없음 (forEach, map) function showname(name) { console.log(arguments.length); console.log(arguments[0]); consol.. 2021. 7. 12.

티스토리툴바