Замыкания
В программировании есть общий термин: «замыкание», – которое должен знать каждый разработчик.
Замыкание – это функция, которая запоминает свои внешние переменные и может получить к ним доступ. В некоторых языках это невозможно, или функция должна быть написана специальным образом, чтобы получилось замыкание. Но, как было описано выше, в JavaScript, все функции изначально являются замыканиями (есть только одно исключение, про которое будет рассказано в Синтаксис "new Function").
То есть, они автоматически запоминают, где были созданы, с помощью скрытого свойства[[Environment]]и все они могут получить доступ к внешним переменным.
Когда на собеседовании фронтенд-разработчик получает вопрос: «что такое замыкание?», – правильным ответом будет определение замыкания и объяснения того факта, что все функции в JavaScript являются замыканиями, и, может быть, несколько слов о технических деталях: свойстве[[Environment]]и о том, как работает лексическое окружение.
Тогда почему мне на экран вывело все элементы масива а не один? (тоесть результат их сложения). Почему не вывело 55?
var out= " "; на var out= 0; и получите на выходе 55. 
out = out + mass[i]; равен out += mass[i]; 
let mass = [4,7,10,13];
for (let i=0; i<mass.length; i++) {
// mass[i] это элемент массива, одно число
mass[i].join(" ");
// 4.join(" ") ? что это значит
}
out.innerHTML= out.innerHTML + mass[i]; // здесь i вообще не существует
// вдобавок ты хочешь вывести целый массив, а не один его элементclass FeedPost extends Component {
constructor(props) {
super(props);
this.state = {
showComments: false
}
}
handler = () => {
this.setState({
showComments: !this.state.showComments
})
};
render = () => {
const {post} = this.props;
return <li>
<div>{post.title}</div>
<div
onClick={this.handler}
style={{
cursor: "pointer",
color: "blue",
textDecoration: "underline",
userSelect: "none"
}}
>
{this.state.showComments ? "Hide comments" : "Show comments"}
</div>
{this.state.showComments && (
<ul>
{post.comments.map((comment, i) => (
<li key={i}>{comment.text}</li>
))}
</ul>
)}
<Link to={`/post/${post.id}`}>Open</Link>
</li>
}
}
class Example extends Component { ... }super(props);
class Component {
constructor(props) {
this.props = props;
}
}import React, { Component } from 'react';
import { Collapse, Button, CardBody, Card } from 'reactstrap';
class Example extends Component {
state = {
collapse: false
};
toggle = () => {
this.setState(state => ({ collapse: !state.collapse }));
}
render() {
return (
<div>
<Button color="primary" onClick={this.toggle} style={{ marginBottom: '1rem' }}>Toggle</Button>
<Collapse isOpen={this.state.collapse}>
<Card>
<CardBody>
Anim pariatur cliche reprehenderit,
enim eiusmod high life accusamus terry richardson ad squid. Nihil
anim keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea proident.
</CardBody>
</Card>
</Collapse>
</div>
);
}
}
export default Example;В чем причина?
