LeeHyojin Blog LeeHyojin Blog

객체의 프로퍼티가 함수일 경우, 이 함수를 메서드라고 부릅니다. 이러한 메서드를 호출할 때, 메서드 내부에서 사용된 this는 해당 메서드를 호출한 객체로 바인딩 됩니다. 다음 예제를 통해서 객체의 메서드 호출 사용시의 this 바인딩 과정을 보겠습니다. // obj 객체 생성 let obj1 = { name: 'foo', sayName: function(){ console.log(this.name); } }; // obj2 객체 생성 let obj2 = { name: 'bar' }; // obj2 객체에 sayName() 메서드를 만들고 이 메서드에 obj.sayName()을 할당하여 참조하기 obj2.sayName = obj1.sayName; obj1.sayName(); // foo obj2.sayN..

자바스크립트에서는 함수를 호출할 때 인수를 생략할 수 있습니다. 반대로 함수의 매개변수에 작성된 인자 개수보다 더 많은 개수의 인수를 넘겨서 함수를 실행할 수 있습니다. 첫번 째 방법으로는 arguments객체이고, 두번 째 방법으로는 rest 파라미터(spread operator) 가 있습니다. 1. arguments 객체 arguments 객체는 매개변수 개수가 정확하게 정해지지 않은 함수를 구현하거나, 전달된 인자의 개수에 따라 서로 다른 처리를 해줘야 하는 함수에 유용하게 사용할 수 있습니다. 또한 매개 변수가 명시적으로 선언되지 않은 경우에도 사용할 수 있습니다. 모든 함수에서 사용할 수 있는 지역 변수로 argument 변수가 있고, arguments변수의 값은 Arguments 객체입니다. ..

prototype 이란 생성자 함수를 생성하면 prototype이라는 빈 객체가 어딘가에 존재하고, 생성자 함수( 부모객체 )로부터 생성된 객체( 자식객체 )들은 이 prototype이라는 객체에 들어있는 값을 모두 공유할 수 있습니다. 즉, 상속 개념과 마찬가지로 자식 객체는 부모 객체가 가진 속성이나 메서드를 상속받는 것이 가능합니다. 이 전에 블로깅했던 생성자와 new 컨텐츠에서 다뤘던 생성자 함수 Person() 을 사용하여 더 자세히 설명해보도록 하겠습니다. function Person(name, age, country){ this.name = name; this.age = age; this.country = country; this.introduce = function(){ return 'my..

생성자( cunstructor )는 객체를 만드는 일을 하는 함수입니다. 이 함수는 재사용 가능한 로직의 묶음이 아니라 객체를 만드는 창조자라고 볼 수 있습니다. 함수를 호출할 때 new를 붙이면 새로운 객체를 만든 후에 이를 리턴합니다. 객체를 만드는 주체는 함수입니다. 이 전에 작성한 객체지향 프로그래밍 컨텐츠에서 유저의 정보를 담고있는 객체를 해당 유저가 새로 생길 때마다 새로운 객체를 만들어줘야 했고, 그 객체안에는 유저의 정보를 담고있는데, 중복되는 정보들이 있었던 것을 보았습니다. 그 중복을 줄이기 위해서 다음과 같은 코드로 작성할 수 있겠습니다. 생성자와 new를 사용하기 전 써주었던 코드는 아래와 같고 let person1 = { name: 'hyojin', age: 25, country:..

객체지향 프로그래밍이란 객체들을 레고처럼 조립해서 하나의 프로그램을 만드는 것이라고 할 수 있습니다. 즉, 객체지향 프로그래밍은 객체를 만드는 것입니다. 일반 웹사이트를 예를들어 보겠습니다. 우리가 흔히들 접하는 웹사이트의 기본 형태는 다음과 같이 네비게이션 바가 있고 본문을 나타내는 컨텐츠 영역과 댓글 영역으로 나눠져있습니다. 네비게이션은 웹사이트의 메뉴가 나열되어 있을 것이고, 컨텐츠는 각각의 메뉴에 해당하는 컨텐츠를 불러와 보여줄 것입니다. 댓글영역에는 댓글 리스트가 있을 것이고 수정, 추가, 삭제버튼과 더 나아가자면 추천버튼 등등이 있을 것입니다. 따라서, 위의 그림과 같이 하나의 목적으로 이루어져 있는 것이아니라 각각의 영역별로 수행할 목적을 가지고있는 로직들의 집합이라고 볼 수있습니다. 그 여..

재귀함수란? 함수가 자기 자신을 호출하는 행위를 가리켜 재귀 호출(recursive call) 이라고 합니다. 이러한 재귀 호출을 수행하는 함수를 재귀 함수 라고 합니다. 재귀함수 예시로 유명한 팩토리얼 예제를 간단히 코드로 옮겨보겠습니다. function fact(n){ if(n

클로저란? 렉시컬 스코프에 의존해 코드를 작성한 결과로 발생합니다. 모든 코드에서 클로저는 생성되고 사용됩니다. 즉, 클로저는 함수가 속한 렉시컬 스코프를 기억하여 함수가 렉시컬 스코프 밖에서 실행될 때에도 이 스코프에 접근할 수 있게 하는 기능을 뜻합니다. 앞서 블로깅한 스코프에 대해서 컨텐츠를 충분히 잘 이해했다면 클로저에 대한 개념은 좀 더 쉽고 자연스럽게 받아드려질 것입니다. 클로저는 자바스크립트의 모든 곳에 존재하고 새롭게 문법과 패턴을 배워야 할 특별한 것이 아닌 그저 인식하고 받아들이면 됩니다. 다음 예시코드를 보면서 좀 더 자세하게 클로저에 대하여 알아보도록 하겠습니다. function outer(){ let a = 5; function inner(){ console.log(a); // 5..

스코프란 ( Scope, 유효범위 ) 특정 장소에 변수를 저장하고 나중에 그 변수를 찾는 데는 잘 정의된 규칙이 필요한데 바로 이런 규칙을 '스코프' 라고 합니다. ★ 스코프의 구문 스코프는 두가지의 종류가 있습니다. 전역스코프(Global scope)와 지역스코프(Local scope)로 나뉩니다. 전역스코프(Global scope) 코드 어디에서든지 참조할 수 있습니다. 지역스코프(Local scope) 함수 코드 블록이 만든 스코프로 함수 자신과 하위 함수에서만 참조할 수 있다. 스코프를 이해하기에 앞서 자바스크립트의 컴파일레이션에 대해서 간략하게 설명해보려고 합니다. 컴파일레이션이란? - 컴파일러 언어의 처리 과정에서는 프로그램을 이루는 소스 코드가 실행되기 바로 직전에 보통 3단계를 거치는데, ..