Scope and Closure of JavaScript

1. 자바스크립트의

2. 스코프와

3. 클로져 NHN

4. NEXT

5. 김다혜

6. 목차 • 실행

7. 컨텍스트

8. (execution

9. context)

10. • 실행

11. 컨텍스트

12. 자세히

13. 알아보기

14. • 스코프

15. (scope)

16. • 클로져

17. (closure)

18. 실행

19. 컨텍스트

20. execution

21. context • 실행

22. 컨텍스트란,

23. 어떤

24. 함수가

25. 호출되면

26. 해당

27. 함수가

28. 이용할

29. 정보들이

30. 저장되어

31. 있는

32. 공간

33. • 함수를

34. 호출하면

35. 독자적인

36. 실행

37. 컨텍스트가

38. 생성되어,컨텍스트

39. 스택(CT)에

40. 쌓입니다.

41. 함수 의

42. 코드가

43. 모두

44. 실행하고

45. 나면,

46. 해당

47. 함수의

48. 실행

49. 컨텍스트는

50. CT에서

51. 빠져나오게

52. 됩니다.

54. • 자바스크립트를

55. 시작하면

56. 전역공간에서

57. 쓰이는

58. 전역

59. 컨텍스트가

60. 가장

61. 먼저

62. 컨텍스트

63. 스택 에

64. 쌓이게

65. 됩니다.

66. 이

67. 전역

68. 컨텍스트는

69. 애플리케이션이

70. 종료될

71. 때,

72. 즉

73. 웹페이지를

74. 나가거 나

75. 브라우저를

76. 종료했을

77. 때에

78. 사라집니다.

79. 실행

80. 컨텍스트

81. execution

82. context • 예제를

83. 통해

84. 알아봅시다!

85. var x = 1; ! function foo () { var x = 2; function inner() { return x; } return inner; } ! var result = foo(); ! console.log(result()); 전역

86. 실행

87. 컨텍스트 컨텍스트

88. 스택 코드가

89. 실행되기

90. 전,

91. 전역

92. 실행

93. 컨텍스트가

94. 초기화

95. 되고

96. 컨텍스트

97. 스택에

98. 올라옵니다.

100. 실행

102. 스택 전역

103. 실행

104. 컨텍스트의

105. 초기화가

106. 완료 되면,

107. 자바스크립트

108. 코드가

109. 실행됩니다.

110. foo

111. 함수의

112. 실행

113. 컨텍스트 전역

114. 실행

116. 스택 var x = 1; ! function foo () { var x = 2; function inner() { return x; } return inner; } ! var result = foo(); ! console.log(result()); foo함수가

117. 실행될

118. 때

119. foo

120. 함수의

121. 실행 컨텍스트가

122. CT에

123. 올라옵니다.

124. 전역

126. 스택 var x = 1; ! function foo () { var x = 2; function inner() { return x; } return inner; } ! var result = foo(); ! console.log(result()); foo함수의

127. 내용이

128. 모두

129. 실행되고

130. 나면,

131. foo함수의

132. 실행

133. 컨텍스트는

134. 파괴되어

135. CT에서

136. 빠져나오게

137. 됩니다.

139. 실행

140. 컨텍스트

141. 자세히

142. 알아보기 • 실행

144. 변수객체(Variable

145. Object,

146. VO),

147. 스코프

148. 체인(scope

149. chain),

150. this

151. 에

152. 대한

153. 정보를

154. 갖고

155. 있습니다.

157. • 변수객체는

158. 현재

159. 함수가

160. 사용하는

161. 로컬

162. 변수들이

163. 저장되는

164. 객체입니다.

165. • 스코프체인이란

166. 실행

167. 컨텍스트가

168. 접근할

169. 수

170. 있는

171. 모든

172. 변수와

173. 함수

174. 집합입니다.

176. • this는

177. 이

178. 함수를

179. 호출한

180. 객체를

181. 가리킵니다.

183. 전역

184. Varible

185. Object foo 함수

186. 위치 x undefined result undefined 코드가

187. 실행되기

188. 직전에,

189. 전역

190. 실행

191. 컨텍스트를

192. 초기화

193. 합니다.

195. VO에는

196. 코드를

197. 쭉

198. 보고

199. 선언된

200. 함수와

201. 변수를

202. 저장 할

203. 공간을

204. 마련한

205. 뒤,

206. 함수는

207. 그

208. 함수

209. 위치를,

210. 변수는

211. undefined를

212. 저장해둡니다.

214. this에는

215. window가

216. 저장됩니다. var x = 1; ! function foo () { var x = 2; function inner() { return x; } return inner; } ! var result = foo(); ! console.log(result()); 전역

217. 실행

218. 컨텍스트 VO scope

219. chain this window 컨텍스트

220. 스택

221. 전역

