우리집앞마당

자바스크립트의 함수는 자바의 메서드와 다르게 오버로딩이 되지 않는다. 오버로딩이란 동일한 메서드명에 매개변수의 타입이나 개수만 바꿔 동일 명칭의 메서드를 여러개 정의하는것을 말한다. 그런데 이걸 잘 모르는 자바개발자들이 함수를 짤때 함수의 인자 개수를 근거로 오버로딩을 구현한걸 심심찮게 실무에서 접할 수 있다(나도 본적이 있다.). 아마 테스트를 안했거나 대충 한두번 돌려봤는데 에러가 없으니 성공적으로 오버로딩이 됐다고 생각하고 넘어갔으리라. 사실 여태 포스팅한걸 근거로 생각했을때 자바스크립트에서 함수 오버로딩이 지원되지않는다는건 쉽게 추적할 수 있다. 1. 함수는 변수로 취급된다. -동일한 명칭의 변수가 여러개로 선언될 수는 없으니 당연히 오버로딩은 안된다. 2. 모든 변수는 전역 객체(window)의..

앞선 포스팅에서 프로토타입을 살짝 맛봤다. 함수를 정의하게되면 개발자의 의지와는 상관없이 프로토타입이라는 객체가 생성되게되고, 함수를 그냥 메서드 사용하듯 호출할때는 크게 신경쓸필요없지만 생성자로 사용하게될경우엔 해당 함수를 생성자로 생성된 객체가 해당함수의 프로토타입을 바라본다는것까지 포스팅을 했다. 그리고 동일한 생성자로 생성된 각각의 다른 인스턴스들이 모두 한 프로토타입 객체를 바라보기때문에 인스턴스들이 공유하는 자원은 생성자의 프로토타입 객체에 정의하게되면 자바의 static 변수와같이 메모리를 절약할수있다는것까지 알게되었다. 그럼 여기서 본질적인 궁금증을 가져보자. 인스턴스들은 어떤식으로 자신의 생성자의 프로토타입 객체를 바라보게되는것일까? function Undead(){ this.name =..

자바스크립트는 크게 함수와 객체로 구성되어있다고 보면 된다. 사실 그게 전부다. 그런데 함수와 객체로 완벽히 나뉘어져 있는게 아니고 또 함수는 객체고 객체는 함수다. 이때부터 머리가 좀 복잡해진다. 일단 함수부터 보자. 우리가 아무런 생각없이 함수를 정의하게되면 함수의 메모리 모델링은 이런식으로 이루어진다. 코드실행영역, 지역변수영역, 함수객체영역, 프로토타입영역 일단 여기에 나오는 이 용어들은 공식적인건 아니고 그냥 내가 갖다쓰는것이므로 이 용어들까지 알필요는 없다. 코드실행영역과 지역변수영역은 여태 우리가 생각없이 쓰던 그대로 이해하면 된다. 코드실행영역은 변수 선언이 아닌 일반적 코드가 실행되는 부분이고 지역변수영역은 말그대로 지역변수들이 저장되는 영역이다. 그럼 함수객체영역은? 일단 함수객체라는 ..

자바스크립트로 코딩을 한다거나 자바스크립트를 공부하는 사람들이라면 누구나 한번쯤 원인모를 에러(사실 지극히 정상인데 본인이 그렇게 느끼게 됨)에 몇시간씩 낭비하는 경험이 있을것이다. 바로 자바스크립트의 클로저(closure)때문이다. 처음 클로저라는 단어를 들으면 아마 closure 보다는 closer를 먼저 떠올리지 않을까 한다. 하지만 closer 가 아니라 closure이기때문에 굳이 제목에서부터 영어를 사용하게됐다(은근히 뜻이 비슷해서 서로 다른 단어를 연상하면서도 말이 통하는 경우가있는건 함정). 클로저에 대한 정의는 그 영단어의 뜻을 알아보는것이 가장 빠르다. 가까운 포털을 이용해보자. 클로저라는 단어에 대한 뜻을 살펴보자 '폐쇄' 이다. 그럼 무엇이 폐쇄됐다는 걸까? 잠시 함수에 대해 생각해..

한동안 공부할것도 많고 회사일도 바빠져서 자바스크립트 포스팅을 못했다. 오랜만에 하려니 순서도 기억이 안나고 어디까지했는지도 잘 모르겠어서 클로저에 대한 포스팅을 하고자 쭉쭉 글을 써내려가고있었는데 생각해보니 변수스코프에 대한 얘기를 한적이 없다는걸 깨달았다. 변수스코프는 사실 어떻게보면 굉장히 당연한거고 어렵지않은 개념이지만 클로저를 이해하기위해서는 필수적으로 이해를 해야하는 부분이고, 간단한 소스에서는 이걸 뭘 따로 이해까지해야하나 라고 생각할 수도있지만 앞서말한 클로저 등을 접하게됐을땐 꽤나 복잡해진다. 다음의 소스를 보자. var global = "hello"; function getGlobal1(){ return global; } function getGlobal2(global){ return ..

이번포스팅은 지난번 객체 포스팅에 대한 보충설명 격이다. 지난번 포스팅이 생각보다 너무 길어져서 따로 빼내 작성하는게 좋을것같아 이렇게 쓰게됐다. 사실 별 생각없이 넘어가면 머리아프게 생각할필요 없는 부분이기도한데 호기심이 왕성한 분들은 매우 궁금해할수도 있는부분이다. 우리는 함수의 3가지 역할에 대해 공부를 했다. 그중 1가지는 값으로서 전달되는 '변수'의 역할이니 이번포스팅에선 따로 다루지않는다. 그럼 나머지 2개가 무엇인가? 일반 메서드로서의 함수와 생성자로서의 함수가 바로 오늘 좀더 깊게 알아볼 것 들이다. 지난번에 배운 생성자 함수를 봐보자 function Cons(nick, job){ this.nick = nick; this.job = job; } var obj = new Cons("LichK..

자바스크립트는 객체 지향적 코딩을 지원하고있으며 그에 따라 당연히 객체를 생성하고 사용할 수 있다. 자바에서는 객체 생성을 new 연산자로만 지원하는데 반해 자바스크립트는 다양한 방법을 지원하고있으며 그중 2가지 방법을 알아보겠다. 1. 리터럴 표현 리터럴 생성방식에 알아보기전에 리터럴이라는 단어에 대해 잠깐 말해보고자 한다. '리터럴' 이라는 단어는 거의 대부분의 언어 기초책에서 앞부분에 나오는 단어이다. 그만큼 기초적인 용어인셈인데 이 리터럴이라는 단어에 대해 잘 모르는 개발자가 생각보다 매우 많다. 리터럴이라는 단어는 객체의 생성이나 따로 타입에 대한 추적없이 그 값 자체로 타입을 판별할 수 있는 표현법이다. 말이 좀 어려운데 내가 좋아하는 숫자인 5를 봐보자. 이건 누가 typeof 연산자를 사용..

자바개발자의 마음속 깊은 곳에는 자바스크립트를 무시하는 경향이 있다. 나또한 처음 자바스크립트를 공부한다고 했을때 주위에 많은 선배들이 그거 할시간에 자바공부를 더하고 스프링공부를 더해라. 그거 그냥 쓰면되지 뭘 따로 공부까지 하고있냐. 라는 말을 참 많이 들었었다. 그리고 같이 공부하는 분들도 주변에서 그런말을 참 많이 듣는다고 하셨다. 그러다 자바스크립트를 어느정도 공부하고 뭐가뭔지좀 알것같다고 생각될 무렵 스크립트단에서 발생하는 예상치못한 에러에 선배들이 짧게는 몇분에서 길게는 몇시간, 며칠을 고생하는걸 보면서 배우길 잘 했다고 생각이 든다. 그분들을 폄하할 생각은 없지만 한두명도 아니고 수백 수천명의 자바개발자가 왜 그런생각을 갖게되는지부터 살펴보자. 일단 자바스크립트를 화면단에서 값체크하고 더하..

나는 기본적으로 자바개발자다. 그렇기에 이 포스팅 시리즈도 기본적으로는 자바개발자를 대상으로 잡고있고 자바로 if, for문정도는 돌려서 구구단 출력은 해봤다는 전제하에 작성하는것이다. 자바스크립트에 대해 깊숙하게 알고있지는 않더라도 웹개발자라면 어쩔수없이 자바스크립트를 사용할수밖에 없는데 변수를 선언할때 타입이 아닌 var를 붙인다는것과 메서드가 function 으로 선언된다는거 말고는 실행하는데 있어 자바랑 크게 다른점이 없다고 생각하며 코딩을 하게 되는것이 일반적이다. 하지만 사실 변수를 선언할때 타입이 숫자든 문자열이든 boolean이든 상관없이 var로 선언한다는 것이, 앞에서 알아봤지만 자바에서 메서드라고 생각했던 함수가 내부적으로는 변수로 관리한다는것이. 그냥 '아~ 얜 이렇구나 이것만 주의..

지난번에 못 다쓴 자바스크립트의 파싱에 대해서 좀 더 얘기를 해볼까 한다. 앞서 말했듯이 자바스크립트는 파싱단계를 통해 소스를 재정렬하게되는데 var 변수와 함수를 함수(실행컨텍스트) 최상단으로 끌어올려 선언하고 런타임에 그 값을 정의하게된다. 변수에 대해서는 지난번 글에 꽤 설명을 했었다. 그럼 함수는 어떻게 될까? 이걸 설명하기에 앞서 함수 선언 부분을 봐보자. 보통은 이런식으로 함수를 선언한다. function func(){} 근데 이미 알고있는 분들도있겠지만 함수는 이런식으로도 표현이 가능하다. var func = function(){} 위쪽을 '함수 선언식' 아랫쪽을 '함수 표현식'이라고 말하는거같은데 이게 공식적인 용어인지는 잘 모르겠다. 여튼 어떤식으로 선언하든 호출은 동일하게 한다. fun..