Repository: sayazamurai/python-vs-javascript
Branch: master
Commit: 53387b23f054
Files: 5
Total size: 85.8 KB
Directory structure:
gitextract_4h1cm22n/
├── LICENSE
├── README.md
├── index.html
└── static/
├── app.js
└── prism-base16-atelierplateau.light.css
================================================
FILE CONTENTS
================================================
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) 2018 Saya
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
# [How to write X in both Python 3 and JavaScript (ES2015)](https://sayazamurai.github.io/python-vs-javascript/)
[](https://sayazamurai.github.io/python-vs-javascript/)
================================================
FILE: index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>How to write X in both Python 3 and JavaScript (ES2015)</title>
<link rel="stylesheet" href="https://unpkg.com/tachyons@4.10.0/css/tachyons.min.css"/>
<link rel="stylesheet" href="static/prism-base16-atelierplateau.light.css"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<meta property="og:title" content="How to write X in both Python 3 and JavaScript (ES2015)">
<meta property="og:locale" content="en">
<meta property="og:url" content="https://sayazamurai.github.io/python-vs-javascript/">
<meta property="og:site_name" content="Saya">
<meta property="og:image" content="https://sayazamurai.github.io/python-vs-javascript/static/images/og.jpg">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@sayajewels">
<meta name="twitter:creator" content="@sayajewels">
<style>
a {
color: inherit;
}
a:hover {
color: #D5008F;
}
pre[class*="language-"] {
margin: 0;
}
</style>
</head>
<body class="avenir dark-gray bg-washed-red lh-copy">
<div class="bottom-right-button"
style="position: fixed;
bottom: 35px;
right: 30px;
opacity: 0.5;
z-index: 5;">
<a class="bottom-right-button-link js-bottom-right-button-link" href="#">
<img class="bottom-right-icon" src="static/images/right-bottom-button.png" style="width: 40px; height: 40px;">
</a>
</div>
<div class="title-container center mw7 ph3">
<h1 class="title f1-ns f3 tc pt3 pt5-ns lh-title">
How to write X in both Python 3 and JavaScript (ES2015)
</h1>
</div>
<div class="header-text-container center mw7 pb3 ph3">
<p class="header-text f4-ns">Python and JavaScript are <a href="https://stackoverflow.blog/2017/09/06/incredible-growth-python/">two of the most popular programming languages</a>.
If you're a Python programmer learning JavaScript, or a JavaScript programmer learning Python, this handy cheat sheet might help you.</p><p class="header-text f4-ns">This page is open sourced on <a href="https://github.com/sayazamurai/python-vs-javascript">GitHub</a>. Pull requests are welcome!</p>
<p class="tc"><!-- Place this tag where you want the button to render. -->
<a class="github-button" href="https://github.com/sayazamurai/python-vs-javascript" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star sayazamurai/python-vs-javascript on GitHub">Star</a></p>
</div>
<div class="about-the-author center mw7 pb3 ph3">
<h2 class="tc f3-ns f4 mb2">About the Author</h2>
<div class="center tc mb3">
<img class="ba b--white bw2 dib br4" src="static/images/saya-profile.jpg" width="130" height="130" />
</div>
<p class="profile-text mw6 center mt0">
I'm Saya, a jewelry designer and a junior JavaScript/Python developer living in Tokyo. Find me on Twitter: <a href="https://twitter.com/sayajewels">@sayajewels</a>
</p>
<p class="profile-text mw6 center mt0">
<blockquote class="twitter-tweet tw-align-center" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr">If you're are Python programmer learning JavaScript, or a JavaScript programmer learning Python, this handy cheat sheet might help you. Pull requests are welcome! 🐥 ✨<br><br>How to write X in both Python 3 and JavaScript (ES2015)<a href="https://t.co/F3MScUMheC">https://t.co/F3MScUMheC</a></p>— Saya (@sayajewels) <a href="https://twitter.com/sayajewels/status/1040602212718632960?ref_src=twsrc%5Etfw">September 14, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</p>
<p class="profile-text mw6 center mt0">
<strong>See also:</strong> Ilya Schurov has made a <a href="https://ischurov.github.io/pythonvjs/">similar page</a> - check it out!
</p>
</div>
<div class="tabele-of-contents center mw7 pb3 ph3 mb4">
<h2 class="tc f3-ns f4 mb2">Table of Contents</h2>
<ul class="list pl0 tc">
<li class="dib mh2"><a href="#math">Math</a></li>
<li class="dib mh2"><a href="#control-flow">Control Flow</a></li>
<li class="dib mh2"><a href="#string">String</a></li>
<li class="dib mh2"><a href="#list">List/Array</a></li>
<li class="dib mh2"><a href="#dictionary">Dictionary/Object</a></li>
<li class="dib mh2"><a href="#function">Function</a></li>
<li class="dib mh2"><a href="#class">Class</a></li>
</ul>
</div>
<div class="mw9 center ph3-ns ph2">
<div class="Q01 cf ph2-ns mb4-ns mb3" id="math">
<h3 class="tc normal f3-ns f4 mb2">Math: <strong>Absolute Value</strong></h3>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>Python 3</strong> / <a href="https://docs.python.org/3/library/functions.html#abs"><code>abs</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-python"># 100
print(abs(-100))
# 50
print(abs(50))</code></pre>
</div>
</div>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>JavaScript (ES2015)</strong> / <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/abs"><code>abs</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-javascript">// 100
console.log(Math.abs(-100))
// 50
console.log(Math.abs(50))</code></pre>
</div>
</div>
</div>
<div class="Q02 cf ph2-ns mb4-ns mb3">
<h3 class="tc normal f3-ns f4 mb2">Math: <strong>Round Numbers</strong></h3>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>Python 3</strong> / <a href="https://docs.python.org/3/library/math.html#math.ceil"><code>ceil</code></a>, <a href="https://docs.python.org/3/library/math.html#math.floor"><code>floor</code></a>, <a href="https://docs.python.org/3/library/functions.html#round"><code>round</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-python">import math
# 2
print(math.ceil(1.5))
# 1
print(math.floor(1.5))
# 2
print(round(1.5))
</code></pre>
</div>
</div>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>JavaScript (ES2015)</strong> / <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/ceil"><code>ceil</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor"><code>floor</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/round"><code>round</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-javascript">// 2
console.log(Math.ceil(1.5))
// 1
console.log(Math.floor(1.5))
// 2
console.log(Math.round(1.5))
</code></pre>
</div>
</div>
</div>
<div class="Q03 cf ph2-ns mb4-ns mb3">
<h3 class="tc normal f3-ns f4 mb2">Math: <strong>Max and Min</strong></h3>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>Python 3</strong> / <a href="https://docs.python.org/3/library/functions.html#max"><code>max</code></a>, <a href="https://docs.python.org/3/library/functions.html#min"><code>min</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-python"># 100
print(max(100, 50))
# 40
print(min(80, 40))
</code></pre>
</div>
</div>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>JavaScript (ES2015)</strong> / <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/max"><code>max</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/min"><code>min</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-javascript">// 100
console.log(Math.max(100, 50))
// 40
console.log(Math.min(80, 40))
</code></pre>
</div>
</div>
</div>
<div class="Q04 cf ph2-ns mb4-ns mb3" id="control-flow">
<h3 class="tc normal f3-ns f4 mb2">Control Flow: <strong>If else</strong></h3>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>Python 3</strong> / <a href="https://docs.python.org/3/tutorial/controlflow.html#if-statements"><code>if</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-python">some_number = 3
# Number is 3
if some_number == 1:
print("Number is 1")
elif some_number == 2:
print("Number is 2")
elif some_number == 3:
print("Number is 3")
else:
print("?")
</code></pre>
</div>
</div>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>JavaScript (ES2015)</strong> / <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else#Using_else_if"><code>if</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-javascript">const someNumber = 3
// Number is 3
if (someNumber === 1) {
console.log('Number is 1')
} else if (someNumber === 2) {
console.log('Number is 2')
} else if (someNumber === 3) {
console.log('Number is 3')
} else {
console.log('?')
}</code></pre>
</div>
</div>
</div>
<div class="Q05 cf ph2-ns mb4-ns mb3">
<h3 class="tc normal f3-ns f4 mb2">Control Flow: <strong>Ternary</strong></h3>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>Python 3</strong></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-python">x = 2
y = 3
# even
print("even" if x % 2 == 0 else "odd")
# odd
print("even" if y % 2 == 0 else "odd")
</code></pre>
</div>
</div>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>JavaScript (ES2015)</strong> / <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator"><code>Conditional Operator</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-javascript">const x = 2
const y = 3
// even
console.log(x % 2 === 0 ? 'even' : 'odd')
// odd
console.log(y % 2 === 0 ? 'even' : 'odd')
</code></pre>
</div>
</div>
</div>
<div class="Q06 cf ph2-ns mb4-ns mb3">
<h3 class="tc normal f3-ns f4 mb2">Control Flow: <strong>Boolean</strong></h3>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>Python 3</strong></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-python"># yes
if "abc" == "abc":
print("yes")
else:
print("no")
# yes
if "abc" != "def":
print("yes")
else:
print("no")
# no
if True and False:
print("yes")
else:
print("no")
# yes
if True or False:
print("yes")
else:
print("no")
# yes
if not False:
print("yes")
else:
print("no")
# no
if 0:
print("yes")
else:
print("no")
# no
if "":
print("yes")
else:
print("no")
# no
if []:
print("yes")
else:
print("no")
# no
if None:
print("yes")
else:
print("no")
# yes
if not not not None:
print("yes")
else:
print("no")
</code></pre>
</div>
</div>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>JavaScript (ES2015)</strong> / <a href="https://developer.mozilla.org/en-US/docs/Glossary/Falsy"><code>Falsy Values</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-javascript">// yes
if ('abc' === 'abc') {
console.log('yes')
} else {
console.log('no')
}
// yes
if ('abc' !== 'def') {
console.log('yes')
} else {
console.log('no')
}
// no
if (true && false) {
console.log('yes')
} else {
console.log('no')
}
// yes
if (true || false) {
console.log('yes')
} else {
console.log('no')
}
// yes
if (!false) {
console.log('yes')
} else {
console.log('no')
}
// no
if (0) {
console.log('yes')
} else {
console.log('no')
}
// no
if ('') {
console.log('yes')
} else {
console.log('no')
}
// no
if (undefined) {
console.log('yes')
} else {
console.log('no')
}
// no
if (null) {
console.log('yes')
} else {
console.log('no')
}
// yes
if (!!!null) {
console.log('yes')
} else {
console.log('no')
}
</code></pre>
</div>
</div>
</div>
<div class="Q07 cf ph2-ns mb4-ns mb3">
<h3 class="tc normal f3-ns f4 mb2">Control Flow: <strong>Exceptions</strong></h3>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>Python 3</strong> / <a href="https://docs.python.org/3/tutorial/errors.html"><code>Errors</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-python"># foo is not defined
try:
foo()
except NameError:
print("foo is not defined")
</code></pre>
</div>
</div>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>JavaScript (ES2015)</strong> / <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch"><code>try...catch</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-javascript">// foo is not defined
try {
foo()
} catch (error) {
console.log('foo is not defined')
}
</code></pre>
</div>
</div>
</div>
<div class="Q08 cf ph2-ns mb4-ns mb3">
<h3 class="tc normal f3-ns f4 mb2">Control Flow: <strong>Continue / Break</strong></h3>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>Python 3</strong> / <a href="https://docs.python.org/3/tutorial/controlflow.html#break-and-continue-statements-and-else-clauses-on-loops"><code>break/continue</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-python"># 1
# 2
# Fizz
# 4
# Buzz
for number in range(1, 101):
if number == 3:
print("Fizz")
continue
if number == 5:
print("Buzz")
break
print(number)
</code></pre>
</div>
</div>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>JavaScript (ES2015)</strong> / <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/continue"><code>continue</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/break"><code>break</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-javascript">// 1
// 2
// Fizz
// 4
// Buzz
for (let i = 1; i <= 100; i = i + 1) {
if (i === 3) {
console.log('Fizz')
continue
}
if (i === 5) {
console.log('Buzz')
break
}
console.log(i)
}
</code></pre>
</div>
</div>
</div>
<div class="Q09 cf ph2-ns mb4-ns mb3" id="string">
<h3 class="tc normal f3-ns f4 mb2">String: <strong>Length</strong></h3>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>Python 3</strong> / <a href="https://docs.python.org/3/library/functions.html#len"><code>len</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-python">some_string = "abcd"
# 4
print(len(some_string))
</code></pre>
</div>
</div>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>JavaScript (ES2015)</strong> / <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/length"><code>length</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-javascript">const someString = 'abcd'
// 4
console.log(someString.length)
</code></pre>
</div>
</div>
</div>
<div class="Q10 cf ph2-ns mb4-ns mb3">
<h3 class="tc normal f3-ns f4 mb2">String: <strong>Interpolation</strong></h3>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>Python 3</strong></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-python">x = "Hello"
# Hello World
print(f"{x} World")
</code></pre>
</div>
</div>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>JavaScript (ES2015)</strong></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-javascript">const x = 'Hello'
// Hello World
console.log(`${x} World`)
</code></pre>
</div>
</div>
</div>
<div class="Q11 cf ph2-ns mb4-ns mb3">
<h3 class="tc normal f3-ns f4 mb2">String: <strong>Multiline</strong></h3>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>Python 3</strong></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-python">x = """------
Line 1
Line 2
Line 3
------"""
# ------
# Line 1
# Line 2
# Line 3
# ------
print(x)
</code></pre>
</div>
</div>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>JavaScript (ES2015)</strong> / <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Multi-line_strings"><code>Multiline Strings</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-javascript">const x = `------
Line 1
Line 2
Line 3
------`
// ------
// Line 1
// Line 2
// Line 3
// ------
console.log(x)
</code></pre>
</div>
</div>
</div>
<div class="Q12 cf ph2-ns mb4-ns mb3">
<h3 class="tc normal f3-ns f4 mb2">String: <strong>String to Integer</strong></h3>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>Python 3</strong> / <a href="https://docs.python.org/3/library/functions.html#int"><code>int</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-python">string_1 = "1"
number_1 = int(string_1)
# 3
print(number_1 + 2)
</code></pre>
</div>
</div>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>JavaScript (ES2015)</strong> / <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt"><code>parseInt</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-javascript">const string1 = '1'
const number1 = parseInt(string1)
// 3
console.log(number1 + 2)
</code></pre>
</div>
</div>
</div>
<div class="Q13 cf ph2-ns mb4-ns mb3">
<h3 class="tc normal f3-ns f4 mb2">String: <strong>Contains</strong></h3>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>Python 3</strong> / <a href="https://docs.python.org/3/library/stdtypes.html#common-sequence-operations"><code>in</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-python"># 2 is in the string
if "2" in "123":
print("2 is in the string")
# 2 is not in the string
if "2" not in "456":
print("2 is not in the string")
</code></pre>
</div>
</div>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>JavaScript (ES2015)</strong> / <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes"><code>includes</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-javascript">// 2 is in the string
if ('123'.includes('2')) {
console.log('2 is in the string')
}
// 2 is not in the string
if (!'456'.includes('2')) {
console.log('2 is not in the string')
}
</code></pre>
</div>
</div>
</div>
<div class="Q14 cf ph2-ns mb4-ns mb3">
<h3 class="tc normal f3-ns f4 mb2">String: <strong>Substring</strong></h3>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>Python 3</strong> / <a href="https://docs.python.org/3/library/stdtypes.html#common-sequence-operations"><code>[i:j]</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-python">some_string = "0123456"
# 234
print(some_string[2:5])
</code></pre>
</div>
</div>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>JavaScript (ES2015)</strong> / <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substring"><code>substring</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-javascript">const someString = '0123456'
// 234
console.log(someString.substring(2, 5))
</code></pre>
</div>
</div>
</div>
<div class="Q15 cf ph2-ns mb4-ns mb3">
<h3 class="tc normal f3-ns f4 mb2">String: <strong>Join</strong></h3>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>Python 3</strong> / <a href="https://docs.python.org/3/library/stdtypes.html#str.join"><code>join</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-python">some_list = ["a", "b", "c"]
# a,b,c
print(",".join(some_list))
</code></pre>
</div>
</div>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>JavaScript (ES2015)</strong> / <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join"><code>join</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-javascript">const someList = ['a', 'b', 'c']
// a,b,c
console.log(someList.join(','))
</code></pre>
</div>
</div>
</div>
<div class="Q16 cf ph2-ns mb4-ns mb3">
<h3 class="tc normal f3-ns f4 mb2">String: <strong>Strip</strong></h3>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>Python 3</strong> / <a href="https://docs.python.org/3/library/stdtypes.html#str.strip"><code>strip</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-python">some_string = " abc "
# abc
print(some_string.strip())
</code></pre>
</div>
</div>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>JavaScript (ES2015)</strong> / <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/trim"><code>trim</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-javascript">const someString = ' abc '
// abc
console.log(someString.trim())
</code></pre>
</div>
</div>
</div>
<div class="Q17 cf ph2-ns mb4-ns mb3">
<h3 class="tc normal f3-ns f4 mb2">String: <strong>Split</strong></h3>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>Python 3</strong> / <a href="https://docs.python.org/3/library/stdtypes.html#str.split"><code>split</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-python">some_string = "a,b,c"
some_string_split = some_string.split(",")
# a
print(some_string_split[0])
# b
print(some_string_split[1])
# c
print(some_string_split[2])
</code></pre>
</div>
</div>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>JavaScript (ES2015)</strong> / <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split"><code>split</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-javascript">const someString = 'a,b,c'
const someStringSplit = someString.split(',')
// a
console.log(someStringSplit[0])
// b
console.log(someStringSplit[1])
// c
console.log(someStringSplit[2])
</code></pre>
</div>
</div>
</div>
<div class="Q18 cf ph2-ns mb4-ns mb3">
<h3 class="tc normal f3-ns f4 mb2">String: <strong>Replace</strong></h3>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>Python 3</strong> / <a href="https://docs.python.org/3/library/stdtypes.html#str.replace"><code>replace</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-python">some_string = "a b c d e"
# a,b,c,d,e
print(some_string.replace(" ", ","))
</code></pre>
</div>
</div>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>JavaScript (ES2015)</strong> / <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions"><code>Regular Expressions</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace"><code>replace</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-javascript">const someString = 'a b c d e'
// Only changes the first space
// a,b c d e
// console.log(someString.replace(' ', ','))
// Use / /g instead of ' ' to change every space
console.log(someString.replace(/ /g, ','))
</code></pre>
</div>
</div>
</div>
<div class="Q19 cf ph2-ns mb4-ns mb3">
<h3 class="tc normal f3-ns f4 mb2">String: <strong>Search</strong></h3>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>Python 3</strong> / <a href="https://docs.python.org/3/library/re.html#re.search"><code>search</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-python">import re
# Has a number
if re.search(r"\d", "iphone 8"):
print("Has a number")
# Doesn't have a number
if not re.search(r"\d", "iphone x"):
print("Doesn't have a number")
</code></pre>
</div>
</div>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>JavaScript (ES2015)</strong> / <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions"><code>Regular Expressions</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match"><code>match</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-javascript">// Has a number
if ('iphone 8'.match(/\d/g)) {
console.log('Has a number')
}
// Doesn't have a number
if (!'iphone x'.match(/\d/g)) {
console.log("Doesn't have a number")
}
</code></pre>
</div>
</div>
</div>
<div class="Q20 cf ph2-ns mb4-ns mb3" id="list">
<h3 class="tc normal f3-ns f4 mb2">List/Array: <strong>Iteration</strong></h3>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>Python 3</strong></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-python">some_list = [6, 3, 5]
# 6
# 3
# 5
for item in some_list:
print(item)
</code></pre>
</div>
</div>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>JavaScript (ES2015)</strong> / <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach"><code>forEach</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-javascript">const someList = [6, 3, 5]
// 6
// 3
// 5
someList.forEach(element => {
console.log(element)
})
</code></pre>
</div>
</div>
</div>
<div class="Q21 cf ph2-ns mb4-ns mb3">
<h3 class="tc normal f3-ns f4 mb2">List/Array: <strong>Length</strong></h3>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>Python 3</strong> / <a href="https://docs.python.org/3/library/functions.html#len"><code>len</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-python">some_list = [1, 4, 9]
# 3
print(len(some_list))
</code></pre>
</div>
</div>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>JavaScript (ES2015)</strong> / <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/length"><code>length</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-javascript">const someList = [1, 4, 9]
// 3
console.log(someList.length)
</code></pre>
</div>
</div>
</div>
<div class="Q22 cf ph2-ns mb4-ns mb3">
<h3 class="tc normal f3-ns f4 mb2">List/Array: <strong>Enumerate</strong></h3>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>Python 3</strong> / <a href="https://docs.python.org/3/library/functions.html#enumerate"><code>enumerate</code></a>, <a href="https://docs.python.org/3/library/stdtypes.html#typesseq-list"><code>list</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-python">some_list = [6, 3, 5]
# 0 6
# 1 3
# 2 5
for i, item in enumerate(some_list):
print(f"{i} {item}")
# If you're not using this in a for loop, use list()
# list(enumerate(some_list)) # [(0, 6), (1, 3), (2, 5)]
</code></pre>
</div>
</div>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>JavaScript (ES2015)</strong> / <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/foreach"><code>forEach</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map"><code>map</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-javascript">const someList = [6, 3, 5]
// 0 6
// 1 3
// 2 5
someList.forEach((element, index) => {
console.log(`${index} ${element}`)
})
</code></pre>
</div>
</div>
</div>
<div class="Q23 cf ph2-ns mb4-ns mb3">
<h3 class="tc normal f3-ns f4 mb2">List/Array: <strong>Contains</strong></h3>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>Python 3</strong> / <a href="https://docs.python.org/3/library/stdtypes.html#common-sequence-operations"><code>in</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-python"># 2 is in the list
if 2 in [1, 2, 3]:
print("2 is in the list")
# 2 is not in the list
if 2 not in [4, 5, 6]:
print("2 is not in the list")
</code></pre>
</div>
</div>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>JavaScript (ES2015)</strong> / <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes"><code>includes</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-javascript">// 2 is in the list
if ([1, 2, 3].includes(2)) {
console.log('2 is in the list')
}
// 2 is not in the list
if (![4, 5, 6].includes(2)) {
console.log('2 is not in the list')
}
</code></pre>
</div>
</div>
</div>
<div class="Q24 cf ph2-ns mb4-ns mb3">
<h3 class="tc normal f3-ns f4 mb2">List/Array: <strong>Reverse</strong></h3>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>Python 3</strong> / <a href="https://docs.python.org/3/library/functions.html#reversed"><code>reversed</code></a>, <a href="https://docs.python.org/3/library/stdtypes.html#typesseq-list"><code>list</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-python">some_list = [1, 2, 3, 4]
# reversed(some_list) is just an iterable.
# To convert an iterable into a list, use list()
reversed_list = list(reversed(some_list))
# 4
# 3
# 2
# 1
for item in reversed_list:
print(item)
# You can use an iterable instead of a list in a for loop
# for item in reversed(some_list):
</code></pre>
</div>
</div>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>JavaScript (ES2015)</strong> / <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse"><code>reverse</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-javascript">const someList = [1, 2, 3, 4]
someList.reverse()
// 4
// 3
// 2
// 1
someList.forEach(element => {
console.log(element)
})
</code></pre>
</div>
</div>
</div>
<div class="Q25 cf ph2-ns mb4-ns mb3">
<h3 class="tc normal f3-ns f4 mb2">List/Array: <strong>Range Iteration</strong></h3>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>Python 3</strong> / <a href="https://docs.python.org/3/library/stdtypes.html#typesseq-range"><code>range</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-python"># 0
# 1
# 2
# 3
for i in range(4):
print(i)
# 4
# 5
# 6
# 7
for i in range(4, 8):
print(i)
# 6
# 5
# 4
for i in range(6, 3, -1):
print(i)
</code></pre>
</div>
</div>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>JavaScript (ES2015)</strong></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-javascript">// 0
// 1
// 2
// 3
for (let i = 0; i < 4; i++) {
console.log(i)
}
// 4
// 5
// 6
// 7
for (let i = 4; i < 8; i++) {
console.log(i)
}
// 6
// 5
// 4
for (let i = 6; i > 3; i--) {
console.log(i)
}
</code></pre>
</div>
</div>
</div>
<div class="Q26 cf ph2-ns mb4-ns mb3">
<h3 class="tc normal f3-ns f4 mb2">List/Array: <strong>Append with Modification</strong></h3>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>Python 3</strong> / <a href="https://docs.python.org/3/library/stdtypes.html#mutable-sequence-types"><code>append</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-python">some_list = [1, 2]
some_list.append(3)
# 1
# 2
# 3
for x in some_list:
print(x)
</code></pre>
</div>
</div>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>JavaScript (ES2015)</strong> / <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push"><code>push</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-javascript">const someList = [1, 2]
someList.push(3)
// 1
// 2
// 3
someList.forEach(element => {
console.log(element)
})
</code></pre>
</div>
</div>
</div>
<div class="Q27 cf ph2-ns mb4-ns mb3">
<h3 class="tc normal f3-ns f4 mb2">List/Array: <strong>Append without Modification</strong></h3>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>Python 3</strong> / <a href="https://docs.python.org/3/whatsnew/3.5.html#pep-448-additional-unpacking-generalizations"><code>Unpacking</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-python">original_list = [1, 2]
# [original_list, 3] -> [[1, 2], 3]
# [*original_list, 3] -> [1, 2, 3]
new_list = [*original_list, 3]
original_list[0] = 5
# 1
# 2
# 3
for x in new_list:
print(x)
</code></pre>
</div>
</div>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>JavaScript (ES2015)</strong> / <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Copy_an_array"><code>Spread</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-javascript">const originalList = [1, 2]
// [originalList, 3] -> [[1, 2], 3]
// [...originalList, 3] -> [1, 2, 3]
const newList = [...originalList, 3]
originalList[0] = 5
// 1
// 2
// 3
newList.forEach(element => {
console.log(element)
})
</code></pre>
</div>
</div>
</div>
<div class="Q28 cf ph2-ns mb4-ns mb3">
<h3 class="tc normal f3-ns f4 mb2">List/Array: <strong>Extend with Modification</strong></h3>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>Python 3</strong> / <a href="https://docs.python.org/3/tutorial/datastructures.html#more-on-lists"><code>extend</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-python">some_list = [1]
some_list.extend([2, 3])
# 1
# 2
# 3
for x in some_list:
print(x)
</code></pre>
</div>
</div>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>JavaScript (ES2015)</strong> / <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#A_better_way_to_concatenate_arrays"><code>Spread</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-javascript">const someList = [1]
someList.push(...[2, 3])
// 1
// 2
// 3
someList.forEach(element => {
console.log(element)
})
</code></pre>
</div>
</div>
</div>
<div class="Q29 cf ph2-ns mb4-ns mb3">
<h3 class="tc normal f3-ns f4 mb2">List/Array: <strong>Extend without Modification</strong></h3>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>Python 3</strong> / <a href="https://docs.python.org/3/tutorial/datastructures.html#more-on-lists"><code>List addition</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-python">original_list = [1]
new_list = original_list + [2, 3]
original_list[0] = 5
# 1
# 2
# 3
for x in new_list:
print(x)
</code></pre>
</div>
</div>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>JavaScript (ES2015)</strong> / <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat"><code>concat</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-javascript">const originalList = [1]
const newList = originalList.concat([2, 3])
originalList[0] = 5
// 1
// 2
// 3
newList.forEach(element => {
console.log(element)
})
</code></pre>
</div>
</div>
</div>
<div class="Q30 cf ph2-ns mb4-ns mb3">
<h3 class="tc normal f3-ns f4 mb2">List/Array: <strong>Prepend</strong></h3>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>Python 3</strong> / <a href="https://docs.python.org/3/tutorial/datastructures.html#more-on-lists"><code>insert</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-python">some_list = [4, 5]
some_list.insert(0, 3)
# 3
# 4
# 5
for x in some_list:
print(x)
</code></pre>
</div>
</div>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>JavaScript (ES2015)</strong> / <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift"><code>unshift</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-javascript">const someList = [4, 5]
someList.unshift(3)
// 3
// 4
// 5
someList.forEach(element => {
console.log(element)
})
</code></pre>
</div>
</div>
</div>
<div class="Q31 cf ph2-ns mb4-ns mb3">
<h3 class="tc normal f3-ns f4 mb2">List/Array: <strong>Remove</strong></h3>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>Python 3</strong> / <a href="https://docs.python.org/3/library/stdtypes.html#mutable-sequence-types"><code>del</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-python">some_list = ["a", "b", "c"]
del some_list[1]
# a
# c
for x in some_list:
print(x)
</code></pre>
</div>
</div>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>JavaScript (ES2015)</strong> / <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice"><code>splice</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-javascript">const someList = ['a', 'b', 'c']
someList.splice(1, 1)
// a
// c
someList.forEach(element => {
console.log(element)
})
</code></pre>
</div>
</div>
</div>
<div class="Q32 cf ph2-ns mb4-ns mb3">
<h3 class="tc normal f3-ns f4 mb2">List/Array: <strong>Pop</strong></h3>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>Python 3</strong> / <a href="https://docs.python.org/3/tutorial/datastructures.html#more-on-lists"><code>pop</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-python">some_list = [1, 2, 3, 4]
# 4
print(some_list.pop())
# 1
print(some_list.pop(0))
# 2
# 3
for x in some_list:
print(x)
</code></pre>
</div>
</div>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>JavaScript (ES2015)</strong> / <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop"><code>pop</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/shift"><code>shift</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-javascript">const someList = [1, 2, 3, 4]
// 4
console.log(someList.pop())
// 1
console.log(someList.shift())
// 2
// 3
someList.forEach(element => {
console.log(element)
})
</code></pre>
</div>
</div>
</div>
<div class="Q33 cf ph2-ns mb4-ns mb3">
<h3 class="tc normal f3-ns f4 mb2">List/Array: <strong>Index</strong></h3>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>Python 3</strong> / <a href="https://docs.python.org/3/tutorial/datastructures.html#more-on-lists"><code>index</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-python">some_list = ["a", "b", "c", "d", "e"]
# 2
print(some_list.index("c"))
</code></pre>
</div>
</div>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>JavaScript (ES2015)</strong> / <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf"><code>indexOf</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-javascript">const someList = ['a', 'b', 'c', 'd', 'e']
// 2
console.log(someList.indexOf('c'))
</code></pre>
</div>
</div>
</div>
<div class="Q34 cf ph2-ns mb4-ns mb3">
<h3 class="tc normal f3-ns f4 mb2">List/Array: <strong>Copy</strong></h3>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>Python 3</strong> / <a href="https://docs.python.org/3/library/stdtypes.html#mutable-sequence-types"><code>[i:j]</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-python">original_list = [1, 2, 3]
new_list = original_list[:] # or original_list.copy()
original_list[2] = 4
# 1
# 2
# 3
for x in new_list:
print(x)
</code></pre>
</div>
</div>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>JavaScript (ES2015)</strong> / <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Copy_an_array"><code>Spread</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-javascript">const originalList = [1, 2, 3]
const newList = [...originalList]
originalList[2] = 4
// 1
// 2
// 3
newList.forEach(element => {
console.log(element)
})
</code></pre>
</div>
</div>
</div>
<div class="Q35 cf ph2-ns mb4-ns mb3">
<h3 class="tc normal f3-ns f4 mb2">List/Array: <strong>Map</strong></h3>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>Python 3</strong> / <a href="https://docs.python.org/3/tutorial/datastructures.html#list-comprehensions"><code>List Comprehensions</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-python">original_list = [1, 2, 3]
new_list = [x * 2 for x in original_list]
# 2
# 4
# 6
for x in new_list:
print(x)
</code></pre>
</div>
</div>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>JavaScript (ES2015)</strong> / <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map"><code>map</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-javascript">const originalList = [1, 2, 3]
// You can also do this:
// const newList = originalList.map(x => { return x * 2 })
const newList = originalList.map(x => x * 2)
// 2
// 4
// 6
newList.forEach(element => {
console.log(element)
})
</code></pre>
</div>
</div>
</div>
<div class="Q36 cf ph2-ns mb4-ns mb3">
<h3 class="tc normal f3-ns f4 mb2">List/Array: <strong>Map (Nested)</strong></h3>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>Python 3</strong> / <a href="https://docs.python.org/3/tutorial/datastructures.html#list-comprehensions"><code>List Comprehensions</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-python">first_list = [1, 3]
second_list = [3, 4]
combined_list = [[x + y for y in second_list] for x in first_list]
# 4
print(combined_list[0][0])
# 5
print(combined_list[0][1])
# 6
print(combined_list[1][0])
# 7
print(combined_list[1][1])
</code></pre>
</div>
</div>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>JavaScript (ES2015)</strong> / <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map"><code>map</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-javascript">const firstList = [1, 3]
const secondList = [3, 4]
const conbinedList = firstList.map(x => {
return secondList.map(y => {
return x + y
})
})
// 4
console.log(conbinedList[0][0])
// 5
console.log(conbinedList[0][1])
// 6
console.log(conbinedList[1][0])
// 7
console.log(conbinedList[1][1])
</code></pre>
</div>
</div>
</div>
<div class="Q37 cf ph2-ns mb4-ns mb3">
<h3 class="tc normal f3-ns f4 mb2">List/Array: <strong>Filter</strong></h3>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>Python 3</strong> / <a href="https://docs.python.org/3/tutorial/datastructures.html#list-comprehensions"><code>List Comprehensions</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-python">original_list = [1, 2, 3, 4, 5, 6]
new_list = [x for x in original_list if x % 2 == 0]
# 2
# 4
# 6
for x in new_list:
print(x)
</code></pre>
</div>
</div>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>JavaScript (ES2015)</strong> / <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter"><code>filter</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-javascript">const originalList = [1, 2, 3, 4, 5, 6]
const newList = originalList.filter(x => x % 2 == 0)
// 2
// 4
// 6
newList.forEach(element => {
console.log(element)
})
</code></pre>
</div>
</div>
</div>
<div class="Q38 cf ph2-ns mb4-ns mb3">
<h3 class="tc normal f3-ns f4 mb2">List/Array: <strong>Sum</strong></h3>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>Python 3</strong> / <a href="https://docs.python.org/3/library/functions.html#sum"><code>sum</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-python">some_list = [1, 2, 3]
# 6
print(sum(some_list))
</code></pre>
</div>
</div>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>JavaScript (ES2015)</strong> / <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce"><code>reduce</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-javascript">const someList = [1, 2, 3]
const reducer = (accumulator, currentValue) => accumulator + currentValue
// 6
console.log(someList.reduce(reducer))
</code></pre>
</div>
</div>
</div>
<div class="Q39 cf ph2-ns mb4-ns mb3">
<h3 class="tc normal f3-ns f4 mb2">List/Array: <strong>Zip</strong></h3>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>Python 3</strong> / <a href="https://docs.python.org/3/library/functions.html#zip"><code>zip</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-python">list_1 = [1, 3, 5]
list_2 = [2, 4, 6]
# 1 2
# 3 4
# 5 6
for x, y in zip(list_1, list_2):
print(f"{x} {y}")
</code></pre>
</div>
</div>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>JavaScript (ES2015)</strong> / <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map"><code>map</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-javascript">const list1 = [1, 3, 5]
const list2 = [2, 4, 6]
// [[1, 2], [3, 4], [5, 6]]
const zippedList = list1.map((x, y) => {
return [x, list2[y]]
})
zippedList.forEach(element => {
console.log(`${element[0]} ${element[1]}`)
})
</code></pre>
</div>
</div>
</div>
<div class="Q40 cf ph2-ns mb4-ns mb3">
<h3 class="tc normal f3-ns f4 mb2">List/Array: <strong>Slice</strong></h3>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>Python 3</strong> / <a href="https://docs.python.org/3/library/stdtypes.html#common-sequence-operations"><code>[i:j]</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-python">original_list = ["a", "b", "c", "d", "e"]
new_list = original_list[1:3]
original_list[1] = "x"
# b
# c
for x in new_list:
print(x)
</code></pre>
</div>
</div>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>JavaScript (ES2015)</strong> / <a href=" https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice"><code>slice</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-javascript">const originalList = ['a', 'b', 'c', 'd', 'e']
const newList = originalList.slice(1, 3)
originalList[1] = 'x'
// b
// c
newList.forEach(element => {
console.log(element)
})
</code></pre>
</div>
</div>
</div>
<div class="Q41 cf ph2-ns mb4-ns mb3">
<h3 class="tc normal f3-ns f4 mb2">List/Array: <strong>Sort</strong></h3>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>Python 3</strong> / <a href="https://docs.python.org/3/library/functions.html#sorted"><code>sorted</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-python">some_list = [4, 2, 1, 3]
# 1
# 2
# 3
# 4
for item in sorted(some_list):
print(item)
</code></pre>
</div>
</div>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>JavaScript (ES2015)</strong> / <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort"><code>sort</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-javascript">const someList = [4, 2, 1, 3]
// 1
// 2
// 3
// 4
someList.sort().forEach(element => {
console.log(element)
})
</code></pre>
</div>
</div>
</div>
<div class="Q42 cf ph2-ns mb4-ns mb3">
<h3 class="tc normal f3-ns f4 mb2">List/Array: <strong>Sort Custom</strong></h3>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>Python 3</strong> / <a href="https://docs.python.org/3/library/functions.html#sorted"><code>sorted</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-python">some_list = [["c", 2], ["b", 3], ["a", 1]]
# a 1
# c 2
# b 3
for item in sorted(some_list, key=lambda x: x[1]):
print(f"{item[0]} {item[1]}")
</code></pre>
</div>
</div>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>JavaScript (ES2015)</strong> / <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort"><code>sort</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-javascript">const someList = [['c', 2], ['b', 3], ['a', 1]]
// a 1
// c 2
// b 3
someList
.sort((a, b) => {
return a[1] - b[1]
})
.forEach(element => {
console.log(`${element[0]} ${element[1]}`)
})
</code></pre>
</div>
</div>
</div>
<div class="Q43 cf ph2-ns mb4-ns mb3" id="dictionary">
<h3 class="tc normal f3-ns f4 mb2">Dictionary/Object: <strong>Iteration</strong></h3>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>Python 3</strong> / <a href="https://docs.python.org/3/library/stdtypes.html#dict.items"><code>items</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-python">some_dict = {"one": 1, "two": 2, "three": 3}
# one 1
# two 2
# three 3
# NOTE: If you're not using this in a for loop,
# convert it into a list: list(some_dict.items())
for key, value in some_dict.items():
print(f"{key} {value}")
</code></pre>
</div>
</div>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>JavaScript (ES2015)</strong> / <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries"><code>entries</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-javascript">const someDict = { one: 1, two: 2, three: 3 }
// one 1
// two 2
// three 3
Object.entries(someDict).forEach(element => {
console.log(`${element[0]} ${element[1]}`)
})
</code></pre>
</div>
</div>
</div>
<div class="Q44 cf ph2-ns mb4-ns mb3">
<h3 class="tc normal f3-ns f4 mb2">Dictionary/Object: <strong>Contains</strong></h3>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>Python 3</strong> / <a href="https://docs.python.org/3/library/stdtypes.html#common-sequence-operations"><code>in</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-python">some_dict = {"one": 1, "two": 2, "three": 3}
# one is in the dict
if "one" in some_dict:
print("one is in the dict")
# four is not in the dict
if "four" not in some_dict:
print("four is not in the dict")
</code></pre>
</div>
</div>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>JavaScript (ES2015)</strong> / <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty"><code>hasOwnProperty</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-javascript">const someDict = { one: 1, two: 2, three: 3 }
// one is in the dict
if (someDict.hasOwnProperty('one')) {
console.log('one is in the dict')
}
// four is not in the dict
if (!someDict.hasOwnProperty('four')) {
console.log('four is not in the dict')
}
</code></pre>
</div>
</div>
</div>
<div class="Q45 cf ph2-ns mb4-ns mb3">
<h3 class="tc normal f3-ns f4 mb2">Dictionary/Object: <strong>Add with Modification</strong></h3>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>Python 3</strong></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-python">original_dict = {"one": 1, "two": 2}
original_dict["three"] = 3
# one 1
# two 2
# three 3
for key, value in original_dict.items():
print(f"{key} {value}")
</code></pre>
</div>
</div>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>JavaScript (ES2015)</strong></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-javascript">const originalDict = { one: 1, two: 2 }
originalDict.three = 3
// one 1
// two 2
// three 3
Object.entries(originalDict).forEach(element => {
console.log(`${element[0]} ${element[1]}`)
})
</code></pre>
</div>
</div>
</div>
<div class="Q46 cf ph2-ns mb4-ns mb3">
<h3 class="tc normal f3-ns f4 mb2">Dictionary/Object: <strong>Add without Modification</strong></h3>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>Python 3</strong> / <a href="https://docs.python.org/3/whatsnew/3.5.html#pep-448-additional-unpacking-generalizations"><code>Unpacking</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-python">original_dict = {"one": 1, "two": 2}
new_dict = {**original_dict, "three": 3}
original_dict["one"] = 100
# one 1
# two 2
# three 3
for key, value in new_dict.items():
print(f"{key} {value}")
</code></pre>
</div>
</div>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>JavaScript (ES2015)</strong> / <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals"><code>Spread</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-javascript">const originalDict = { one: 1, two: 2 }
const newDict = { ...originalDict, three: 3 }
originalDict.one = 100
// one 1
// two 2
// three 3
Object.entries(newDict).forEach(element => {
console.log(`${element[0]} ${element[1]}`)
})
</code></pre>
</div>
</div>
</div>
<div class="Q47 cf ph2-ns mb4-ns mb3">
<h3 class="tc normal f3-ns f4 mb2">Dictionary/Object: <strong>Keys</strong></h3>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>Python 3</strong> / <a href="https://docs.python.org/3/library/stdtypes.html#dict.keys"><code>keys</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-python">some_dict = {"one": 1, "two": 2, "three": 3}
# one
# two
# three
# NOTE: If you're not using this in a for loop,
# convert it into a list: list(some_dict.keys())
for x in some_dict.keys():
print(x)
</code></pre>
</div>
</div>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>JavaScript (ES2015)</strong> / <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys"><code>keys</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-javascript">const someDict = { one: 1, two: 2, three: 3 }
// one
// two
// three
Object.keys(someDict).forEach(element => {
console.log(element)
})
</code></pre>
</div>
</div>
</div>
<div class="Q48 cf ph2-ns mb4-ns mb3">
<h3 class="tc normal f3-ns f4 mb2">Dictionary/Object: <strong>Values</strong></h3>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>Python 3</strong> / <a href="https://docs.python.org/3/library/stdtypes.html#dict.values"><code>values</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-python">some_dict = {"one": 1, "two": 2, "three": 3}
# 1
# 2
# 3
# NOTE: If you're not using this in a for loop,
# convert it into a list: list(some_dict.values())
for x in some_dict.values():
print(x)
</code></pre>
</div>
</div>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>JavaScript (ES2015)</strong> / <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values"><code>values</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-javascript">const someDict = { one: 1, two: 2, three: 3 }
// 1
// 2
// 3
Object.values(someDict).forEach(element => {
console.log(element)
})
</code></pre>
</div>
</div>
</div>
<div class="Q49 cf ph2-ns mb4-ns mb3">
<h3 class="tc normal f3-ns f4 mb2">Dictionary/Object: <strong>Remove</strong></h3>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>Python 3</strong> / <a href="https://docs.python.org/3/library/stdtypes.html#dict"><code>del</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-python">some_dict = {"one": 1, "two": 2, "three": 3}
del some_dict["two"]
# one 1
# three 3
for key, value in some_dict.items():
print(f"{key} {value}")
</code></pre>
</div>
</div>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>JavaScript (ES2015)</strong> / <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete"><code>delete</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-javascript">const someDict = { one: 1, two: 2, three: 3 }
delete someDict.two
Object.entries(someDict).forEach(element => {
console.log(`${element[0]} ${element[1]}`)
})
</code></pre>
</div>
</div>
</div>
<div class="Q50 cf ph2-ns mb4-ns mb3">
<h3 class="tc normal f3-ns f4 mb2">Dictionary/Object: <strong>Get</strong></h3>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>Python 3</strong> / <a href="https://docs.python.org/3/library/stdtypes.html#dict"><code>get</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-python">some_dict = {"one": 1, "two": 2, "three": 3}
# some_dict["four"] will be KeyError
# Doesn't exist
print(some_dict.get("five", "Doesn't exist"))
</code></pre>
</div>
</div>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>JavaScript (ES2015)</strong> / <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR"><code>||</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-javascript">const someDict = { one: 1, two: 2, three: 3 }
// Doesn't exist
console.log(someDict.five || "Doesn't exist")
</code></pre>
</div>
</div>
</div>
<div class="Q51 cf ph2-ns mb4-ns mb3">
<h3 class="tc normal f3-ns f4 mb2">Dictionary/Object: <strong>Map</strong></h3>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>Python 3</strong> / <a href="https://docs.python.org/3/tutorial/datastructures.html#dictionaries"><code>Dictionary Comprehensions</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-python">original_list = {"one": 1, "two": 2}
# {"one": 1, "two": 4}
new_list = {key: value * value for key, value in original_list.items()}
# one 1
# two 4
for key, value in new_list.items():
print(f"{key} {value}")
</code></pre>
</div>
</div>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>JavaScript (ES2015)</strong> / <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries"><code>entries</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-javascript">const originalDict = { one: 1, two: 2 }
const newDict = {}
Object.entries(originalDict).forEach(element => {
// newDict.element[0] doesn't work - for variable key use []
newDict[element[0]] = element[1] * element[1]
})
// one 1
// two 4
Object.entries(newDict).forEach(element => {
console.log(`${element[0]} ${element[1]}`)
})
</code></pre>
</div>
</div>
</div>
<div class="Q52 cf ph2-ns mb4-ns mb3">
<h3 class="tc normal f3-ns f4 mb2">Dictionary/Object: <strong>Copy</strong></h3>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>Python 3</strong> / <a href="https://docs.python.org/3/library/stdtypes.html#mutable-sequence-types"><code>copy</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-python">original_dict = {"one": 1, "two": 2, "three": 3}
new_dict = original_dict.copy()
original_dict["one"] = 100
# one 1
# two 2
# three 3
for key, value in new_dict.items():
print(f"{key} {value}")
</code></pre>
</div>
</div>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>JavaScript (ES2015)</strong> / <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals"><code>Spread</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-javascript">const originalDict = { one: 1, two: 2, three: 3 }
const newDict = { ...originalDict }
originalDict.one = 100
// one 1
// two 2
// three 3
Object.entries(newDict).forEach(element => {
console.log(`${element[0]} ${element[1]}`)
})
</code></pre>
</div>
</div>
</div>
<div class="Q53 cf ph2-ns mb4-ns mb3">
<h3 class="tc normal f3-ns f4 mb2">Dictionary/Object: <strong>Dictionary/Object to JSON string</strong></h3>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>Python 3</strong> / <a href="https://docs.python.org/3/library/json.html#json.dumps"><code>json.dumps</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-python">import json
some_dict = {"one": 1, "two": 2, "three": 3}
# {
# "one": 1,
# "two": 2,
# "three": 3
# }
print(json.dumps(some_dict, indent=2))
</code></pre>
</div>
</div>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>JavaScript (ES2015)</strong> / <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify"><code>JSON.stringify</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-javascript">const someDict = { one: 1, two: 2, three: 3 }
// {
// "one": 1,
// "two": 2,
// "three": 3
// }
console.log(JSON.stringify(someDict, null, 2))
</code></pre>
</div>
</div>
</div>
<div class="Q54 cf ph2-ns mb4-ns mb3">
<h3 class="tc normal f3-ns f4 mb2">Dictionary/Object: <strong>JSON string to Dictionary/Object</strong></h3>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>Python 3</strong> / <a href="https://docs.python.org/3/library/json.html#json.loads"><code>json.loads</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-python">import json
some_json = """{
"one": 1,
"two": 2,
"three": 3
}"""
dict_from_json = json.loads(some_json)
# 2
print(dict_from_json["two"])
</code></pre>
</div>
</div>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>JavaScript (ES2015)</strong> / <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse"><code>JSON.parse</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-javascript">const someJson = `{
"one": 1,
"two": 2,
"three": 3
}`
const dictFromJson = JSON.parse(someJson)
// 2
console.log(dictFromJson.two)
</code></pre>
</div>
</div>
</div>
<div class="Q55 cf ph2-ns mb4-ns mb3">
<h3 class="tc normal f3-ns f4 mb2">Dictionary/Object: <strong>Variable Key</strong></h3>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>Python 3</strong></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-python">some_variable = 2
some_dict = {(some_variable + 1): "three"}
# three
print(some_dict[3])
</code></pre>
</div>
</div>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>JavaScript (ES2015)</strong> / <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names"><code>Computed Property Names</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-javascript">const someVariable = 2
const someDict = { [someVariable + 1]: 'three' }
// three
console.log(someDict[3])
</code></pre>
</div>
</div>
</div>
<div class="Q56 cf ph2-ns mb4-ns mb3" id="function">
<h3 class="tc normal f3-ns f4 mb2">Function: <strong>Definitions</strong></h3>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>Python 3</strong></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-python">def add(x, y):
print(f"Adding {x} and {y}")
return x + y
# Adding 1 and 2
# 3
print(add(1, 2))
</code></pre>
</div>
</div>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>JavaScript (ES2015)</strong></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-javascript">const add = (x, y) => {
console.log(`Adding ${x} and ${y}`)
return x + y
}
// Adding 1 and 2
// 3
console.log(add(1, 2))
</code></pre>
</div>
</div>
</div>
<div class="Q57 cf ph2-ns mb4-ns mb3">
<h3 class="tc normal f3-ns f4 mb2">Function: <strong>Keyword Arguments</strong></h3>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>Python 3</strong></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-python">def add(a, b, c):
return a + b + c
# 6
print(add(b=1, a=2, c=3))
</code></pre>
</div>
</div>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>JavaScript (ES2015)</strong></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-javascript">const add = ({ a, b, c }) => {
return a + b + c
}
// 6
console.log(
add({
b: 1,
a: 2,
c: 3
})
)
</code></pre>
</div>
</div>
</div>
<div class="Q58 cf ph2-ns mb4-ns mb3">
<h3 class="tc normal f3-ns f4 mb2">Function: <strong>Default Arguments</strong></h3>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>Python 3</strong></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-python">def greet(name, word="Hello"):
print(f"{word} {name}")
# Hello World
greet("World")
# Goodbye World
greet("World", "Goodbye")
</code></pre>
</div>
</div>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>JavaScript (ES2015)</strong> / <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters"><code>Default Parameters</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-javascript">const greet = (name, word = 'Hello') => {
console.log(`${word} ${name}`)
}
// Hello World
greet('World')
// Goodbye World
greet('World', 'Goodbye')
</code></pre>
</div>
</div>
</div>
<div class="Q59 cf ph2-ns mb4-ns mb3">
<h3 class="tc normal f3-ns f4 mb2">Function: <strong>Default Keyword Arguments</strong></h3>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>Python 3</strong></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-python">def greet(name="World", word="Hello"):
print(f"{word} {name}")
# Goodbye World
greet(word="Goodbye")
# Hello Programming
greet(name="Programming")
</code></pre>
</div>
</div>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>JavaScript (ES2015)</strong> / <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Setting_a_function_parameter's_default_value"><code>Default Value</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-javascript">const greet = ({ name = 'World', word = 'Hello' }) => {
console.log(`${word} ${name}`)
}
// Goodbye World
greet({ word: 'Goodbye' })
// Hello Programming
greet({ name: 'Programming' })
</code></pre>
</div>
</div>
</div>
<div class="Q60 cf ph2-ns mb4-ns mb3">
<h3 class="tc normal f3-ns f4 mb2">Function: <strong>Positional Arguments</strong></h3>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>Python 3</strong> / <a href="https://docs.python.org/3/tutorial/controlflow.html#arbitrary-argument-lists"><code>Arbitrary Argument Lists</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-python">def positional_args(a, b, *args):
print(a)
print(b)
for x in args:
print(x)
# 1
# 2
# 3
# 4
positional_args(1, 2, 3, 4)
</code></pre>
</div>
</div>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>JavaScript (ES2015)</strong> / <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters"><code>Rest Parameters</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-javascript">const positionalArgs = (a, b, ...args) => {
console.log(a)
console.log(b)
args.forEach(element => {
console.log(element)
})
}
// 1
// 2
// 3
// 4
positionalArgs(1, 2, 3, 4)
</code></pre>
</div>
</div>
</div>
<div class="Q61 cf ph2-ns mb4-ns mb3">
<h3 class="tc normal f3-ns f4 mb2">Function: <strong>Variable Keyword Arguments</strong></h3>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>Python 3</strong> / <a href="https://docs.python.org/3/tutorial/controlflow.html#keyword-arguments"><code>Keyword Arguments</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-python">def func_1(**kwargs):
for key, value in kwargs.items():
print(f"{key} {value}")
def func_2(x, *args, **kwargs):
print(x)
for arg in args:
print(arg)
for key, value in kwargs.items():
print(f"{key} {value}")
# one 1
# two 2
func_1(one=1, two=2)
# 1
# 2
# 3
# a 4
# b 5
func_2(1, 2, 3, a=4, b=5)
</code></pre>
</div>
</div>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>JavaScript (ES2015)</strong> / <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters"><code>Rest Parameters</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-javascript">const func1 = kwargs => {
Object.entries(kwargs).forEach(element => {
console.log(`${element[0]} ${element[1]}`)
})
}
// ...args must be the last argument
const func2 = (x, kwargs, ...args) => {
console.log(x)
args.forEach(element => {
console.log(element)
})
Object.entries(kwargs).forEach(element => {
console.log(`${element[0]} ${element[1]}`)
})
}
// one 1
// two 2
func1({ one: 1, two: 2 })
// 1
// 2
// 3
// a 4
// b 5
func2(1, { a: 4, b: 5 }, 2, 3)
</code></pre>
</div>
</div>
</div>
<div class="Q62 cf ph2-ns mb4-ns mb3" id="class">
<h3 class="tc normal f3-ns f4 mb2">Class: <strong>Basics</strong></h3>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>Python 3</strong> / <a href="https://docs.python.org/3/tutorial/classes.html"><code>Classes</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-python">class Duck:
def __init__(self, name):
self.name = name
def fly(self):
print(f"{self.name} can fly")
# not @classmethod: call a method on an instance
# duck = Duck(...)
# duck.create(...)
#
# @classmethod: call a method on a class
# Duck.create(...)
@classmethod
def create(cls, name, kind):
if kind == "mallard":
return MallardDuck(name)
elif kind == "rubber":
return RubberDuck(name)
else:
# cls = Duck
return cls(name)
class MallardDuck(Duck):
# @property:
# use duck.color instead of duck.color()
@property
def color(self):
return "green"
class RubberDuck(Duck):
def __init__(self, name, eye_color="black"):
super().__init__(name)
self.eye_color = eye_color
def fly(self):
super().fly()
print(f"Just kidding, {self.name} cannot fly")
@property
def color(self):
return "yellow"
regularDuck = Duck("reggie")
# reggie can fly
regularDuck.fly()
mallardDuck = Duck.create("mal", "mallard")
# mal
print(mallardDuck.name)
# green
print(mallardDuck.color)
rubberDuck = RubberDuck("vic", "blue")
# vic can fly
# Just kidding, vic cannot fly
rubberDuck.fly()
# yellow
print(rubberDuck.color)
# blue
print(rubberDuck.eye_color)
</code></pre>
</div>
</div>
<div class="fl w-100 w-50-l pa2 mb3">
<h4 class="f5 mt0 mb2 normal"><strong>JavaScript (ES2015)</strong> / <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes"><code>Classes</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions"><code>Method Definitions</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/static"><code>static</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get"><code>get</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super"><code>super</code></a></h4>
<div class="overflow-auto ba bw2 b--white br4">
<pre><code class="language-javascript">class Duck {
constructor(name) {
this.name = name
}
fly() {
console.log(`${this.name} can fly`)
}
// not static: call a method on an instance
// const duck = new Duck(...)
// duck.create(...)
//
// static: call a method on a class
// Duck.create(...)
static create(name, kind) {
if (kind === 'mallard') {
return new MallardDuck(name)
} else if (kind === 'rubber') {
return new RubberDuck(name)
} else {
// this = Duck
return new this(name)
}
}
}
class MallardDuck extends Duck {
// get:
// use duck.color instead of duck.color()
get color() {
return 'green'
}
}
class RubberDuck extends Duck {
constructor(name, eyeColor = 'black') {
super(name)
this.eyeColor = eyeColor
}
fly() {
super.fly()
console.log(`Just kidding, ${this.name} cannot fly`)
}
get color() {
return 'yellow'
}
}
const regularDuck = new Duck('reggie')
// reggie can fly
regularDuck.fly()
const mallardDuck = Duck.create('mal', 'mallard')
// mal
console.log(mallardDuck.name)
// green
console.log(mallardDuck.color)
rubberDuck = new RubberDuck('vic', 'blue')
// vic can fly
// Just kidding, vic cannot fly
rubberDuck.fly()
// yellow
console.log(rubberDuck.color)
// blue
console.log(rubberDuck.eyeColor)
</code></pre>
</div>
</div>
</div>
</div>
<script src="https://unpkg.com/prismjs@1.15.0/prism.js"></script>
<script src="https://unpkg.com/prismjs@1.15.0/components/prism-python.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="static/app.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-108029397-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-108029397-2');
</script>
<!-- Place this tag in your head or just before your close body tag. -->
<script async defer src="https://buttons.github.io/buttons.js"></script>
</body>
</html>
================================================
FILE: static/app.js
================================================
$(function() {
$('.js-bottom-right-button-link').click(function(e) {
$('html, body').animate({ scrollTop: 0 }, 'slow')
// デフォルトのhref="#"の挙動をなくす
// function()をfunction(e)にする必要がある
e.preventDefault()
})
// https:// か http:// ではじまるリンクは新しいタブで開く
$("a[href^='https://'], a[href^='http://']").attr('target', '_blank')
})
================================================
FILE: static/prism-base16-atelierplateau.light.css
================================================
/*
Name: Base16 Atelier Plateau Light
Author: Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/plateau)
Prism template by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/prism/)
Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16)
*/
code[class*="language-"],
pre[class*="language-"] {
font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
font-size: 14px;
line-height: 1.375;
direction: ltr;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-ms-hyphens: none;
hyphens: none;
background: #f4ecec;
color: #585050;
}
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
text-shadow: none;
background: #e7dfdf;
}
pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
text-shadow: none;
background: #e7dfdf;
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
}
/* Inline code */
:not(pre) > code[class*="language-"] {
padding: .1em;
border-radius: .3em;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #7e7777;
}
.token.punctuation {
color: #585050;
}
.token.namespace {
opacity: .7;
}
.token.operator,
.token.boolean,
.token.number {
color: #b45a3c;
}
.token.property {
color: #a06e3b;
}
.token.tag {
color: #7272ca;
}
.token.string {
color: #5485b6;
}
.token.selector {
color: #8464c4;
}
.token.attr-name {
color: #b45a3c;
}
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
color: #5485b6;
}
.token.attr-value,
.token.keyword,
.token.control,
.token.directive,
.token.unit {
color: #4b8b8b;
}
.token.statement,
.token.regex,
.token.atrule {
color: #5485b6;
}
.token.placeholder,
.token.variable {
color: #7272ca;
}
.token.deleted {
text-decoration: line-through;
}
.token.inserted {
border-bottom: 1px dotted #1b1818;
text-decoration: none;
}
.token.italic {
font-style: italic;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.important {
color: #ca4949;
}
.token.entity {
cursor: help;
}
pre > code.highlight {
outline: 0.4em solid #ca4949;
outline-offset: .4em;
}
.line-numbers .line-numbers-rows {
border-right-color: #e7dfdf !important;
}
.line-numbers-rows > span:before {
color: #8a8585 !important;
}
.line-highlight {
background: rgba(27, 24, 24, 0.2) !important;
background: -webkit-linear-gradient(left, rgba(27, 24, 24, 0.2) 70%, rgba(27, 24, 24, 0)) !important;
background: linear-gradient(to right, rgba(27, 24, 24, 0.2) 70%, rgba(27, 24, 24, 0)) !important;
}
gitextract_4h1cm22n/
├── LICENSE
├── README.md
├── index.html
└── static/
├── app.js
└── prism-base16-atelierplateau.light.css
Condensed preview — 5 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (93K chars).
[
{
"path": "LICENSE",
"chars": 1061,
"preview": "MIT License\n\nCopyright (c) 2018 Saya\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof th"
},
{
"path": "README.md",
"chars": 195,
"preview": "# [How to write X in both Python 3 and JavaScript (ES2015)](https://sayazamurai.github.io/python-vs-javascript/)\n\n[![](s"
},
{
"path": "index.html",
"chars": 83132,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, in"
},
{
"path": "static/app.js",
"chars": 339,
"preview": "$(function() {\n $('.js-bottom-right-button-link').click(function(e) {\n $('html, body').animate({ scrollTop: 0 }, 'sl"
},
{
"path": "static/prism-base16-atelierplateau.light.css",
"chars": 3092,
"preview": "/*\n\nName: Base16 Atelier Plateau Light\nAuthor: Bram de Haan (http://atelierbram.github.io/syntax-highlighting/"
}
]
About this extraction
This page contains the full source code of the sayazamurai/python-vs-javascript GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 5 files (85.8 KB), approximately 28.4k tokens. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.