블로그 이미지
윤영식
Frontend Application Architecter, Full Stacker, KnowHow Dispenser and Bike Rider

Publication

Statistics Graph

Recent Comment

2013.01.24 21:53 Languages/CoffeeScript

if, switch, for loop 구문등을 사용해 보자 


1) 조건문

  - yes : true, no : false, if not : unless 

  - if not 과 yes no 사용하기 : if2.coffee

machine = 
	running: no
	turnOn: -> this.running = yes
	turnOff: -> this.running = no

###
if not === unless
###
if not machine.running
	machine.turnOn()

machine.turnOne() if not machine.running
console.log machine.running

unless machine.running
	machine.turnOn()
else
	machine.turnOff()

// Generated by CoffeeScript 1.4.0
(function() {
  var machine;
  machine = {
    running: false,
    turnOn: function() {
      return this.running = true;
    },
    turnOff: function() {
      return this.running = false;
    }
  };

  /*
  if not === unless
  */
  if (!machine.running) {
    machine.turnOn();
  }
  if (!machine.running) {
    machine.turnOne();
  }
  console.log(machine.running);

  if (!machine.running) {
    machine.turnOn();
  } else {
    machine.turnOff();
  }
}).call(this);

// 결과 : 9번째 줄과 12번째 줄은 같은 구문이다 

D:\Development\coffeescript>coffee if2

true



  - switch ~ then 구문 사용하기 : switch.coffee

person = 
	name: "dowon"
	job: "programmer"

giveWork = (person) ->	
	switch person.job
	  when "programmer"
	  	console.log "1> Here's your code work, #{person.name}"
	  when "designer"
	  	console.log "1> Here's your design work, #{person.name}"
	  else 
	  	console.log "1> Um, do you work here?"	  	
giveWork person	  	

# or
person.job = "designer"
giveWork2 = (person) ->	
	switch person.job 
	  when "programmer" then console.log "2> Here's your code work, #{person.name}"
	  when "designer" then console.log "2> Here's your design work, #{person.name}"
	  else console.log "2> Um, do you work here?"
giveWork2 person

// Generated by CoffeeScript 1.4.0
var giveWork, giveWork2, person;
person = {
  name: "dowon",
  job: "programmer"
};

giveWork = function(person) {
  switch (person.job) {
    case "programmer":
      return console.log("1> Here's your code work, " + person.name);
    case "designer":
      return console.log("1> Here's your design work, " + person.name);
    default:
      return console.log("1> Um, do you work here?");
  }
};
giveWork(person);

person.job = "designer";
giveWork2 = function(person) {
  switch (person.job) {
    case "programmer":
      return console.log("2> Here's your code work, " + person.name);
    case "designer":
      return console.log("2> Here's your design work, " + person.name);
    default:
      return console.log("2> Um, do you work here?");
  }
};
giveWork2(person);

// 결과 

D:\Development\coffeescript>coffee switch

1> Here's your code work, dowon

2> Here's your design work, dowon



  - if 문 console.log를 앞으로 뽑아내기 : member.coffee

     + 컴파일 내역

     + 결과는 같지만 구문 코드는 틀리다 

     + 2번과 3번 구문이 제일 짧다 

person1 = 
	name: "dowon"
	relationship: "friend"
person2 = 
	name: "youngsik"
	relationship: "boss"

greet = (person) ->
	if person.relationship is "friend"
		console.log "1> hi, #{person.name}!"
	else if person.relationship is "boss"
		console.log "1> hello, papa!"
greet person1
greet person2
# or
greet2 = (person) ->
	msg = if person.relationship is "friend"
		"2> hi, #{person.name}!"
	else if person.relationship is "boss"
		"2> hello, papa!"
	console.log msg
greet2 person1
greet2 person2
# or
greet3 = (person) ->
	console.log if person.relationship is "friend"
		"3> hi, #{person.name}!"
	else if person.relationship is "boss"
		"3> hello, papa!"
greet3 person1
greet3 person2
# or
greet4 = (person) ->
	msg = switch person.relationship 
		when "friend" then "4> hi, #{person.name}!"
		when "boss" then "4> hello, papa!"
	console.log msg
greet4 person1
greet4 person2

// Generated by CoffeeScript 1.4.0
(function() {
  var greet, greet2, greet3, greet4, person1, person2;
  person1 = {
    name: "dowon",
    relationship: "friend"
  };
  person2 = {
    name: "youngsik",
    relationship: "boss"
  };

  greet = function(person) {
    if (person.relationship === "friend") {
      return console.log("1> hi, " + person.name + "!");
    } else if (person.relationship === "boss") {
      return console.log("1> hello, papa!");
    }
  };
  greet(person1);
  greet(person2);

  greet2 = function(person) {
    var msg;
    msg = person.relationship === "friend" ? "2> hi, " + person.name + "!" : person.relationship === "boss" ? "2> hello, papa!" : void 0;
    return console.log(msg);
  };
  greet2(person1);
  greet2(person2);

  greet3 = function(person) {
    return console.log(person.relationship === "friend" ? "3> hi, " + person.name + "!" : person.relationship === "boss" ? "3> hello, papa!" : void 0);
  };
  greet3(person1);
  greet3(person2);

  greet4 = function(person) {
    var msg;
    msg = (function() {
      switch (person.relationship) {
        case "friend":
          return "4> hi, " + person.name + "!";
        case "boss":
          return "4> hello, papa!";
      }
    })();
    return console.log(msg);
  };
  greet4(person1);
  greet4(person2);
}).call(this);

