study javascript

클로저를 활용하여 width 속성과 height 속성을 캡슐화

생성자 함수 안에서 width와 height를 정의하여 외부에서는 지역변수 width와 height를 사용할 수 없고 오직 게터(getter):getOO()형태의 메서드와 세터(setter):setOO()형태의 메서드를 사용해야 한다.

throw를 사용하여 오류를 발생시켜 0이하의 값이면 강제로 throw키워드를 실행시킨다.

캡슐화는 만일의 상황을 대배하여 특정 속성이나 메서드를 사용할 수 없게 숨겨놓는 것임에 주의

생성자 함수 안에서는 this 키워드로 생성자 함수로 생성될 객체의 속성을 지정. this 키워드로 속성을 생성하고 함수를 넣어준다.

function Student(name, korean, math, english, science) { //속성 this.이름 = name; this.국어 = korean; this.수학 = math; this.영어 = english; this.과학 = science; //메서드 this.getSum = function () { return this.국어 + this.수학 + this.영어 + this.과학; }; this.getAverage = function () { return this.getSum() / 4; }; this.toString = function() { return this.이름 + '\t' + this.getSum() + '\t' + this.getAverage(); }; } //학생 정보 var students = []; students.push(new Student('홍길동', 90, 86, 70, 80)); students.push(new Student('홍말동', 50, 96, 90, 90)); //출력 var output = '이름\t총점\t평균\n'; for (var i in students) { output += students[i].toString() + '\n'; } console.log(output);

객체를 하나씩 직접 만들어 배열에 넣으면 서로 다른 형태의 객체를 배열 안에 넣을 수 있다는 장점이 있지만, 번거럽고, 어려우며 시간이 오래 걸린다. 이런 과정을 쉽게 하기 위하여 하나의 '틀'을 만드는 함수를 만들어 매개변수를 받아 객체를 만든 후 객체를 리턴시킨다.

객체를 생성하는 함수의 기본형식(1)

function makeStudent(name, korean, math, english, science) { var willReturn = { }; return willReturn; }

객체를 생성하는 함수의 기본형식(2)

function makeStudent(name, korean, math, english, science) { var willReturn = { //속성 이름: name, 국어: korean, 수학: math, 영어: english, 과학: science, //메서드 getSum: function () { return this.국어 + this.수학 + this.영어 + this.과학; }, getAverage: function () { return this.getSum() / 4; }, toString: function () { return this.이름 + '\t' + this.getSum() + '\t' + this.getAverage(); } }; return willReturn; }

makeStudent()함수를 생성해서 객체를 찍어내듯이 생산할 수 있다.

성적 총점과 평균구하기

1.학생데이터 정리. 배열의 push() 메서드를 사용하여 배열에 요소를 대입

//배열생성 var students = []; students.push({이름: '홍길동', 국어: 88, 영어: 89, 수학: 70, 과학: 88}); students.push({이름: '홍말동', 국어: 89, 영어: 84, 수학: 40, 과학: 80}); students.push({이름: '홍정동', 국어: 80, 영어: 69, 수학: 80, 과학: 98}); students.push({이름: '홍송동', 국어: 98, 영어: 99, 수학: 90, 과학: 98}); students.push({이름: '홍겁동', 국어: 68, 영어: 69, 수학: 60, 과학: 68}); students.push({이름: '홍답동', 국어: 78, 영어: 79, 수학: 70, 과학: 78}); students.push({이름: '홍상동', 국어: 98, 영어: 68, 수학: 93, 과학: 99}); students.push({이름: '홍날동', 국어: 84, 영어: 49, 수학: 40, 과학: 48}); students.push({이름: '홍사동', 국어: 83, 영어: 39, 수학: 73, 과학: 38}); students.push({이름: '홍자동', 국어: 85, 영어: 59, 수학: 70, 과학: 100});

2.각각의 객체에 같은 메서드를 모두 직접 입력하는 것은 비효율적이므로 반복문을 사용하게 되면 students안의 모든 객체는 getSum() 메서드와 getAverage() 메서드를 갖게 된다.

//배열생성 /*생략*/ //매서드 추가 for (var i in students) { //총점 students[i].getSum = function () { return this.국어 + this.수학 + this.영어 + this.과학; }; //평균 students[i].getAverage = function () { return this.getSum() / 4; }; }

3. students의 객체 이름, 총점, 평균을 출력. for in 반복문으로 배열 students의 요소에 접근하고 문자열을 만들어 출력한다.

객체를 생성하는 시점 이후에 속성을 추가하거나 제거하는 것을 '동적으로 속성을 추가한다', '동적으로 속성을 제거한다'고 표현한다.

6.5.1 객체의 속성 추가

//변수선언 var student = {}; //객체 속성 추가 student.이름 = '홍길도'; student.취미 = '악기'; student.특기 = '프로그래밍'; student.장래희망 = '프로그래머'; //toString()메서드 생성 student.toString = function () { var output = ''; for (var key in this) { //toString()메서드는 출력하지 않게 한다 if (key != 'toString') { output += key + '\t' + this[key] + '\n'; } } return output; }; //출력 console.log(student.toString());

 메서드도 속성이므로 같은 방법으로 추가가능. toString() 메서드는 객체에 있는 속성을 출력하는 메서드.

6.5.2 객체의 속성 제거

동적으로 객체의 속성을 제거할 때는 delete 키워드를 사용. 키워드 뒤에 삭제하고자 하는 객체의 속성을 입력. 객체 속성의 입력에는 typeof 키워드처럼 괄호를 사용해도 되고 않아도 된다.

객체생성

//변수선언 var student = { 이름: '홍길동', 국어: 92, 영어: 98, 수학: 96, 과학: 98 };

6.4.1 in 키워드

in 키워드를 for 키워드와 별도로 사용하면 해당 키가 객체 안에 있는지 확인할 수 있다. 아래 코드는 객체가 이름과 성별에 해당하는 속성을 확인한다.

//변수선언 var output = ''; var student = { 이름: '홍길동', 국어: 92, 영어: 98, 수학: 96, 과학: 98 }; //in keyword output += "'이름' in student:" + ('이름' in student) + '\n'; output += "'성별' in student:" + ('성별' in student); //출력 console.log(output);

이름 속성은 존재하므로  true, 성별은 존재하지 않으므로 false

6.4.2 with 키워드

with 키워드는 복잡한 코드를 짧게 줄여주는 코드.

with 키워드를 사용하지 않은 경우

//변수선언 var student = { 이름: '홍길동', 국어: 92, 영어: 98, 수학: 96, 과학: 98 }; //출력 var output = ''; output += '이름: ' + student.이름 + '\n'; output += '국어: ' + student.국어 + '\n'; output += '영어: ' + student.영어 + '\n'; output += '수학: ' + student.수학 + '\n'; output += '과학: ' + student.과학 + '\n'; output += '총점: ' + (student.국어 + student.영어 + student.수학 + student.과학); console.log(output);

with 키워드를 사용한 경우

배열은 단순 for 반복문과 for in 반복문으로 요소에 쉽게 접근 할 수 있지만 객체는 for 반복문으로 객체의 속성을 살피는 것은 불가능하다. 객체의 속성을 모두 살피기 위해선 for in 반복문을 사용해야 한다.

//변수선언 var product = { name: 'Microsoft Visual Studio 2012', price: '15,000,000원', langualge: 'Korean', supportOS: 'Win 32/64', subscription: true }; // 출력 var output = ''; for (var key in product) { output += '■' + key + ': ' + product[key] + '\n'; } console.log(output);

배열 내부에 있는 값을 요소element라고 부르며, 반면 배열 내부에 있는 값은 속성property이라고 부른다.

var object = { number: 273, string: 'RintIanTta', boolean: true, array: [52, 273, 103, 32], method: function () { } }; console.log(object.number); > 273 console.log(object.string); > RintIanTta console.log(object['string']); > RintIanTta console.log(object.boolean); > true console.log(object.array); > [ 52, 273, 103, 32 ] console.log(object.array[1]); > 273 console.log(object.method); > [Function]

객체의 속성 중 함수 자료형인 속성은 메서드method라고 부른다.

//변수선언 var person = { name: '홍길동', eat: function (food) { } } console.log(person.name); console.log(person.eat);

객체 person은 name 속성과 eat 속성이 있으며, eat 속성은 함수 자료형이므로 eat() 메서드라고 부른다.

메서드 내에서 자기 자신이 가진 속성을 출력하고 싶을 때는 자신이 가진 속성임을 표시해야 하며 이럴때 this 키워드를 사용한다.

객체를 판별

console.log(typeof ([]));

배열에는 '인덱스'와 '요소'가 있다. 각각의 배열요소를 사용하려면 배열 이름뒤에 인덱스로 접근한다.

//변수선언 var array = ['사과', '바나나', '망고', '딸기']; console.log(array[0]); console.log(array[1]); console.log(array[2]); console.log(array[3]); console.log(array[4]);

배열과 객체는 상당히 유사하지만, 배열은 요소에 접근할 때 인덱스를 사용하며, 객체는 키를 사용한다는 점이 다르다.

객체는 중괄호({})를 사용해서 생성한다.

//변수선언 var product = { 제품명: '망고', 유형: '당절임', 성분: '망고, 설탕, 나트륨, 황색소', 원산지: '필리핀' } //객체에 접근하는 방법1 console.log(product['제품명']); console.log(product['유형']); console.log(product['성분']); console.log(product['원산지']); //객체에 접근하는 방법2 console.log(product.제품명); console.log(product.유형); console.log(product.성분); console.log(product.원산지);

일반적으로 방법2를 더 많이 사용한다. 

객체의 키는 식별자 또는 문자열을 모두 사용가능하다. 대부분 식별자로 키를 사용하지만, 식별자로 사용할 수 없는 단어를 키로 사용할 때는 문자열을 사용한다.

//변수선언 var object = { 'width space': 273, 'width ~!@#$%^&*()_+': 52 } console.log(object['width space']); console.log(object['width ~!@#$%^&*()_+']);

Number() 함수 이외의 숫자 변환 함수

parselnt(string) string을 정수로 변환 parseFlost(string) string을 유리수로 변환

int는 integer의 약자로 정수를 의미하며 float은 floating point 의 약자로 부동소수점을 의미한다.

이 함수는 Number() 함수의 단점을 보완하고자 만들어 졌다.

Number() 함수의 단점

var won = '1000원'; var dollar = '1.5$'; console.log(Number(won) + ':' + Number(dollar)); //출력 NaN:NaN

Number() 함수는 숫자로 바꿀 수 없으면 NaN으로 변환한다.

var won = '1000원'; var dollar = '1.5$'; console.log(parseFloat(won) + ':' + parseFloat(dollar)); console.log(parseFloat(won) + ':' + parseInt(dollar)); //출력 1000:1.5 1000:1

앞부터 읽으므로 $1000같은 문자열은 변환하지 못하고 NaN을 출력한다.

parseInt() 함수와 parseFloat()함수 사용시 주의점. 자바스크립트는 0으로 시작하거나 0x로 시작하면 10진수가 아니라 각각 8진수, 16진수로 생각하고 변환한다.

console.log(parseInt('0x273')); > 627 console.log(parseInt('273')); > 273 console.log(parseInt('0273')); 273

parseInt() 함수의 두 번째 매개변수에 진법을 입력하면 앞의 수를 해당 진법의 수로 인식한다

console.log(parseInt('FF', 16)); > 255 console.log(parseInt('CC', 8)); > NaN console.log(parseInt('52', 10)); > 52 console.log(parseInt('11', 8)); > 11 console.log(parseInt('10', 2)); > 2

거의 사용되지 않지만 가끔 0으로 시작하는 숫자를 넣어서 문제가 발생하는 경우가 있을 때 사용. parseFlost() 함수도 중간에 e가 들어가면 e의 앞부분에서 끊어버리는 것이 아니라 자리수로 인식한다.

Infinity와 NaN의 특별한 숫자가 있다. 변수에 있는 숫자가 어떤 숫자인지 확인할 때 사용한다.

isFinite() number가 무한한 값인지 확인 isNaN() number가 NaN인지 확인

대부분의 프로그래밍 언어는 0으로 숫자를 나누면 오류가 발생하면 작동을 멈추지만 자바스크립트는 0으로 숫자를 나누면 Infinity 값이 들어간다.

var number = 1 / 0; console.log(number);

isFinite() 함수는 이런 값을 구하는 함수다.

var number2 = 1 / 0; console.log(number + ':' + isFinite(number));

음수를 0으로 나누면 -Infinity다.

//변수 선언 var value = -10 / 0; var value2 = 10 / 0; //출력 if (value == Infinity) { console.log('value는 Infinity입니다.'); } else { console.log('value는 Infinity가 아닙니다.'); } if (value2 == Infinity) { console.log('value2는 Infinity입니다.'); } else { console.log('value2는 Infinity가 아닙니다.'); }

무한대의 수를 확인할 때는 isFinite()함수를 사용할것.

var number = 10 / 0; console.log(number + ':' + isNaN(number) + ':' + isFinite(number));

출력: Infinity:false:false

//NaN값 비교 if (NaN == NaN) { console.log('NaN == NaN'); } else { console.log('NaN != NaN'); }

출력: NaN != NaN

따라서 NaN을 확인할 때는 반드시 isNaN() 함수를 사용해야 한다.

eval(string) string을 자바스크립트 코그로 실행

문자열을 자바스크립트 코드로 실행하는 함수로 코드를 직접 입력하기 귀찮을 때 반복문과 함께 사용한다.

//문자열생성 var willEval = ""; willEval += 'var number = 10;'; willEval += 'console.log(number);'; //eval()함수호출 eval(willEval);

문자열을 자바스크립트 코드로 실행하는 함수이므로 eval() 함수로 실행된 코드에서 정의한 변수도 활용할 수 있다

escape() 적절한 정도로 인코딩 unescape() 적절한 정도로 디코딩 encodeURI(uri) 최소한의 문자만 인코딩 decodeURI(encodeURI) 최소한의 문자만 디코딩 encodeURIComponent(uriComponent) 대부분의 문자를 인코딩 decodeURIComponent(encodedURI) 대부분의 문자를 디코딩

인코딩은 문자를 컴퓨터에 저장하거나 통신에 사용할 목적으로 부호화하는 방법. 웹에서는 통신할때 한글 같은 유니코드 문자가 오작동을 일으킬 수 있으므로 인코딩해야 한다. 문자를 부호화하는 것은 인코딩. 반대로 문자를 원래대로 되돌리는 것이 디코딩이다.

escape()

영문 알파벳과 숫자, 일부 특수 문자(@, *, -, _, +, ., /)를 제외하고 모두 인코딩

1바이트 문자는 %XX형태로, 2바이트 문자는 %uXXXX 형태로 변환

encodeURI()

escape()함수에서 인터넷 주소에 사용되는 일부 특수 문자(:, ;, /, =, ?, &)는 변환하지 않는다.

encodeURIComponent()

알파벳과 숫자를 제외한 모든 문자를 인코딩

UTF-8 인코딩과 같다

결과확인용 샘플

//인코딩할 url var URI = 'http://hanb.co.kr?test=한글입니다.'; //출력문자열 var output = ''; output += '★escape()\n'; output += escape(URI) + '\n\n'; output += '★encodeURI()\n'; output += encodeURI(URI) + '\n\n'; output += '★encodeURIComponent()\n'; output += encodeURIComponent(URI) + '\n\n'; //출력 console.log(output);

for(var i = 0; i < 3; i++) { setTimeout(function () { console.log(i); }, 0); }

결과는 0, 1, 2 가 아닌 3, 3, 3을 출력하게 되는데 setTimeout()함수를 호출하는 시점이 반복문이 모두 끝난 이후라서 생기는 문제다. 0, 1, 2를 호출하기 위해선 변수를 따로 두어야 한다.

아래와 같이 자기 호출 함수와 클로저를 활용해야 한다.

for (var i = 0; i < 3; i++) { (function (closed_i) { setTimeout(function () { console.log(closed_i); }, 0) })(i); }

반복문을 도는 동안 클로저가 생성되어 변수 closed_i에 값을 저장할 수 있다. 또는 forEach()메서드를 활용해도 된다.

[0, 1, 2].forEach(function (i) { setTimeout(function () { console.log(i); }, 0) });

아래코드는 0, 1, 2를 출력시켜보려 했던 코드로 당연히 틀린 답이 나왔다. 2, 2, 2를 출력하더군. '반복문이 모두 끝난 이후발생하는 문제'라는 말에 떠로는게 이거 이상 떠오르지가 않더라는..-_-;;

console.log('A'); setTimeout(function () { console.log('B'); }, 0); console.log('C');

무조건 A, C, B로 출력.

자바스크립트의 함수중에는 브라우저에 처리를 부탁하는 함수가 있으며 대표적으로 타이머 함수와 웹 요청은 브라우저가 처리하고 처리가 완료되었다는 것을 자바스크립트에게 알려주는 방식이다.

이러한 함수는 현재 단위가 끝나기 전에는 실행되지 않는다.

setTimeout(function () { console.log('Set Timeout'); }, 0); while (true) { }

위의 예제에서는 0초후에 'Set Timeout'을 표시하지 못한다.

타이머 함수는 특정시간에 특정함수를 실행시키는 함수

setTimeout(function, millisecond) 일정 시간 후 함수를 한 번 실행 setInterval(function, millisecond) 일정 시간마다 함수를 반복해서 실행 clearTimeout(id) 일정 시간 후 함수를 한 번 실행하는 것을 중지 clearInterval(id) 일정 시간마다 함수를 반복하는 것을 중지

setTimeout(function () { console.log('3초가 지났습니다.'); }, 3000);

setInterval()함수의 경우 지속적으로 실행하므로 지속적으로 컴퓨터의 자원을 소비한다. 이러한 문제는 타이머가 더 이상 필요 없을 때 타이머를 멈추면 되며 각각 clearTimeout(), clearInterval()함수를 사용한다.

//1초마다 함수를 실행 var intervalID = setInterval(function () { console.log('

' + new Date() + '

//함수선언 function test(name) { var output = 'Hello' + name + '..!'; } //출력 console.log(output);

위 예제에서는 에러가 나오게 된다. 함수안의 변수는 지역 변수이므로 함수 외부에서 사용할 수 없다. 지역 변수는 함수가 실핼될 때 생성되고 함수가 종료될 때 사라진다. 이때 클로저를 사용하면 이 규칙을 위반할 수 있다.

//함수선언 function test(name) { var output = 'Hello' + name + '..!'; return function () { console.log(output); } } //출력 test('JavaScript')();

지역변수 output은 함수test()를 호출할 때 생성된다. 변수 output은 지역 변수리므로 함수가 종료될 때 사라져야 하지만 변수가 이후에도 사용될 가능성이 있으므로 변수를 제거하지 않고 남겨두고자 할때 사용된다.

//함수선언 function test(name) { var output = 'Hello ' + name + '..!'; return function () { console.log(output); }; } //변수선언 var test_1 = test('Web'); var test_2 = test('JavaScript'); //함수호출 test_1(); test_2();