cream-and-sugar
Version:
A deliciously functional syntax for JavaScript with native support for JSX
157 lines (149 loc) • 7.32 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cream & Sugar: Logic & Infix Operations</title>
<link rel="icon" type="image/x-icon" href="https://jgnewman.github.io/cream-and-sugar/assets/images/favicon.ico" />
<link href="https://fonts.googleapis.com/css?family=Bitter:400,700|Open+Sans:300,400,800" rel="stylesheet">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" />
<link rel="stylesheet" href="../../assets/css/app.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/highlight.min.js"></script>
</head>
<body class="docs">
<div class="branding"></div>
<div class="content">
<div class="left-border">
<h1>Logic & Infix Operations</h1>
<h2 class="subhead">Familiar Forms in Some New Flavors</h2>
</div>
<pre><code># Infix operations take this form
a OPERATOR b
</code></pre><p>Most of what you'll do in C&S will take the form of a function call. However, like in most languages, There are some quick operations you can perform and comparisons you can make outside of function call syntax using infix operators.</p>
<p>Let's start with basic math:</p>
<pre><code>3 + 2 #=> 5
3 - 2 #=> 1
3 * 2 #=> 6
3 / 2 #=> 1.5
3 % 2 #=> 1
</code></pre><ul>
<li>Addition is performed with the <code>+</code> operator.</li>
<li>Subtraction is performed with the <code>-</code> operator.</li>
<li>Multiplication is performed with the <code>*</code> operator.</li>
<li>Basic division is performed in two ways –<ul>
<li>To get a rounded float, use the <code>/</code> operator.</li>
<li>To get the a remainder, use the <code>%</code> operator.</li>
</ul>
</li>
</ul>
<p>You will also use infix operators to perform comparisons:</p>
<pre><code>3 is 3 #=> true
3 == 3 #=> true
3 isnt 2 #=> true
3 != 2 #=> true
</code></pre><ul>
<li>Equality is tested in two ways –<ul>
<li>For strict equal comparison, use the <code>is</code> or <code>==</code> operators.</li>
<li>For strict unequal comparison, use the <code>isnt</code> or <code>!=</code> operators.</li>
</ul>
</li>
</ul>
<p>Note that C&S does not allow type coercive comparisons, equality checks are translated to JavaScript's <code>===</code> operator, while inequality checks are translated to <code>!==</code>.</p>
<pre><code>3 lt 2 #=> false
3 gt 2 #=> true
3 lte 2 #=> false
3 gte 2 #=> true
</code></pre><ul>
<li>For a "<" comparison, use the <code>lt</code> operator.</li>
<li>For a ">" comparison, use the <code>gt</code> operator.</li>
<li>For a "<=" comparison, use the <code>lte</code> operator.</li>
<li>For a ">=" comparison, use the <code>gte</code> operator.</li>
</ul>
<p>C&S also includes friendly, readable operators for basic logic:</p>
<pre><code>a and b
a or b
</code></pre><ul>
<li>The <code>and</code> operator returns true if both operands are truthy.</li>
<li>The <code>or</code> operator returns true if either operand is truthy.</li>
</ul>
<p>Note that <code>&&</code> and <code>||</code> are not logic operators in C&S.</p>
<p>Two other infix operators worthy of note are the cons and back cons operators.</p>
<pre><code>1 >> [2, 3, 4] #=> [1, 2, 3, 4]
[1, 2, 3] << 4 #=> [1, 2, 3, 4]
</code></pre><ul>
<li>To add an item to the front of an array, use the <code>>></code> operator.</li>
<li>To add an item to the back of an array, use the <code><<</code> operator.</li>
</ul>
</div>
<section id="docs-app"></section>
<script>
// Section for random JavaScript hacks just to get this out quickly.
window.addEventListener('load', function () {
// Fix indentation in code blocks the best we can since panini's
// markdown compiler injects whitespace into pre tags.
Array.prototype.slice.call(document.querySelectorAll('pre code')).forEach(function (code) {
var lines = code.innerHTML.trim().split('\n');
var out = [lines[0]];
var sliceAmount;
lines.slice(1).forEach(function (line, index) {
if (index === 0) {
var whitespace = line.match(/^\s+/);
whitespace = whitespace ? whitespace[0] : '';
if (/([=-](\>)?|\{|match|\>|div|try|chain|default\s+[^\n])$/.test(lines[0])) {
whitespace = whitespace.slice(2);
}
sliceAmount = whitespace;
}
out.push(line.replace(sliceAmount, ''));
});
code.innerHTML = out.join('\n');
code.className = 'visible lang-coffeescript';
hljs.highlightBlock(code);
});
// Attach id's to h4 tags so that we can link to specific bifs.
Array.prototype.slice.call(document.querySelectorAll('h4')).forEach(function (h4) {
var html = h4.innerHTML.split(/\s+/g);
html[0] = '<span class="bif" id="' + html[0] + '">' + html[0] + '</span>';
h4.innerHTML = html.join(' ');
h4.className = 'visible';
});
// Fix relative link issues with the github site living in a subdirectory
Array.prototype.slice.call(document.querySelectorAll('.content a')).forEach(function (a) {
if (/^\/cream-and-sugar\//.test(location.pathname)) {
a.setAttribute('href', '/cream-and-sugar' + a.getAttribute('href'))
}
});
// Some script conflict is preventing us from linking to a certain
// spot on the page so here we just wait until the next run loop
// and if we have a hash in the location object, scroll to it.
(function () {
var hash = location.hash;
if (hash) {
var item = document.querySelector(hash);
setTimeout(function () {
item && window.scroll(0, item.offsetParent.offsetTop);
},0);
}
}());
// Fixes a responsiveness issue where on large screens sometimes
// the offgray sidebar isn't tall enough. Make sure its always
// tall enough whenever the screen resizes.
(function () {
var branding = document.querySelector('.branding');
var content = document.querySelector('.content');
function resizerizer() {
var brandingHeight = branding.offsetHeight;
content.style.height = '';
if (content.offsetHeight < brandingHeight) {
content.style.height = brandingHeight + 'px';
}
}
window.addEventListener('resize', resizerizer);
resizerizer();
}());
});
</script>
<script src="../../assets/js/app.js"></script>
</body>
</html>