[CoffeeScript] 문법 사용하기 (1)

CoffeeScript는 ; { 등을 가급적 배제하고 휴먼리더블하게 작성하게 해준다. 한줄띄기, 스페이스, 탭 등으로 구분하여 작문(코딩)을 한다 

1) 기본적인 작성법

  - 문자, 오브젝트, 범위, 변수

  - 문자 다루기 : #{} 을 통하여 변수 맵핑 : hi.coffee

name = "dowon"
greeting = "hi, #{name}!"
multi = """
this is a greeting:
	#{greeting}

"""
console.log multi

// 결과 : """ 를 사용했을 때 내부의 띄워쓰기 그대로 적용됨 <pre> 태그 유사 

D:\Development\coffeescript>coffee hi

this is a greeting:

        hi, dowon!

D:\Development\coffeescript>

  - 범위 다루기 : ..과 ... 의 차이는 끝수 포함/미포함 : range.coffe

range = [0..10]
console.log range

range = [0...10]
console.log range

range = [15...10]
console.log range

// 결과

D:\Development\coffeescript>coffee range

[ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

[ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

[ 15, 14, 13, 12, 11 ]

  

  - 오브젝트 다루기 : obj.coffee

obj = name: "dowon", job: "Programmer"
console.log obj
obj = 
	name: "dowon-01" 
	job: "Programmer-01"
console.log obj

name = "dowon-02"
job = "Programmer-02"
obj = name: name, job: job
console.log obj

obj = {name, job}
console.log obj

 - key:value 같은 줄에 쓰면 콤마(,) 구분

 - 한줄 띠기 하면 콤마 필요없음

 - {name} 하면 명칭을 그대로 key 명칭을 활용

// 결과 

D:\Development\coffeescript>coffee obj

{ name: 'dowon', job: 'Programmer' }

{ name: 'dowon-01', job: 'Programmer-01' }

{ name: 'dowon-02', job: 'Programmer-02' }

{ name: 'dowon-02', job: 'Programmer-02' }

  - 변수 다루기 : variable.coffee

[one, two, three] = ["1", "2", "3"]
console.log two
console.log three
name = "dowon"
obj = {name, job:"Programm er", other: {name}}
console.log obj

// Generated by CoffeeScript 1.4.0
(function() {
  var name, obj, one, three, two, _ref;
  _ref = ["1", "2", "3"], one = _ref[0], two = _ref[1], three = _ref[2];

  console.log(two);
  console.log(three);
  name = "dowon";
  obj = {
    name: name,
    job: "Programmer",
    other: {
      name: name
    }
  };
  console.log(obj);
}).call(this);

// 결과 

D:\Development\coffeescript>coffee variable

2

3

{ name: 'dowon', job: 'Programmer', other: { name: 'dowon' } }

2) Function 다루기 

  - 주석, 함수, 아규먼트 배열, Math.random 

  - 주석 : # 무시되는 문장 (컴파일시 주석문도 안남음), ### 주석 /* */ 으로 변환 : comment.coffee

one = 1 # comment
###
comment 2
###
two = 2

  - 함수 만들기 : -> 사용 : greet.coffee

###
function greet (name) {
	console.log("hi" + name +"!");
}
greet = function(name) {
}
###

greet = (name) -> console.log "hi #{name}!"
greet "Greeting" 
greet2 = (name = "friend") -> "hi #{name}"
console.log greet2
console.log greet2()

// 결과

D:\Development\coffeescript>coffee greet

hi Greeting!

[Function]

hi friend       <=== () 를 붙여서 함수 호출한다 

  - 배열 아규먼트 만들기 : ... 사용 : array.coffee

test = (x, y, z...) -> 
	console.log x
	console.log y
	console.log z

test "one", "two", "three"
console.log "---------------------"
test "one", "two", "three", "four", "five"	


test2 = (x..., y, z) -> 
	console.log x
	console.log y
	console.log z

test2 "one", "two", "three"
console.log "---------------------"
test2 "one", "two", "three", "four", "five"	

test3 = (x, y..., z) -> 
	console.log x
	console.log y
	console.log z

test3 "one", "two", "three"
console.log "---------------------"
test3 "one", "two", "three", "four", "five"	

// 결과 

D:\Development\coffeescript>coffee array

one

two

[ 'three' ]   

---------------------

one

two

[ 'three', 'four', 'five' ]

// test2 호출 

[ 'one' ]

two

three

---------------------

[ 'one', 'two', 'three' ]

four

five

// test3 호출 

one

[ 'two' ]

three

---------------------

one

[ 'two', 'three', 'four' ]

five

  - 자동 실행 함수 : do 사용하여 자동 실행토록 만들어준다 : anon.coffee

###
(() -> console.log())()
###

###
automatically invoke function
###
do (message = "hi dowon") ->
	console.log message

// Generated by CoffeeScript 1.4.0
/*
(() -> console.log())()
*/

/*
automatically invoke function
*/

(function() {
  (function(message) {
    return console.log(message);
  })("hi dowon");

}).call(this);

// 결과 : 만일 do를 넣지 않으면 수행되지 않음

D:\Development\coffeescript>coffee anon

hi dowon

  - Math.random 사용하기 : random.coffee

###
Math.random()
###

rand = (max = 10, min = 0) -> Math.floor(Math.random() * (max - min + 1)) + min

console.log rand()
console.log rand 100
console.log rand 60, 50

// 결과 : 수행때 마다 틀린 random값이 지정 범위내에서 출력됨 

D:\Development\coffeescript>coffee random

5

100

53

D:\Development\coffeescript>coffee random

1

32

53

3) 비교연산

  - ===, !== 사용하기 

  - if 문 사용하기 

  - ===, !== 를 사용하는 대신 is, isnt  문장으로 사용하기 : operator.coffee