222. Varible

224. 위치 x undefined result undefined실행

226. 스코프

227. 체인은

228. 변수객체가

229. 차례

230. 차례

231. 담긴

232. 배열을

233. 가리키게

234. 되는데,

235. 전역

236. 실행

238. Scope

239. chain는

240. 전역

241. 변수

242. 객체만

243. 담긴

244. 배열을

245. 가리킵니다. scope

246. chain

247. 배열 0 전역

248. 실행

250. chain this window 컨텍스트

251. 스택

253. Varible

255. 위치 x 1 result undefined 전역

256. 실행

258. 초기화가

259. 모두

260. 끝나면,

261. 코드를

262. 실행합니다.

264. 첫번째

265. 줄을

266. 실행하여

267. x값에

268. 1이

269. 저장됩니다. 전역

270. 실행

271. 컨텍스트 VO …⋯ scope

272. chain …⋯ this window 컨텍스트

273. 스택

274. var x = 1; ! function foo () { var x = 2; function inner() { return x; } return inner; } ! var result = foo(); ! console.log(result()); foo

275. 객체(Function

276. 타입) prototype …⋯ …⋯ [[scope]] foo함수가

277. 선언되면,

278. foo라는

279. 이름으로

280. Function

281. 타입

282. 객체가

283. 만들어집니다.

284. Prototype과

285. 관련된

286. 것들도

287. 이

288. 객체에

289. 저장되게

290. 되지요.

291. 이

292. Function 객체엔

293. [[scope]]라는

294. 프로퍼티도

295. 있는데

296. 여기에

297. 저장되는

298. 것은,

299. 부모

300. 함수에

301. 대한

302. 스코프

303. 체인

304. 배열입 니다. scope

305. chain

306. 배열 0 전역

307. Varible

309. 위치 x 1 result undefined

310. var x = 1; ! function foo () { var x = 2; function inner() { return x; } return inner; } ! var result = foo(); ! console.log(result()); foo함수가

311. 호출되면,

312. 함수가

313. 실행되기

314. 직전,

315. foo

316. 함수의

317. 실행

319. 컨텍스트

320. 스택에

321. 올라가고,

322. 실행

324. 초기화됩니다.

325. var x = 1; ! function foo () { var x = 2; function inner() { return x; } return inner; } ! var result = foo(); ! console.log(result()); foo에

326. 선언된

327. 변수와

328. 함수를

329. 살펴봅니다.

330. foo의

331. VO 는

332. 개념적으로

333. 다음과

334. 같이

335. 초기화되겠네요.

336. {

337. x:

338. undefined,

339. inner:

340. 함수의

341. 위치}

342. foo

343. 함수의

344. 실행

346. chain 전역

347. 실행

349. 스택 foo

351. 타입) prototype …⋯ …⋯ [[scope]] scope

352. chain

353. 배열 0 글로벌

354. VO {

355. x:

356. undefined,

357. inner:

358. 함수의

359. 위치}

360. foo

363. chain

364. 배열 0 글로벌

365. VO foo

366. 함수의

367. 실행

369. chain 전역

370. 실행

372. 스택 {

373. x:

374. undefined,

375. inner:

376. 함수의

377. 위치} foo

378. 실행

380. 스코프

381. 체인을

382. 초기화할

383. 때는

384. foo 객체의

385. [[scope]]를

386. 그대로

387. 복사하고,

388. scope

389. chain

390. 맨

391. 앞에

392. 자신의

393. VO를

394. 삽입합니다. scope

395. chain

396. 배열 0 자신의

397. VO 1 글로벌

398. vO

399. 실행

401. 초기화되면,

402. 함수가

403. 실행됩니다. foo

404. 함수의

405. 실행

407. chain 전역

408. 실행

410. 스택 {

411. x:

412. undefined,

413. inner:

414. 함수의

415. 위치} scope

416. chain

417. 배열 0 자신의

418. VO 1 글로벌

419. vO

420. 스코프 • 이전의

421. 예제에

422. 이어서

423. 설명드리겠습니다.

424. var x = 1; ! function foo () { var x = 2; function inner() { return x; } return inner; } ! var result = foo(); ! console.log(result()); foo함수가

425. 실행되었을

426. 때,

427. foo함수가

428. 접근할

429. 수

430. 있는

431. 변수와

432. 함수의

433. 범위와

434. 검색순서는

435. 스코프

436. 체인 을

437. 통해

438. 정의

439. 됩니다.

440. foo

441. 함수의

442. 실행

444. chain 전역

445. 실행

447. 스택 scope

448. chain

449. 배열 0 자신의

450. VO 1 글로벌

451. vO {

452. x:

453. 2,

454. inner:

455. 위치} {foo:

456. 위치,

457. x:

458. 1,

459. result:

460. undefined} foo에서

