Javascript/JavaScript: 43개의 글
상속 1. 상속(inheritance)이란?객체는 연관된 로직들로 이루어진 작은 프로그램이라고 할 수 있다. 상속은 객체의 로직을 그대로 물려 받는 또 다른 객체를 만들 수 있는 기능을 의미한다. 단순히 물려받는 것이라면 의미가 없을 것이다. 기존의 로직을 수정하고 변경해서 파생된 새로운 객체를 만들 수 있게 해준다. 상속 받은 객체가 부모 객체의 어떠한 기능은 제외하고 어떠한 기능은 추가해서 자신의 맥락에 맞게 부모의 객체의 로직을 재활용하면서 또 그 맥락에 맞는 로직을 제거하거나 추가하면서 재활용할 수 있다. 아래 코드는 이전 시간에 살펴본 코드다.function Person(name){ this.name = name; this.introduce = function(){ return 'My name ..
this vo.) context: 의미가 고정적이지 않고 그것을 사용하는 상황에 따라 의미가 달라질수 있다. 가변적이다this는 함수 내에서 함수 호출 맥락(context)를 의미한다. 맥락이라는 것은 상황에 따라서 달라진다는 의미인데 즉 함수를 어떻게 호출하느냐에 따라서 this가 가리키는 대상이 달라진다는 뜻이다. 함수와 객체의 관계가 느슨한 자바스크립트에서 this는 이 둘을 연결시켜주는 실질적인 연결점의 역할을 한다.this는 함수 안에서 사용할 수 있는 일종의 변수이면서 그 변수안에 값은 그 함수를 어떻게 호출하느냐에 따라서 달라진다. 1. 함수호출함수를 호출했을 때 this는 무엇을 가르키는지 살펴보자. this는 전역객체인 window와 같다.function func(){ if(window ..
생성자와 new new를 붙이면 객체가 된다. 1. 객체객체란 서로 연관된 변수와 함수를 그룹핑한 그릇이라고 할 수 있다. 객체 내의 변수를 프로퍼티(property) 함수를 메소드(method)라고 부른다. 객체를 만들어보자.자바스크립트는 어느 객체지향언어와 같지 않다. 자바스크립트만의 독특한 체계를 가지고 있다. 자바스크립트 계열에 속하는 언어들은 prototypeBased 프로그래밍 언어이다. 자바스크립트 객체 : 전통적인 함수의 특징을 그대로 가지고 있지 않고 객체지향적인 문법 비슷하게 사용하면서 함수형 언어이다. 알면 알수록 난해하다. 하지만 자바스크립트가 추구하는 스타일은 자유롭고 유연하다.엄격성, 규제(자바)가 깐깐하는 것과는 대비된다. 언어를 바라보는 넓어지는 기회로 삼자. var pers..
함수의 호출 자바스크립트에서 함수는 일종의 객체이다. 객체는 속성을 가지고 있다. 그 속성에 값이 저장되어 있다면 속성(프로퍼티)라고 한다. 그 속성에 함수가 있다면 메소드라고 한다. 함수에 대한 기본 수업에서 함수를 호출하는 방법을 알아봤다. 아래는 함수를 호출하는 가장 기본적인 방법이다. function func(){// func라는 이름의 함수는 객체이기 때문에 이 함수는 메소드를 가지고 있다. 이 메소드는 자바스크립트에서 만든 것이기 때문에 내장된 객체이다. }// func라는 이름의 함수를 정의하면 func.apply/func.call(객체.메소드)--> func라는 함수(객체)를 호출하는 역할을 한다.func();JavaScript는 함수를 호출하는 특별한 방법을 제공한다. 본 토픽의 시작에서..
콜백 콜백이란 어떠한 함수가 수신하는 인자가 함수인 경우 콜백이라 한다. --> 함수를 정의한 곳의 매개변수(여기서는 인수가 된다. 인자와 인수와 비교)가 함수인 경우를 말한다. 1. 처리의 위임값으로 사용될 수 있는 특성을 이용하면 함수의 인자로 함수로 전달할 수 있다. 값으로 전달된 함수는 호출될 수 있기 때문에 이를 이용하면 함수의 동작을 완전히 바꿀 수 있다. 인자로 전달된 함수 sortNumber의 구현에 따라서 sort의 동작방법이 완전히 바뀌게 된다. function sortNumber(a,b){//콜백함수 // 위의 예제와 비교해서 a와 b의 순서를 바꾸면 정렬순서가 반대가 된다. return b-a;}var numbers = [20, 10, 9,8,7,6,5,4,3,2,1];alert(n..
값으로서의 함수와 콜백 JavaScript에서는 함수도 객체다. 다시 말해서 일종의 값이다. 거의 모든 언어가 함수를 가지고 있다. JavaScript의 함수가 다른 언어의 함수와 다른 점은 함수가 값이 될 수 있다는 점이다.함수역시 변수에 담을수 있다.(var a = function(){})function a(){} // var a = function( ){ }(함수가 값이므로 가능하다.)위의 예제에서 함수 a는 변수 a에 담겨진 값이다. 또한 함수는 객체의 값으로 포함될 수 있다. 이렇게 객체의 속성 값으로 담겨진 함수를 메소드(method)라고 부른다. a = { b:function(){ }};//객체는 {에서 }로 끝난다.함수는 값이고 그렇기 때문에 객체안에 저장될 수 있다 .객체 안에서 b라는 ..
객체 1. 객체(Object)객체는 배열이라는 것과 유사한 역할을 한다. 배열은 연관되어 있는 데이터를 담아내기 위한 일종의 그릇이다. 객체 역시도 마찬가지로 그릇이다.하지만 객체와 배열의 차이는 배열은 index가 자동으로 0부터 할당하여 추가되지만 객체는 index가 문자일 수도 있고 숫자일 수도 있다. (우리가 직접 지정할 수 있다.) 이 단원에서는 데이터를 담아내는 객체를 설명한다.지금까지 살펴본 배열은 아이템에 대한 식별자로 숫자를 사용했다. 데이터가 추가되면 배열 전체에서 중복되지 않는 인덱스가 자동으로 만들어져서 추가된 데이터에 대한 식별자가 된다. 이 인덱스를 이용해서 데이터를 가져오게 되는 것이다. 만약 인덱스로 문자를 사용하고 싶다면 객체(dictionary)를 사용해야 한다. 다른 언..
배열 1. 배열배열(array)이란 연관된 데이터를 모아서 통으로 관리하기 위해서 사용하는 데이터 타입이다. 변수가 하나의 데이터를 저장하기 위한 것이라면 배열은 여러 개의 데이터를 하나의 변수에 저장하기 위한 것이라고 할 수 있다. 아래의 예제를 보자. 변수 name에는 문자 sibal이 할당되었다. 이제부터 name을 호출하면 문자 sibal을 사용할 수 있다. var name = 'sibal'alert(name); 2. 배열의 생성그렇다면 여러 개의 데이터를 하나의 변수에 담아서 관리할 수 있는 방법은 없을까? 있다. 배열을 쓰면 된다. 변수 member에 회원정보를 담아보자. 대괄호([])는 배열을 만드는 기호다. 대괄호 안에 데이터를 콤마(,)로 구분해서 나열하면 배열이 된다.var member..
함수 정의하는 방법 1. 일반적인 방법함수는 function 뒤에 함수의 이름이 오고, 소괄호가 따라온다. 소괄호에 인자라는 값이 차례로 들어오는데 이 값은 함수를 호출할 때 함수의 로직으로 전달될 변수다. 인자는 생략 할 수 있다. 함수를 호출 했을 때 실행하게 될 부분이 중괄호 안쪽에 온다.다음 예제를 보자. 이 함수의 이름은 numbering이고, 내용은 0부터 9까지를 화면에 출력한다.function numbering(){ i = 0; while(i < 10){ document.write(i); i += 1; } }numbering();//함수 호출문장 2. 함수를 변수에 대입하는 방법자바스크립트는 함수를 정의하는 또 다른 방법을 제공한다. 다음 예제를 보자. 아래 방법은 함수를 정의 하는 또 다..
비교 ('=='와 '==='의 차이) 1. ==동등 연산자로 좌항과 우항을 비교해서 서로 값이 같다면 true 다르다면 false가 된다. '='가 두개인 것을 주의하자. '='가 하나인 것은 대입 연산자로 좌항의 값을 우항의 변수에 대입할 때 사용하는 것으로 의미가 완전히 다르다. alert(1==2) //falsealert(1==1) //truealert("one"=="two") //falsealert("one"=="one") //true 2. ===일치 연산자로 === 좌항과 우항이 '정확'하게 같을 때 true 다르면 false가 된다. 여기서 정확하다는 말의 의미에 집중하자. 아래 예를보자.alert(1=='1'); //truealert(1==='1'); //false 위의 결과는 이상하다. '..