###
is ===
isnt !==
###
name = "dowon"
if name is "dowon"
	console.log "great"

if name isnt "Dowon"
	console.log "poor"	

### if( !false ) ###
if not false
	console.log "cool"

###
var name = "dowon",
	job = "programmer";

if(name === "dowon" || job === "programmer") {
	console.log("right")
}	
###
name = "dowon"
job = "programmer"

if name is "dowon" and job is "programmer"
	console.log "right"

// 결과

D:\Development\coffeescript>coffee operator

great

poor

cool

right

  - ? 연산자를 통하여 null 체크 하기 : operator2.coffee

name = "dowon"
if name?
	console.log "hi"
person = 
	name: "dowon"
	job: "programmer"

console.log person?.name
name = name || "youngsik"
name ||= "youngsik"
name ?= "youngsik"
console.log name

// Generated by CoffeeScript 1.4.0
(function() {
  var name, person;
  name = "dowon";
  if (name != null) {
    console.log("hi");
  }
  person = {
    name: "dowon",
    job: "programmer"
  };

  console.log(person != null ? person.name : void 0);
  name = name || "youngsik";
  name || (name = "youngsik");
  if (name == null) {
    name = "youngsik";
  }
  console.log(name);
}).call(this);

// 결과

D:\Development\coffeescript>coffee operator2

hi

dowon

dowon

  - if 문을 재구성한다 : if.coffee

# x = 4
# if( x >= 0 && x <= 10) {}
x = 4
if 0 <= x <= 10
	console.log "true"

// Generated by CoffeeScript 1.4.0
(function() {
  var x;
  x = 4;
  if ((0 <= x && x <= 10)) {
    console.log("true");
  }
}).call(this);

// 결과

D:\Development\coffeescript>coffee if

true

* 테스트 파일 다운로드

4) CoffeeScript 문법 & 장/단점

  - if 문을 한줄로 사용할 때 조건 뒤에 then 구문 붙이기 

    예) if name is "dowon" then console.log "right"

Coffeescript from yongwoo Jeon