461. x를

462. 찾을

463. 때엔,

464. 스코프

465. 체인의

466. 배열을

467. 순회하면서

468. 찾습니 다.

469. 가장

470. 먼저

471. 자신의

472. VO를

473. 살펴보겠지요?

474. 그런데

475. 자신의

476. VO에서

477. x를

478. 발견합니다.

479. 그래서

480. 이

481. x에

482. 값을

483. 할당하게

484. 됩니다.

485. 따라서,

486. 함수

487. 안에서

488. 밖에서

489. 썼던

490. 이름의

491. 변수를

492. 선언하더라도

493. 밖 의

494. 변수엔

495. 영향을

496. 주지

497. 않게

498. 됩니다.

499. 또한,

500. 함수

501. 안에서

502. 그

503. 밖의

504. 변수들엔

505. 접근

506. 가능하지만,

507. 함수

508. 밖에서

509. 함수

510. 안의

511. 지역변수에

512. 접근할

513. 수

514. 없게되는

515. 것입니다.

516. foo

517. 함수의

518. 실행

520. chain 전역

521. 실행

523. 스택

524. 클로져 • 클로져란

525. 다른

526. 함수의

527. 스코프에

528. 있는

529. 변수에

530. 접근

531. 가능한

532. 함수입니다.

533. • 특히,

534. inner

535. function이

536. 언제나

537. 자신의

538. outer

539. function에

540. 접근할

541. 수

542. 있는

543. 성질을

544. 이용 합니다.

545. (outer

546. function이

547. 실행이

548. 완료된

549. 이후에도

550. 말이죠!)

551. var x = 1; ! function foo () { var x = 2; function inner() { return x; } return inner; } ! var result = foo(); ! console.log(result()); inner

554. chain

555. 배열 0 foo

556. VO 1 글로벌

557. vO foo

558. 함수의

559. 실행

560. 컨텍스트 VO …⋯ scope

561. chain 전역

562. 실행

564. 스택 inner()함수가

565. 선언될

566. 때,

567. inner객체가

568. 생기 고,

569. 그

570. 객체의

571. [[scope]]는

572. 현재

573. 실행

574. 컨텍스트 의

575. 스코프체인을

576. 가리키게

577. 됩니다.

578. foo함수가

579. 반환된

580. 후

581. 컨텍스트

582. 스택에서

583. foo의

584. 실행

586. 사라집니다.

591. chain

592. 배열 0 foo

593. VO 1 글로벌

594. vO 전역

595. 실행

597. 스택 foo에서

598. 반환된

599. inner함수가

601. result

602. 변수에

603. 저장되게

604. 됩니다.

609. chain

610. 배열 0 foo

611. VO 1 글로벌

612. vO inner함수가

613. 실행되기

614. 전,

615. 실행

617. 초기화

618. 됩니다.

619. vO에는

620. inner함수

621. 내에

622. 선언된

623. 지역변수가

624. 없으므로

625. 빈

626. 객체가

627. 저장되겠군요.

628. scope

629. chain은

631. inner

633. 객체의

634. [[scope]]가

635. 가리키고

636. 있는

637. 객체를

638. 복사한

639. 뒤,

640. 맨

641. 앞에

642. 자신의

643. VO를

644. 추가합니다. inner

645. 함수의

646. 실행

648. chain 전역

649. 실행

651. 스택 scope

652. chain

653. 배열 0 자신의

654. VO 1 foo

655. VO 2 글로벌

656. vO

660. chain

661. 배열 0 foo

662. VO 1 글로벌

663. vO inner함수는

664. 자신의

665. VO에는

666. 없는

667. x변수를,

668. scope

669. chain을

670. 통해

671. foo의

672. VO에서

673. 찾은

674. 뒤

675. 2라는

676. 값을

677. 반환하게

678. 됩니다. inner

679. 함수의

680. 실행

682. chain 전역

683. 실행

685. 스택 scope

686. chain

687. 배열 0 자신의

688. VO 1 foo

689. VO 2 글로벌

690. vO

691. 참고 • 프론트엔드

692. 개발자를

693. 위한

694. 자바스크립트

695. 프로그래밍

696. (니콜라스

697. 자카스

698. 저,

699. 한선용

700. 역,

701. 인사이트

702. 출판)

703. • Identifier

704. Resolution

705. and

706. Closures

707. in

708. the

709. JavaScript

710. Scope

711. Chain

712. (http:// davidshariff.com/blog/javascript-scope-chain-and-closures/)

713. • Javascript의

714. 함수와

715. 스코프

716. 체인(Scope

717. Chain)

718. (http://blog.naver.com/jjoommnn/ 130149113595)

Scope and Closure of JavaScript

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Scope and Closure of JavaScript (20)

Scope and Closure of JavaScript