작성자: 허종문
- 세미골론(;) , 괄호() , 중괄호{} 를 생략할수 있다.
- 괄호는 파라미터에서는 생략할수 없다.
- 중괄호는 json스타일의 객체를 선언할때만 사용한다.
- 한줄 주석
# 한줄 주석은 # 하나를 사용한다. 이주석은 해석후 안보인다.- 여러줄 주석
###
여러줄 주석은 # 3개를 사용한다.
이 주석은 해석후 보인다.
###함수선언시 한줄바꿔서 들여쓰기하면 중괄호를 넣는것과 같다.
함수는 -> 를 사용한다.
- before
-> console.log('함수')- after
(function() {
return console.log('함수');
});- before
do -> console.log('do 키워드를 사용한 함수')- after
(function() {
return console.log('do 키워드를 사용한 함수');
})();- before
nameFun = ->
console.log('이름있는함수')- after
var nameFun;
nameFun = function() {
return console.log('이름있는함수');
};- before
pamFun = (pam) ->
console.log('파라미터가 있는함수')- after
var pamFun;
pamFun = function(pam) {
return console.log('파라미터가 있는함수');
};- 함수에서 문자열 이어붙이기
'' 를 사용하면 한줄로, "" 를 사용하면 여려줄로 이어붙이기가 가능하다.
- before
stringFun1 = (pam) ->
console.log "문자열을 한줄로 이어붙이기 #{msg}"- after
var stringFun1;
stringFun1 = function(pam) {
return console.log("문자열을 한줄로 이어붙이기 " + msg);
};- before
stringFun2 = (pam) ->
console.log "
문자열을
여러줄로
이어붙이기
#{msg}"- after
var stringFun2;
stringFun2 = function(pam) {
return console.log("문자열을 여러줄로 이어붙이기 " + msg);
};- 함수에 return 이 자동으로 들어간다.
이걸빼려면 함수에 return 을 넣어주면 된다.
- 모든 함수는 범위를 만들며 유일한 방법은 함수를 정의하는것.
- 변수는 변수가 할당된 곳에서 최상단에서 존재한다.
- 범위 바깥에서는 변수에 접근할수 없다.
-
is : ===
-
isnt : !==
-
not : !
-
and : &&
-
or : ||
-
true, yes, on : true
-
false, no, off : false
-
is : ===
a is ba === b;- isnt : !==
a isnt ba !== b;- not : !
a not ba(!b);- and : &&
a and ba && b;- or : ||
a or ba || b;- before
if true
1
else if false
2- after
if (true) {
1;
} else if (false) {
2;
}- before
if true then 1 else 2- after
if (true) {
1;
} else {
2;
}- before
1 unless true
unless ture then 2- after
if (!true) {
1;
}
if (!ture) {
2;
}- before
a ? b- after
if (typeof a !== "undefined" && a !== null) {
a;
} else {
b;
};c 가 null 경우 오류남
c ?= d- before
if coffee?
alert 'dowon'- after
if (typeof coffee !== "undefined" && coffee !== null) {
alert('dowon');
}- before
alert 'dowon' if coffee?- after
if (typeof coffee !== "undefined" && coffee !== null) {
alert('dowon');
}case 조건을 when 조건 then 으로 변환
- before
-> switch coffee
when 0 then 'hi'
when 1 then 'haha'
else 'dowon'- after
(function() {
switch (coffee) {
case 0:
return 'hi';
case 1:
return 'haha';
default:
return 'dowon';
}
});- @ 는 this 의 별칭
- 컨텍스트에 할당하려면 -> 대신 => 를 사용해야한다.
- this 를 컨텍스트에 할당할때 유용하다
- before
collback -> 1- after
collback(function() {
return 1;
});- before
collback => 1- after
collback((function(_this) {
return function() {
return 1;
};
})(this));- before
setName = (name) -> name = name- after
var setName;
setName = function(name) {
return name = name;
};- before
setName = (@name) ->- after
var setName;
setName = function(name) {
this.name = name;
};- before
(a = true) ->- after
(function(a) {
if (a == null) {
a = true;
}
});- before
a = (b, c...) -> console.log c
a 1, 2, 3, 4, 5- after
var a,
slice = [].slice;
a = function() {
var b, c;
b = arguments[0], c = 2 <= arguments.length ? slice.call(arguments, 1) : [];
return console.log(c);
};
a(1, 2, 3, 4, 5);-
{} 사용
-
before
coffee =->
answer = confirm 'down'
'hi #{answer}'- after
var coffee;
coffee = function() {
var answer;
answer = confirm('down');
return 'hi #{answer}';
};- before
jQuery ($) ->- after
jQuery(function($) {});- before
$ ->- after
$(function() {});-
jquery 예제
-
before
$(document).on 'click', '.first-btn, .last-button', ->
c = $(@).attr 'class'
t = $(@)
if c == 'first-btn'
ul = t.next 'ul'
else if c is 'last-button'
ul = t.parent().parent 'ul'
if ul.css('display') is 'none'
$('.lnb-link ul ul').hide();
ul.show()
else
ul.hide()- after
$(document).on('click', '.first-btn, .last-button', function() {
var c, t, ul;
c = $(this).attr('class');
t = $(this);
if (c === 'first-btn') {
ul = t.next('ul');
} else if (c === 'last-button') {
ul = t.parent().parent('ul');
}
if (ul.css('display') === 'none') {
$('.lnb-link ul ul').hide();
return ul.show();
} else {
return ul.hide();
}
});