// 출처 : http://programmingsummaries.tistory.com/
// 추천 링크
// https://developer.mozilla.org/ko/docs/A_re-introduction_to_JavaScript
// https://developer.mozilla.org/ko/docs/Web/JavaScript/Data_structures
// https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain
// https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Closures
// 재귀함수와 arguments.callee
// arguments.callee는 스스로의 함수를 호출
function factorial(x) {
if(x<=1) {
return 1;
}
else {
return x*arguments.callee(x-1);
}
}
console.log(factorial(5))
// 멤버 관리 구조와 prototype
function Person(name) {
var firstName = "홍";
this.name = name;
this.speak = function(){ console.log(firstName + this.name); }
}
console.log(Person.firstName); //undefined 접근할 수 없다.
var p = new Person("길동"); //객체 생성
console.log(p.firstName); //undefined 역시 접근할 수 없다.
console.log(p.name); //"길동" 접근 가능하다.
Person.prototype.tellme = function(){ console.log('zzz'); }; //메서드 추가!!
console.log(p.tellme()); //zzz라는 팝업이 뜬다!! 즉 객체 프로토타입 변경 가능!!
console.log(p["firstName"]); //undefined 마찬가지로 접근할 수 없다.
console.log(p["name"]); //"길동" 접근 가능하다.
// 멤버 확장
Object.prototype.extend = function(parent) {
for(var property in parent) {
this[property] = parent[property];
}
};
// Max & min
var test = [0, 77, 33, 11, 99, 88, 55];
console.log(Math.max.apply(null, test)); //결과값은 99
console.log(Math.min.apply(null, test)); //결과값은 0
var max = test.reduce( function (previous, current) {
return previous > current ? previous:current;
});
//최소값
var min = test.reduce( function (previous, current) {
return previous > current ? current:previous;
});
console.log("max :", max, "| min :", min)
// 배열 복사, 객체를 가진 경우엔 조심해야 함
var aaa = [0, 1, 2, 3, 4, 5];
var bbb = JSON.parse(JSON.stringify( aaa )); //참조없는 복사
var aaaa = [0, 1, 2, 3, 4, 5];
var bbbb = aaaa.slice(); //indexOf 혹은 contains로 검색 가능
// 배열 함수 : http://programmingsummaries.tistory.com/357
// Array.forEach
var testArray = ["aaa", "bbb", "ccc", "ddd"];
//배열의 모든 요소에 EDIT라는 문자열을 더하기
//메서드 수행 후 리턴값은 undefined
testArray.forEach(function (item, index, array) {
array[index] = item + "EDIT";
});
console.log(testArray);
// Array.some
var testArraySome = ["aaa", "bbb", "ccc", "ddd"];
//배열의 중에서 "bbb"가 있으면 true를 리턴
//메서드 수행 중 true가 리턴되면 메서드 수행을 중단하고 true를 리턴
console.log(testArraySome.some(function (item, index, array) {
console.log(index + "번째 요소 : " + item);
return !!~item.search("bbb");
}));
//true를 리턴하는 콜백이 있었으므로 리턴값은 true
// Array.every
var testArray = ["aaa", "bbb", "ccc", "ddd"];
//배열의 모든 요소에 "aaa"가 있으면 true를 리턴
//메서드 수행 중 false가 리턴되면 메서드 수행을 중단하고 false를 리턴
console.log(testArray.every(function (item, index, array) {
console.log(index + "번째 요소 : " + item);
return !!~item.search("aaa");
// return !!~item.search(/[a-z]+/); -> true
}));
//false를 리턴하는 콜백이 있었으므로 리턴값은 false
// Array.filter
var testArray = ["aaa", "bbb", "ccc", "ddd"];
//배열의 요소가 a 또는 b로 이루어져 있으면 추출
//메서드가 종료되면 추출된 요소로만 이루어진 새로운 배열을 리턴
var newArray = testArray.filter(function (item, index, array) {
return !!~item.search(/[ab]+/);
});
console.log(testArray);
console.log(newArray);
// Array.reduce
var testArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
//각 콜백마다의 리턴값을 previousItem 으로 넘겨받아 어떤 작업을 수행
//메서드가 종료되면 마지막 콜백의 리턴값을 리턴
var result = testArray.reduce(function (previousItem, currentItem, index, array) {
//반환된 결과는 다음번 콜백의 첫번째 파라메터로 다시 전달된다.
return previousItem + currentItem;
}, 0);
console.log(testArray);
console.log(result);
// setTimeout function
setTimeout(console.log("setTimeoutTest - Start"), 1000);
console.log("setTImeoutTest - End")
/**
1초 후에 "setTImeoutTest - End" 이 뜰 것 같지만 그렇지 않다.
*/
'Language > Javascript' 카테고리의 다른 글
Javascript - Generator (0) | 2015.10.16 |
---|---|
Javascript - Function, Module (0) | 2015.10.16 |
javascript 문서 맨 위에 'use strict'; 를 쓰자. (0) | 2015.10.16 |
Javascript 정리 - Advanced (0) | 2015.10.15 |
Javascript 정리 - Basic (0) | 2015.10.15 |
// 모듈, module
var circle = require('./node.circle.js');
console.log( 'The area of a circle of radius 4 is ' + circle.area(4));
// 정규표현식, regular expression
// 시각화 해주는 사이트 : http://regexper.com/
// 정규표현식 실습 : http://www.regexr.com/
var pattern = /a/
// var pattern = new RegExp('a');
console.log(pattern.exec('abcdef')); // ["a"]
console.log(pattern.exec('bcdefg')); // null
console.log(pattern.test('abcdef')); // true
console.log(pattern.test('bcdefg')); // false
console.log('abcdef'.match(pattern)); // ["a"]
console.log('bcdefg'.match(pattern)); // null
console.log('abcdef'.replace(pattern, 'A')); // Abcdef
var xi = /a/;
console.log("Abcde".match(xi)); // null
var oi = /a/i;
console.log("Abcde".match(oi)); // ["A"];
var xg = /a/;
console.log("abcdea".match(xg));
var og = /a/g;
console.log("abcdea".match(og));
var pattern = /(\w+)\s(\w+)/;
var str = "coding everybody";
var result = str.replace(pattern, "$2, $1");
console.log(result);
var urlPattern = /\b(?:https?):\/\/[a-z0-9-+&@#\/%?=~_|!:,.;]*/gim;
var content = '생활코딩 : http://opentutorials.org/course/1 입니다. 네이버 : http://naver.com 입니다. ';
var result = content.replace(urlPattern, function(url){
return '<a href="'+url+'">'+url+'</a>';
});
console.log(result);
// 함수, function, 유효 범위
for(var i = 0; i < 1; i++){
var name = 'coding everybody';
}
console.log(name);
var i = 5;
function a(){
var i = 10;
b();
}
function b(){
console.log(i);
}
a();
// function, value, 값으로서의 함수, 콜백, callback
function cal(func, num){
return func(num)
}
function increase(num){
return num+1
}
function decrease(num){
return num-1
}
console.log(cal(increase, 1));
console.log(cal(decrease, 1));
function cal(mode){
var funcs = {
'plus' : function(left, right){return left + right},
'minus' : function(left, right){return left - right}
}
return funcs[mode];
}
console.log(cal('plus')(2,1));
console.log(cal('minus')(2,1));
var process = [
function(input){ return input + 10;},
function(input){ return input * input;},
function(input){ return input / 2;}
];
var input = 1;
for(var i = 0; i < process.length; i++){
input = process[i](input);
}
console.log(input);
var numbers = [20, 10, 9,8,7,6,5,4,3,2,1];
console.log(numbers.sort(function (a, b){
return b-a;
})); // array, [20,10,9,8,7,6,5,4,3,2,1]
// 클로저, closure
function outter(){
var title = 'coding everybody';
return function(){
console.log(title);
}
}
inner = outter();
inner();
function factory_movie(title){
return {
get_title : function (){
return title;
},
set_title : function(_title){
title = _title
}
}
}
ghost = factory_movie('Ghost in the shell');
matrix = factory_movie('Matrix');
console.log(ghost.get_title()); // Ghost in the shell
console.log(matrix.get_title()); // Matrix
ghost.set_title('공각기동대');
console.log(ghost.get_title()); // 공각기동대
console.log(matrix.get_title()); // Matrix
var movies = {
'title' : null,
'get_title' : function (){
return this.title;
},
'set_title' : function(title){
this.title = title;
}
}
m1 = movies;
m1.set_title("m1")
console.log(m1.get_title())
console.log(movies.get_title())
var arr = []
for(var i = 0; i < 5; i++){
arr[i] = function(id) {
return function(){
return id;
}
}(i);
}
for(var index in arr) {
console.log(arr[index]());
}
// arguments, 아규먼트
function sum(){
var _sum = 0;
for(var i = 0; i < arguments.length; i++){
// console.log(i+' : '+arguments[i]);
_sum += arguments[i];
}
return _sum;
}
console.log('result : ' + sum(1,2,3,4));
// 매개변수
function zero(){
console.log(
'zero.length', zero.length,
'arguments', arguments.length
);
}
function one(arg1){
console.log(
'one.length', one.length,
'arguments', arguments.length
);
}
function two(arg1, arg2){
console.log(
'two.length', two.length,
'arguments', arguments.length
);
return arg1 + arg2
}
zero(); // zero.length 0 arguments 0
one('val1', 'val2'); // one.length 1 arguments 2
two('val1'); // two.length 2 arguments 1
// 함수의 호출, call function
o1 = {val1:1, val2:2, val3:3}
o2 = {v1:10, v2:50, v3:100, v4:25}
function sum2(){
var _sum = 0;
for(name in this){
_sum += this[name];
}
return _sum;
}
console.log(sum2.apply(o1)) // 6
console.log(sum2.apply(o2)) // 185
o1.sum2 = sum2;
console.log(o1.sum2()); // sum 중간에 객체의 타입을 검사하는 과정이 필요
'Language > Javascript' 카테고리의 다른 글
Javascript - Generator (0) | 2015.10.16 |
---|---|
Javascript - Function, Module (0) | 2015.10.16 |
javascript 문서 맨 위에 'use strict'; 를 쓰자. (0) | 2015.10.16 |
Javascript - etc (0) | 2015.10.15 |
Javascript 정리 - Basic (0) | 2015.10.15 |
// 변수, variable
var aaa = 2; //숫자
var bbb = "2"; //문자
var bbb = '2'; //얘도 문자
var ccc = true; //얘는 불린
var ddd = [1, 2, 3, 4]; //얘는 배열
var eee = { p1 : 2, p2 : '2' }; //얘는 객체
var fff = null; //null
var ggg = undefined; //undefined
var hhh = function(){ console.log('ㅋㅋㅋ'); } //얘는 함수!!
hhh()
// 수학, 정수, math
console.log(
Math.pow(3,2), // 9, 3의 2승
Math.round(10.6), // 11, 10.6을 반올림
Math.ceil(10.2), // 11, 10.2를 올림
Math.floor(10.6), // 10, 10.6을 내림
Math.sqrt(9), // 3, 3의 제곱근
Math.random() // 0부터 1.0 사이의 랜덤한 숫자
);
// 속성, type, typedef
console.log(
typeof 1,
typeof "1"
);
// 문자열, string
console.log(
'kanziw\'s javascript\n',
"javascript\nworld\n",
"have a " + "nice day\n",
'hihello'.length
);
// 비교, equal
console.log(
1 == 1, // true
1 == "1", // true
1 === "1", // false
null == undefined, // true
null === undefined, // false
true == 1, // true
true === 1, // false
true == '1', // true
true === '1', // false
0 === -0, // true
NaN === NaN // false
);
// if, while, for
var a;
if(!'' && !undefined && !a && !null && !NaN){
console.log('조건문의 경우가 모두 false임');
}
var i = 0;
var sum = 0;
while(i < 10){
sum += ++i;
}
console.log(sum);
sum = 0;
for(i = 1; i <= 10; i++){
if(i == 2) continue;
sum += i;
if(i == 5) break;
}
console.log(sum);
// function numbering(){
var numbering = function (){
i = 0;
while(i < 10){
console.log(i);
i += 1;
}
}
numbering();
// list, 배열
var li = ['a', 'c', 'z'];
li.push('d');
li.concat('e', 'f');
li.unshift('-a');
console.log(li);
li.splice(2, 1, 'B'); // 2번째부터 1개를 삭제 후 'B'를 삽입
console.log(li);
console.log(
li.shift(),
li.pop(),
li.sort()
);
console.log(li.reverse());
// 객체, object
var grades = {};
grades['egoing'] = 10;
grades['k8805'] = 6;
grades['sorialgi'] = 80;
// var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80}
for(key in grades) {
console.log("key : "+key+" | value : "+grades[key]);
}
grades = {
'list': {'egoing': 10, 'k8805': 6, 'sorialgi': 80},
'show' : function(){
for(var name in this.list){
console.log(name+':'+this.list[name]);
}
}
};
grades.show();
'Language > Javascript' 카테고리의 다른 글
Javascript - Generator (0) | 2015.10.16 |
---|---|
Javascript - Function, Module (0) | 2015.10.16 |
javascript 문서 맨 위에 'use strict'; 를 쓰자. (0) | 2015.10.16 |
Javascript - etc (0) | 2015.10.15 |
Javascript 정리 - Advanced (0) | 2015.10.15 |