앜스토리 | 호기심 많은 개발자의 보물창고

1. 변수 선언 방식 우선, var는 변수 선언 방식에 있어서 큰 단점을 가지고 있다. var name = 'bathingape' console.log(name) //bathingape var name = 'javascript' console.log(name) //javascript 변수를 한 번 더 선언했음에도 불구하고, 에러가 나오지 않고 각기 다른 값이 출력되는 것을 볼 수 있다. 이는 유연한 변수 선언으로 간단한 테스트에는 편리할 수 있겠으나, 코드량이 많아 진다면 어디에서 어떻게 사용될 지도 파악하기 힘들 뿐더러 값이 바뀔 우려가 있다. 그래서 ES6 이후, 이를 보완하기 위해 추가된 변수 선언 방식이 let과 const이다. 위의 코드에서 변수 선언 방식만 바꿔보자. let name = 'ba..

클로저는 자바스크립트의 강력한 기능이지만, 너무 남발하여 사용하면 안 된다. 여기서는 클로저에서 사용자가 쉽게 간과할 수 있는 사항을 정리했다. 클로저의 프로퍼티값이 쓰기 가능하므로 그 값이 여러 번 호출로 항상 변할 수 있음에 유의해야 한다. function outerFunc(argNum){ var num = argNum; return function(x) { num += x; console.log('num: ' + num); } } var exam = outerFunc(40); exam(5); exam(-10); 위 코드에서 보는 바와 같이 exam 값을 호출할 때마다, 자유 변수 num의 값은 계속해서 변화하니 주의해야 한다. function func() { var x = 1; return { fu..

다음과 같은 함수를 작성한다고 가정해보자. "I am XXX. I live in XXX. I'am XX years old"라는 문장을 출력하는데, XX 부분은 사용자에게 인자로 입력 받아 값을 출력하는 함수 가장 먼저 생각할 수 있는 것은 앞 문장 템플릿을 전역 변수에 저장하고, 사용자의 입력을 받은 후, 이 전역 변수에 접근하여 완성된 문장을 출력하는 방식으로 함수를 작성하는 것이다. 이 방식으로 구현하면 코드는 다음과 같다. var buffAr = [ 'I am ', '', '. I live in ', '', '. I\am ', '', ' years old.', ]; function getcompletedStr(name, city, age) { buffAr[1] = name; buffAr[3] = c..

스코프 체인은 다음과 같다. innerFunc()의 [[scope]]은 outerFunc 변수 객체와 전역 객체를 가진다. 그런데 여기서 잠깐 혼란 스러운 부분이 있다. 위 코드에서 innerFunc()은 outerFunc()의 실행이 끝난 후 실행된다. 그렇다면 outerFunc 실행 컨텍스트 사라진 이후에 innerFunc 실행 컨텍스트가 생성되는 것인데, innerFunc()의 스코프 체인은 outerFunc 변수 객체를 여전히 참조할 수 있을까? 위 코드의 결과를 보면 짐작할 수 있지만, outerFunc 실행 컨텍스트는 사라졌지만, outerFunc 변수 객체는 여전히 남아있고, innerFunc의 스코프 체인으로 참조되고 있다. 이것이 바로 자바스크립트에서 구현한 클로저라는 개념이다.