// 결과 : 전부 동일한 결과를 출력한다 

D:\Development\coffeescript>coffee member

1> hi, dowon!

1> hello, papa!

2> hi, dowon!

2> hello, papa!

3> hi, dowon!

3> hello, papa!

4> hi, dowon!

4> hello, papa!



2) for 구문 

  - for 구문을 다양하게 사용하는 방법

  - 5가지 for loop 문 사용방법 : loop.coffee

arr = ["Net", "Aet", "Photo", "Psd", "Cgt"]

obj = 
	name: "dowon"
	topic: "web development"
	editor: "yun"

###
for ( var i = 0; i < arr.length; i++) {
	console.log(arr[i]);
}	
###
console.log "---1---"
for siteName in arr
	console.log siteName

console.log "---2---"
console.log siteName for siteName in arr

console.log "---3---return array---"
console.log (siteName for siteName in arr)	

console.log "---4---"
for siteName, i in arr
	console.log "#{i}: #{siteName}"	

console.log "----5--"
for siteName, i in arr when siteName.indexOf("P") is 0	
	console.log "#{i}: #{siteName}"	

console.log "---6---"
###
by 2 ===  when i % 2 is 0
###
for siteName, i in arr by 2
	console.log "#{i}: #{siteName}"	


// Generated by CoffeeScript 1.4.0
(function() {
  var arr, i, obj, siteName, _i, _j, _k, _l, _len, _len1, _len2, _len3, _len4, _m, _step;
  arr = ["Net", "Aet", "Photo", "Psd", "Cgt"];

  obj = {
    name: "dowon",
    topic: "web development",
    editor: "yun"
  };

  /*
  for ( var i = 0; i < arr.length; i++) {
  	console.log(arr[i]);
  }
  */
  console.log("---1---");
  for (_i = 0, _len = arr.length; _i < _len; _i++) {
    siteName = arr[_i];
    console.log(siteName);
  }

  console.log("---2---");
  for (_j = 0, _len1 = arr.length; _j < _len1; _j++) {
    siteName = arr[_j];
    console.log(siteName);
  }

  console.log("---3---return array---");
  console.log((function() {
    var _k, _len2, _results;
    _results = [];
    for (_k = 0, _len2 = arr.length; _k < _len2; _k++) {
      siteName = arr[_k];
      _results.push(siteName);
    }
    return _results;
  })());

  console.log("---4---");
  for (i = _k = 0, _len2 = arr.length; _k < _len2; i = ++_k) {
    siteName = arr[i];
    console.log("" + i + ": " + siteName);
  }

  console.log("----5--");
  for (i = _l = 0, _len3 = arr.length; _l < _len3; i = ++_l) {
    siteName = arr[i];
    if (siteName.indexOf("P") === 0) {
      console.log("" + i + ": " + siteName);
    }
  }

  console.log("---6---");
  /*
  by 2 ===  when i % 2 is 0
  */
  for (i = _m = 0, _len4 = arr.length, _step = 2; _m < _len4; i = _m += _step) {
    siteName = arr[i];
    console.log("" + i + ": " + siteName);
  }
}).call(this);	

// 결과

D:\Development\coffeescript\2>coffee loop

---1---

Net

Aet

Photo

Psd

Cgt

---2---

Net

Aet

Photo

Psd

Cgt

---3---return array---

[ 'Net', 'Aet', 'Photo', 'Psd', 'Cgt' ]

---4---

0: Net

1: Aet

2: Photo

3: Psd

4: Cgt

----5--

2: Photo

3: Psd

---6---

0: Net

2: Photo

4: Cgt



3) Scope 알아보기 

  - this 에 대한 유효범위(scope)를 보았을 때 object의 method로 사용되지 않는 단순 function 호출의 this는 global object (즉, UI에서는 window객체)를 가르킨다 (참조)

var classroom = {
	students: ["Jonh", "Jane", "Jill", "Joe"],
	print: function() {
		var thiz = this;
		function getName(i) {
			return thiz.students[i];
		}
		for(var i=0; i < this.students.length; i++) {
			console.log(getName(i));
		}
	}
}
classroom.print();


  - 위의 경우를 coffee로 표현하고자 할 경우 다음과 같이 => 사용하면 "var thiz = this;" 를 표현할 수 있다

classroom = 
	students: ["Jonh", "Jane", "Jill", "Joe"]
	print: ->
		getName = (i) =>    // =>를 사용하면 var thiz = this; 동일 효과가 가능하다 
			this.students[i]

		for s,i in this.students
			console.log getName i 

classroom.print()

// Generated by CoffeeScript 1.4.0
(function() {
  var classroom;
  classroom = {
    students: ["Jonh", "Jane", "Jill", "Joe"],
    print: function() {
      var getName, i, s, _i, _len, _ref, _results,
        _this = this;
      getName = function(i) {
        return _this.students[i];
      };
      _ref = this.students;
      _results = [];
      for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) {
        s = _ref[i];
        _results.push(console.log(getName(i)));
      }
      return _results;
    }
  };
  classroom.print();
}).call(this);


* 파일 

coffeescript-2.zip


posted by peter yun 윤영식
prev 1 2 3 4 5 6 7 8 next