Basic Javascript for Impatient Programmers

개발자영어http://engfordev.com

만든 계기

• https://www.facebook.com/groups/codingeverybody/permalink/689851274388745/

• @cha Seoh 님이 이런 글을 공유해주셨는데 , 영어 공부에 활용하는 자료를 만들면 어떨까 해서 만들다가 졸려서 다 못만들었구요 , 일단 자려구요 .

• 영어 문장과 단어 뜻을 보고 , 의미를 잠깐 생각해 봅니다 .

• 다음 장으로 넘어가서 , 내가 생각한 의미와 비교해 봅니다 .

공부하는 방법

• 슬라이드가 약 270 장입니다 .

• 어떤 분은 10 분동안 집중해서 읽으셨는데 70 슬라이드 보셨다고 했어요 .

• 한번에 다 보겠다 욕심내지 마시고 , 건강 안구생활을 위하여 한 10 분 보시고 , 드라마 한편 보시고 , 또 10

분 보시고…

주의하세요 .

• 좀 보시고 나서 , – 공부하기에 도움이 되는 것 같다 .. – 또는 이러면 더 도움이 될 것 같다 .. – 이렇게 공부했더니 도움이 되더라 , 등등 생각드는게 있으시면 ,

• 개영페북에 코멘트 부탁해용https://www.facebook.com/groups/engfordev/permalink/661981877186974/

부탁합니다

patient : 인내심 많은

impatient: 인내심 없는

Basic JavaScript for the impatient programmer

patient : 인내심 많은

impatient: 인내심 없는

Basic JavaScript for the impatient programmer

인내심 없는

프로그래머를 위한

자바스크립트 기초

concise : 간결한

write up : 문서

I am aware of (A) : 나는 (A) 에 대해 인지하고 있다 .

“Basic JavaScript” is the most complete and concise write up that I am aware of.

concise : 간결한

write up : 문서

I am aware of (A) : 나는 (A) 에 대해 인지하고 있다 .

“Basic JavaScript” is the most complete and concise write up that I am aware of.

" 기초 자바스크립트 ".. 는

내가 알고 있는 것중

가장 완전하고 간결한 글이다 .

to enable (A) to (B) : (A)

가 (B) 하게 해주다 .

as quickly as possible:

최대한 빨리

get started with : ~ 을 하기 시작하다 .

This blog post enables you to get started with JavaScript as quickly as possible.

to enable (A) to (B) : (A)

가 (B) 하게 해주다 .

as quickly as possible:

최대한 빨리

get started with : ~ 을 하기 시작하다 .

This blog post enables you to get started with JavaScript as quickly as possible.

이 블로그 포스트는

여러분이 자바스크립트를

최대한 빨리

시작할 수 있도록 해준다 .

already : 이미

– if you already know how to pro-gram.

already : 이미

– if you already know how to pro-gram.

- 이미 프로그램을 짤 줄 안다면

to describe : 기술하다

the smallest : 가장 작은

subset : 부분집합

This post describes the smallest subset of the language

to describe : 기술하다

the smallest : 가장 작은

subset : 부분집합

This post describes the smallest subset of the language

이 블로그 포스트는

자바스크립트언어의

가장 작은 부분집합을

기술합니다 .

It allows you to be pro-

ductive. 그것은 여러분이 생산성이 높도록 해줍니다 .

This post describes the smallest subset of the language that allows you to be productive.

It allows you to be pro-

ductive. 그것은 여러분이 생산성이 높도록 해줍니다 .

This post describes the smallest subset of the language that allows you to be productive.

이 블로그포스트는

이 언어중에서도

여러분의 생산성을 높여주는

가장 작은 부분집합을 기술합니다 .

I call you baby.

나는 당신을 baby 라고 부른다 .

I call that subset “Basic JavaScript”

I call you baby.

나는 당신을 baby 라고 부른다 .

I call that subset “Basic JavaScript”

저는 그 부분집합을

“ 자바스크립트 기초 " 라고

부르는 거구요 .

for a while: 당분간

And I recommend to program in it for a while.

for a while: 당분간

And I recommend to program in it for a while.

그리고 저는 당분간은

그것 (Basic JavaScript) 내에서

프로그래밍하기를 권합니다 .

to move on : 넘어가다 .

나아가다 .

, before moving on to more details and advanced top-ics.

to move on : 넘어가다 .

나아가다 .

, before moving on to more details and advanced top-ics.

좀 더 자세하고 , 어려운 내용으로 넘어가기 전에는 말이죠 .

I call that subset “Basic JavaScript” and recommend to program in it for a while, before moving on to more details and advanced topics.

I call that subset “Basic JavaScript” and recommend to program in it for a while, before moving on to more details and advanced topics.

저는 그 부분집합을 " 자바스크립트 기초 " 라고 부르며 ,

당분간은 이것 내에서 프로그래밍하기를 권합니다 .

좀 더 자세하고 어려운 내용으로 나아가기 전에는 말이죠 .

at once: 한 번에

too confusing : 너무 혼란스러운

Learning everything at once is too confusing.

at once: 한 번에

too confusing : 너무 혼란스러운

Learning everything at once is too confusing.

한번에 모든 것을 배우는 것은

너무 혼란스럽잖아요 .

to conclude with : ~

으로 끝맺다 .

The post concludes with tips.

to conclude with : ~

으로 끝맺다 .

The post concludes with tips.

이 포스트는 팁으로 끝맺습니다 .

The post concludes with tips for what to learn next.

The post concludes with tips for what to learn next.

이 포스트는

다음에 무엇을 배울지에 대한

팁으로 끝맺습니다 .

below: 아래에서

to describe : 기술하다 rule-of-thumb :

대충이지만 실제에 근거한 방법

Warning: Below, I’m describing rules of thumbs and best practices.

below: 아래에서

to describe : 기술하다 rule-of-thumb :

대충이지만 실제에 근거한 방법

Warning: Below, I’m describing rules of thumbs and best practices.

주의 : 아래에서 ,

저는

대략적인 규칙과 모범 사례를

기술하고 있습니다 .

to favor (A) over (B):

(A) 를 선호하다 , (B) 보다

I favor clarity over precision.

to favor (A) over (B):

(A) 를 선호하다 , (B) 보다

I favor clarity over precision.

저는

정밀한 것보다는

명료한 것을 선호합니다 .

a matter of taste :

취향의 문제

The rules are safe, but a matter of taste.

a matter of taste :

취향의 문제

The rules are safe, but a matter of taste.

제가 제시하는 규칙들은 안전합니다만 ,

( 사용할지 여부는 ) 취향의 문제죠 .

convention : 관행

Conventions (which was) used in this blog post

convention : 관행

Conventions (which was) used in this blog post

이 포스트에서 사용된 관행들

Command line interaction

커맨드라인 인터렉션

whenever I do it : 내가 그것을 할 때 마다 con-

cept : 개념

Whenever I introduce a new con-cept,

whenever I do it : 내가 그것을 할 때 마다 con-

cept : 개념

Whenever I introduce a new con-cept,

제가 새로운 개념을

소개할 때 마다

I try to illustrate :

묘사하려고 노력합니다 .

I try to illustrate it via an interaction.

I try to illustrate :

묘사하려고 노력합니다 .

I try to illustrate it via an interaction.

저는 그것을

인터렉션을 통해서

보여주려고 노력합니다 .

Whenever I introduce a new con-cept, I try to illustrate it via an interaction in a JavaScript command line.

Whenever I introduce a new con-cept, I try to illustrate it via an interaction in a JavaScript command line. 제가 새로운 개념을 소개할 때 마다 ,

자바스크립트 커맨드 라인에서

인터렉션을 통해서 보여주려고 합니다 .

This looks as follows:> 3 + 4 7

This looks as follows:> 3 + 4 7

이것은 아래와 같이 보입니다 .

> 3 + 4

7

The text after the greater-than character is the input,

The text after the greater-than character is the input,

‘~ 보다 큰’ 문자 뒤에 나오는 텍스트는

input 이고요 ,

(which is) typed by a human

(which is) typed by a human

인간에 의해 타이핑 된

The text after the greater-than character is the input, typed by a human.

The text after the greater-than character is the input, typed by a human.

‘>’ 기호 뒤에 나오는 텍스트는 in-

put 이고 ,

인간에 의해 타이핑 된 것이구요 .

everything else : 그 외에 모든 것

Everything else is output.

everything else : 그 외에 모든 것

Everything else is output.

그외 모든 것은 output 입니다 .

Everything else is output by the JavaScript engine.

Everything else is output by the JavaScript engine.

그외 모든 것은

자바스크립트 엔진에 의해 만들어진

output 입니다 .

The method is used to print data.

The method is used to print data.

그 메서드가 사용됩니다 ,

데이터를 출력하기 위해 ..

sometimes : 가끔

The method console.log() is sometimes used to print data.

sometimes : 가끔

The method console.log() is sometimes used to print data.

데이터를 출력하기 위해

가끔

console.log() 메서드가 사용됩니다 .

The method console.log() is sometimes used to print data to the console

The method console.log() is sometimes used to print data to the console

console.log() 메서드가 가끔 사용됩니다

콘솔에 데이터를 출력시키는데 ..

It works.

그것은 작동합니다 .

(this method works in most JavaScript environments, including Node.js).

It works.

그것은 작동합니다 .

(this method works in most JavaScript environments, including Node.js).

( 이 메서드는 작동합니다 ,

대부분의 자바스크립트 환경에서 ,

Node.js 를 포함해서 말이죠 .)

find : 찾다

finding : 찾는 것

Finding documentation

문서를 찾는 것

in action : 작동을 하는

Sometimes, you see functions and methods in action,

in action : 작동을 하는

Sometimes, you see functions and methods in action,

때때로 ,

여러분은 함수와 메서드가

작동하는 것을 볼 것입니다 .

, which should make it clear how they work.

, which should make it clear how they work.

그것은

그들이 어떻게 작동하는지 명확할 것입니다 .

in action : 작동하는

make it clear : 명확히 하다 .

Sometimes, you see functions and methods in action, which should make it clear how they work.

in action : 작동하는

make it clear : 명확히 하다 .

Sometimes, you see functions and methods in action, which should make it clear how they work.

때때로 , 여러분은 함수와 메서드가 작동하는 것을 볼 텐데요 ,

그들이 어떻게 작동하는지는 명확할 겁니다 .

look up : 정보 등을 검색해서 찾아보다 .

There are links to pages, where you can look up the details.

look up : 정보 등을 검색해서 찾아보다 .

There are links to pages, where you can look up the details.

페이지로 가는 링크가 있습니다 ,

그곳에서 여러분은 세부사항을 찾아볼 수 있고요 .

If not, there are links to pages of the Mozilla Developer Network, where you can look up the details.

If not, there are links to pages of the Mozilla Developer Network, where you can look up the details.

그렇지 않다면 ( 명확하지 않다면 ),

모질라 개발자 네트워크 페이지로 가는 링크가 있습니다 ,

그곳에서 여러분은 상세한 내용을 찾을 수 있어요 .

Additionally, you can use Google to find documentation on MDN.

Additionally, you can use Google to find documentation on MDN.

그리고 ,

여러분은 구글을 사용할 수 있습니다 ,

MDN 상의 문서를 검색하기 위해서 말이죠 .

following : 아래 나오는

For example, the following Google search finds the documentation for the push() method of arrays: mdn array push

following : 아래 나오는

For example, the following Google search finds the documentation for the push() method of arrays: mdn array push

예를 들어 ,

아래의 구글검색어는

문서를 검색합니다 ,

배열의 push() 메서드가 나온 문서를요 .

mdn array push

nature : 속성 , 본질

The nature of the language

이 언어의 속성

background on:

~ 에 대한 배경지식

This section gives a little background on the nature of JavaScript,

이 섹션은

약간의 배경지식을 제공합니다 .

자바스크립트의 속성에 대한 배경지식을요 ,

, to help you understand why it is the way it is.

, to help you understand why it is the way it is.

그것이 왜 그렇게 생겨먹었는지

여러분이 이해하는 것을 돕기 위해 ..

This section gives a little back-ground on the nature of JavaScript, to help you understand why it is the way it is.

This section gives a little back-ground on the nature of JavaScript, to help you understand why it is the way it is.

이 섹션에서는 ,

자바스크립트가 왜 그렇게 생겨먹었는지 여러분이 이해하는 것을 돕기 위해 ,

자바스크립트의 속성에 대한 약간의 배경지식을 제공합니다 .

JavaScript versus ECMAScript

자바스크립트 Vs. ECMA 스크립트

(A) is called (B).

(B)(A) 는 (B) 라고 불린다 .

The programming language is called JavaScript, the language standard is called EC-MAScript.

(A) is called (B).

(B)(A) 는 (B) 라고 불린다 .

The programming language is called JavaScript, the language standard is called EC-MAScript.

프로그래밍 언어는 자바스크립트라고 불리고 ,

언어 표준은 ECMA 스크립트라고 불립니다 .

They have different names, because there is a trademark on “Java” (held by Oracle).

They have different names, because there is a trademark on “Java” (held by Oracle).

그들은 서로 다른 이름을 갖고 있습니다 ,

왜냐하면 “ Java” 가 등록된 상표이기 때문이죠 .

( 오라클이 들고 있는 ).

Only Mozilla is allowed to use the name “JavaScript”.

Only Mozilla is allowed to use the name “JavaScript”.

모질라만 “자바스크립트”라는

이름을 사용해도 됩니다 .

at the moment : 현재는

officially : 공식적으로

received : 받았다

long ago : 오래 전에

At the moment, only Mozilla is allowed to officially use the name “JavaScript”, because they received a license long ago.

at the moment : 현재는

officially : 공식적으로

received : 받았다

long ago : 오래 전에

At the moment, only Mozilla is allowed to officially use the name “JavaScript”, because they received a license long ago. 현재는 ,

모질라만이 “자바스크립트”라는 이름을 공식적으로 사용할 수 있습니다 ,

왜냐하면 오래전에 라이센스를 받았기 때문이죠 .

therefore : 따라서

had to have (A) :

(A) 를 가져야 했다 .

Therefore, an open language standard had to have a different name.

therefore : 따라서

had to have (A) :

(A) 를 가져야 했다 .

Therefore, an open language standard had to have a different name.

따라서 ,

공개된 언어 표준은

다른 이름을 가져야 했습니다 .

current version:

현재 버전

currently : 현재

The current version of JavaScript is ECMAScript 5, ECMAScript 6 is currently being de-veloped.

current version:

현재 버전

currently : 현재

The current version of JavaScript is ECMAScript 5, ECMAScript 6 is currently being de-veloped.

자바스크립트의 현재버전은 ECMA

스크립트 5 이며 ,

ECMA 스크립트 6 은 현재 개발되는 중입니다 .

Influences

( 자바스크립트가 받은 ) 영향들

had no choice but to

create (A):

(A) 를 만드는 것 말고는 선택의 여지가 없었다

JavaScript’s creator had no choice but to create the lan-guage very quickly

had no choice but to

create (A):

(A) 를 만드는 것 말고는 선택의 여지가 없었다

JavaScript’s creator had no choice but to create the lan-guage very quickly

자바스크립트를 만든 이는

그 언어를

매우 빨리 만드는 것 외에는

달리 선택의 여지가 없었습니다 .

or : 그렇지 않았다면 ,

(A)would have been

used.

(A) 가 사용되었을 것입니다 .

worse : 더 안 좋은

(or other, worse, technologies would have been used).

or : 그렇지 않았다면 ,

(A)would have been

used.

(A) 가 사용되었을 것입니다 .

worse : 더 안 좋은

(or other, worse, technologies would have been used).

그렇지 않았다면 , 다른 , 더 안 좋은 , 기술들이 사용되었을 것입니다 .

or : 그렇지 않았다면 ,

(A)would have been

used :

(A) 가 사용되어왔을 것입니다 .

JavaScript’s creator, Brendan Eich, had no choice but to create the lan-guage very quickly (or other, worse, technologies would have been used at Netscape).

or : 그렇지 않았다면 ,

(A)would have been

used :

(A) 가 사용되어왔을 것입니다 .

JavaScript’s creator, Brendan Eich, had no choice but to create the lan-guage very quickly (or other, worse, technologies would have been used at Netscape). 자바스크립트의 창시자인 , 브렌단 아이히는 그 언어를 빨리 만들어내는 것 외에는 선택의 여지가 없었습니다 . ( 그렇지 않았다면 ,

다른 , 더 안 좋은 , 기술들이 넷스케이프에서 사용되었을 것입니다 .)

borrow : 빌리다 .

several : 몇몇

He borrowed from several pro-gramming languages:

borrow : 빌리다 .

several : 몇몇

He borrowed from several pro-gramming languages:

그는 몇몇 프로그래밍 언어로부터 빌려왔습니다 .

cause : 원인

Java is the cause of JavaScript’s syntax.

cause : 원인

Java is the cause of JavaScript’s syntax.

자바는

자바스크립트 문법 (syntax) 의 원인입니다 .

( 자바스크립트의 문법은 자바에서 따왔습니다 . . 는 의미인듯요 )

to partition: 분할하다 .

나누다 .

Java is the cause of how JavaScript partitions values into primitives and objects.

to partition: 분할하다 .

나누다 .

Java is the cause of how JavaScript partitions values into primitives and objects.

자바는 자바스크립트가 값을 primitives 와 objects 로 나누는 방식의 원인입니다 .

( 자바스크립트가 값을 primitive 와 ob-

jects 로 나누는 방식은 자바에서 따왔습니다…는 의미로 이해했음요 )

Java is the cause of JavaScript’s syntax and of how it partitions val-ues into primitives and objects.

Java is the cause of JavaScript’s syntax and of how it partitions val-ues into primitives and objects.

자바는 자바스크립트의 문법과 ,

자바스크립트가 값을 primitives 와 objects 로 나누는 방식의 원인입니다 .

( 이 두 가지는 자바에서 따왔습니다 .)

handling : 다루는 것

inspire : 영감을 주다 .

Scheme and AWK inspired JavaScript’s handling of functions.

handling : 다루는 것

inspire : 영감을 주다 .

Scheme and AWK inspired JavaScript’s handling of functions.

Scheme 과 AWK 는

자바스크립트가 함수를 다루는 방식에

영감을 주었습니다 .

first-class : 최고의 ,

일류의

frequencly : 빈번하게

Scheme and AWK inspired JavaScript’s handling of functions – they are first-class and used fre-quently in the language.

first-class : 최고의 ,

일류의

frequencly : 빈번하게

Scheme and AWK inspired JavaScript’s handling of functions – they are first-class and used fre-quently in the language.

Scheme 과 AWK 는 자바스크립트가 함수를 다루는 방식에 영감을 주었습니다 – 이 두개 언어는 최고 수준이며 , 자바스크립트 언어에서 빈번하게 사용됩니다 .

Closures make them a powerful tool.

Closures make them a powerful tool.

Clousres 는 그들을 강력한 도구로 만들어줍니다 .

(Closure 덕분에 그들은 매우 강력한 도구가 됩니다 .)

(A) is responsible for

(B) :

(A) 는 (B) 의 원인이 다 .

unique : 독특한

Self is responsible for JavaScript’s unique style of object-oriented pro-gramming (OOP).

(A) is responsible for

(B) :

(A) 는 (B) 의 원인이 다 .

unique : 독특한

Self is responsible for JavaScript’s unique style of object-oriented pro-gramming (OOP).

Self 는 자바스크립트의 고유한 OOP 스타일의 원인이 됩니다 .

(Self 가 있기에 , 자바스크립트는 고유한 OOP 스타일을 갖습니다 .)

elegant : 명쾌한

Its core is elegant, some of the things built on top of that core are less so.

elegant : 명쾌한

Its core is elegant, some of the things built on top of that core are less so.

자바스크립트의 코어는 명쾌하며 ,

그 코어의 위에 만들어진 것들 중 몇몇은 덜 명쾌합니다 .

go into : 들어가다

Its core (which we can’t go into here) is elegant, some of the things built on top of that core are less so.

go into : 들어가다

Its core (which we can’t go into here) is elegant, some of the things built on top of that core are less so.

자바스크립트의 코어 ( 여기서는 다룰 수 없지만 ) 는 명쾌합니다 , 그 코어 위에 만들어진 것들 중 몇몇은 덜 명쾌합니다 .

killer feature : 인상적인 기능

direcly : 바로 , 즉시

A killer feature is that you can create objects, di-rectly.

killer feature : 인상적인 기능

direcly : 바로 , 즉시

A killer feature is that you can create objects, di-rectly.

인상적인 기능 하나는

오브젝트를 바로 생성할 수 있다는 것입니다 .

A killer feature of JavaScript OOP is that you can create objects, di-rectly.

A killer feature of JavaScript OOP is that you can create objects, di-rectly.

자바스크립트 OOP 의

인상적인 기능 하나는 ,

오브젝트를 바로 생성할 수 있다는 것입니다 .

There is no need to

create (A) :

(A) 를 만들 필요가 없습니다 .

first : 먼저

There is no need to create a class first.

There is no need to

create (A) :

(A) 를 만들 필요가 없습니다 .

first : 먼저

There is no need to create a class first.

먼저 클래스를 만들 필요가 없습니다 .

( 오브젝트를 만들기 전에 )

something similar : 그 비슷한 뭔가

There is no need to create a class or something similar first.

something similar : 그 비슷한 뭔가

There is no need to create a class or something similar first.

클래스나 그 비슷한 뭔가를

먼저 만들 필요가 없습니다 .

( 오브젝트를 만들기 전에 )

influenced : 영향을 주었다 .

Perl and Python influenced JavaScript’s handling of strings

influenced : 영향을 주었다 .

Perl and Python influenced JavaScript’s handling of strings

펄과 파이썬은

자바스크립트가 문자열을 다루는 방식에

영향을 주었습니다 .

Perl and Python influenced JavaScript’s handling of strings, ar-rays and regular expressions.

Perl and Python influenced JavaScript’s handling of strings, ar-rays and regular expressions.

펄과 파이선은

자바스크립트가

문자열 , 배열 , 정규표현식을

다루는데 영향을 주었습니다 .

until (A) : (A) 전까지는 ..

JavaScript did not have exception handling until ECMAScript 3

until (A) : (A) 전까지는 ..

JavaScript did not have exception handling until ECMAScript 3

자바스크립트는

ECMA 스크립트 3 이전까지는

예외 처리기능이 없었습니다 .

automatically : 자동으로

fail : 작동이 안되다 .

고장나다 .

,which explaines why the language fails silently

automatically : 자동으로

fail : 작동이 안되다 .

고장나다 .

,which explaines why the language fails silently

, 그리고 그것은 자바스크립트가 왜 조용히 고장나는지 설명해줍니다 .

explain : 설명해주다

convert values : 값을 변환하다 .

fail : 작동이 안되다 .

, which explains why the language so often automatically converts values and so often fails silently:

explain : 설명해주다

convert values : 값을 변환하다 .

fail : 작동이 안되다 .

, which explains why the language so often automatically converts values and so often fails silently:

, 이것은 왜 자바스크립트가

그렇게 자주 자동으로 값을 변환하고선 , 그렇게 자주 조용히 작동에 실패하는지 설명해 줍니다 .

initially : 처음에

it initially couldn’t throw excep-tions.

initially : 처음에

it initially couldn’t throw excep-tions.

자바스크립트는 처음에는 예외처리를 할 수 없었던 겁니다 .

JavaScript did not have exception han-dling until ECMAScript 3, which explains why the language so often automati-cally converts values and so often fails silently: it initially couldn’t throw ex-ceptions.

JavaScript did not have exception han-dling until ECMAScript 3, which explains why the language so often automati-cally converts values and so often fails silently: it initially couldn’t throw ex-ceptions.자바스크립트는 ECMA 스크립트 3

이전까지는 예외처리기능이 없었습니다 , 이는 왜 이 언어가 자동으로 값을 변환하고선 그렇게 자주 조용히 작동에 실패하는지 설명해주죠 :

처음에는 예외처리를 해줄 수 없었던 거죠 .

on one hand : 한편으로는

quirk : 별난 점

is missing (A) : (A) 가 없다 .

quite a bit : 상당히 많은

functionality : 기능

On one hand, JavaScript has quirks and is missing quite a bit of functionality

on one hand : 한편으로는

quirk : 별난 점

is missing (A) : (A) 가 없다 .

quite a bit : 상당히 많은

functionality : 기능

On one hand, JavaScript has quirks and is missing quite a bit of functionality

한편으로 ,

자바스크립트는 별난 점들이 있고요 ,

꽤 많은 기능이 없습니다 .

On one hand, JavaScript has quirks and is missing quite a bit of func-tionality(block-scoped variables, modules, support for subtyping, etc.).

On one hand, JavaScript has quirks and is missing quite a bit of func-tionality(block-scoped variables, modules, support for subtyping, etc.).한편으로는 , 자바스크립트는 별난 점들이 있고 , 꽤 많은 기능이 없습니다 . (block-scoped 변수 ,

모듈 , subtyping 지원 등등 )

on the other hand :

다른 한편으로는

On the other hand, it has several powerful features.

on the other hand :

다른 한편으로는

On the other hand, it has several powerful features.

다른 한편으로는 ,

자바스크립트는 몇 가지 강력한 기능들이 있습니다 .

to work around a prob-

lem : 문제를 성공적으로 다루다 .

It has powerful features that allow you to work around these problems.

to work around a prob-

lem : 문제를 성공적으로 다루다 .

It has powerful features that allow you to work around these problems.

자바스크립트는

여러분이 이런 문제들을 해결하도록 해주는

강력한 기능들이 있습니다 ..

On the other hand, it has several powerful features that allow you to work around these problems.

On the other hand, it has several powerful features that allow you to work around these problems.

다른 한편으로는 , 자바스크립트는

여러분이 이런 문제들을 성공적으로 해결하도록 해주는 강력한 기능들이 몇 가지 있습니다 .

In other languages, you learn lan-guage features.

In other languages, you learn lan-guage features.

다른 언어의 경우에 , 여러분은 언어의 특징을 배웁니다 .

instead : 대신에

In JavaScript, you often learn patterns, instead.

instead : 대신에

In JavaScript, you often learn patterns, instead.

자바스크립트의 경우 ,

( 언어 특징 ) 대신에

보통 패턴을 배웁니다 .

appealing : 매력적인

brief history : 간략한 역사

Further readingJavaScript: how it all beganJavaScript: the glass is half full [what makes JavaScript appeal-ing?]ECMAScript: ES.next versus ES 6 versus ES Harmony [includes a brief history of ECMAScript versions]Perl and Python influences in JavaScript

appealing : 매력적인

brief history : 간략한 역사

Further readingJavaScript: how it all beganJavaScript: the glass is half full [what makes JavaScript appeal-ing?]ECMAScript: ES.next versus ES 6 versus ES Harmony [includes a brief history of ECMAScript versions]Perl and Python influences in JavaScript

더 읽을 거리

자바스크립트 : 이모든 것 어케 시작되었나 .

자바스크립트 : 컵은 절반이나 차 있다 . [ 자바스크립트 , 왜 매력있나 ?]

ECMA 스크립트 : ES.next 대 ES 6 대 ES Harmony

[ECMA 스크립트 버전의 간략한 역사 ]

자바스크립트에 미친 펄과 파이썬의 영향

Syntax

( 자바스크립트의 ) 문법

explain : 설명하다

This section explains a few basic syntactic principles of JavaScript.

explain : 설명하다

This section explains a few basic syntactic principles of JavaScript.

이 섹션은

자바스크립트의

기본적인 문법 원칙 몇 개를 설명합니다 .

Statements versus expressions

Statement Vs. expression

it helps to know : ~ 을 아는 것이 도움이 된다 .

To understand JavaScript’s syntax, it helps to know that it has two cat-egories.

it helps to know : ~ 을 아는 것이 도움이 된다 .

To understand JavaScript’s syntax, it helps to know that it has two cat-egories.

자바스크립트의 문법을 이해하기 위해서는 ,

자바스크립트가 두개의 카테고리를 갖는다는 점을 아는 것이 도움이 됩니다 .

simplifyingly :

단순화해서

major categories : 큰 카테고리

To understand JavaScript’s syntax, it helps to know that (simplifyingly), it has two major syntactic categories: statements and expressions.

simplifyingly :

단순화해서

major categories : 큰 카테고리

To understand JavaScript’s syntax, it helps to know that (simplifyingly), it has two major syntactic categories: statements and expressions.자바스크립트의 문법을 이해하기 위해서는 , (단순화해서 ) 자바스크립트가 두개의 큰 통사적 범주를 갖고 있다는 점을 알면 도움이 됩니다 : 바로 statement

와 expression 입니다 .

Statements “do things”.

Statements “do things”.

Statements 는 “뭔가를 합니다” .

sequence : 연속적인 사건들

A program is a sequence of state-ments.

sequence : 연속적인 사건들

A program is a sequence of state-ments.

프로그램은

statement 들의 연속입니다 .

declare : 선언하다

variable foo: 변수 foo

Example of a statement, which de-clares (creates) a variable foo: var foo;

declare : 선언하다

variable foo: 변수 foo

Example of a statement, which de-clares (creates) a variable foo: var foo;

statement 의 예 , 변수 foo 를 선언하는 statement:

var foo;

Expressions produce values.

Expressions produce values.

expressions 는 값을 만들어냅니다 .

right-hand side : 우측

They are the right-hand side of an assignment.

right-hand side : 우측

They are the right-hand side of an assignment.

Expression 은 할당했을 때 ,

우측에오는 것입니다 .

right-hand side : 우측

They are the right-hand side of an assignment, function arguments, etc.

right-hand side : 우측

They are the right-hand side of an assignment, function arguments, etc.

Expression 은 할당했을 때 ,

함수의 인자 등등의 우측에오는 것입니다 .

Example of an expression: 3 * 7

expression 의 예 :

3 * 7

distinction : 구분

The distinction between statements and expressions

distinction : 구분

The distinction between statements and expressions

statements 와 expression 간의 구분

is best illustrated by

(A) : (A) 에 의해 가장 잘 묘사된다 .

The distinction is best illustrated by the fact.

is best illustrated by

(A) : (A) 에 의해 가장 잘 묘사된다 .

The distinction is best illustrated by the fact.

이 구분은

그 사실에 의해 가장 잘 묘사됩니다 .

fact : 사실

two different ways: 두 가지 방식

the fact that JavaScript has two different ways to do if-then-else

fact : 사실

two different ways: 두 가지 방식

the fact that JavaScript has two different ways to do if-then-else

자바스크립트가

if-then-else 를 수행하는

두 가지 방식을 가진다는 사실

like Java : 자바와 마찬가지로

The distinction between statements and expressions is best illustrated by the fact that JavaScript (like Java) has two different ways to do if-then-else.

like Java : 자바와 마찬가지로

The distinction between statements and expressions is best illustrated by the fact that JavaScript (like Java) has two different ways to do if-then-else.

statement 와 expression 간의 구분은 , 자바스크립트가 if-then-

else 를 수행하는 두 가지 방식을 가진다는 사실에 의해 가장 잘 묘사됩니다 .

Either (A) or (B) :

(A) 가 되었든 , (B) 가 되었든

Either as a statement: var x; if (y >= 0) { x = y; } else { x = -y; }

Or as an expression: var x = y >= 0 ? y : -y;

Either (A) or (B) :

(A) 가 되었든 , (B) 가 되었든

Either as a statement: var x; if (y >= 0) { x = y; } else { x = -y; }

statement 로 썼을 때든 :

아니면 expression 로 썼을 때든 :

Or as an expression: var x = y >= 0 ? y : -y;

the latter : 후자

the former : 전자

You can use the latter as a function argument (but not the former): myFunction(y >= 0 ? y : -y)

the latter : 후자

the former : 전자

You can use the latter as a function argument (but not the former): myFunction(y >= 0 ? y : -y)

후자는 함수의 인자로 사용할 수 있지만

( 전자는 함수의 인자로 사용할 수 없습니다 ):

lastly : 마지막으로

wherever : 어디에서나

expect : 기대하다

Lastly, wherever JavaScript expects a statement, you can also use an ex-pression.

lastly : 마지막으로

wherever : 어디에서나

expect : 기대하다

Lastly, wherever JavaScript expects a statement, you can also use an ex-pression.

마지막으로 ,

자바스크립트가 statement 를 기대하는 곳이면 어디에서나 ,

expression 도 사용할 수 있습니다 .

so-called : 소위

For example: foo(bar(7, 1));foo(...); is a statement (a so-called expression statement), bar(7, 1) is an expression.

so-called : 소위

For example: foo(bar(7, 1));foo(...); is a statement (a so-called expression statement), bar(7, 1) is an expression.

예를 들어 :

foo (bar (7, 1));

foo (…); 는 statement 입니다 .

( 소위 expression statement 이죠 ),

그리고 bar (7,1) 는 expression 입니다 .

Both are function calls.

Both are function calls.

둘 다 함수를 호출한 것이고요 .

Control flow statements and blocks

Control flow statement 와 block

For control flow statements, the body can be a single statement.

For control flow statements, the body can be a single statement.

control flow statement 의 경우 ,

body 부분은 statement 한 개로 이루어져도 됩니다 .

Two examples: if (obj !== null) obj.foo();

while (x > 0) x--;

Two examples: if (obj !== null) obj.foo();

while (x > 0) x--;

두 가지 예 :

if (obj !== null) obj.foo();

while (x > 0) x--;

be replaced : 대체되다 .

However, any statement can always be replaced by a block.

be replaced : 대체되다 .

However, any statement can always be replaced by a block.

하지만 ,

모든 statement 는

항상 block 으로 대체될 수 있습니다 .

a block, curly braces containing zero or more statements

a block, curly braces containing zero or more statements

블록 , 0 개 이상의 statement 를 포함하는 { }

However, any statement can always be replaced by a block, curly braces containing zero or more statements.

However, any statement can always be replaced by a block, curly braces containing zero or more statements.

하지만 ,

statement 는 항상 블록으로 대체될 수 있습니다 , 블록은 0 개 이상의 statement 를 포함하는 { }

이고요 .

thus : 따라서

You could write : 이렇게 쓸 수 있겠죠 .

Thus, you could also write: if (obj !== null) { obj.foo(); } while (x > 0) { x--; }

thus : 따라서

You could write : 이렇게 쓸 수 있겠죠 .

Thus, you could also write: if (obj !== null) { obj.foo(); } while (x > 0) { x--; }

따라서 , 이렇게 쓸 수도 있겠죠 :

if (obj !== null) {

obj.foo();

}

while (x > 0) {

x--;

}

the latter form : 후자의 형태

In this blog post, we only use the latter form of control flow state-ments.

the latter form : 후자의 형태

In this blog post, we only use the latter form of control flow state-ments.

이 블로그 포스트에서는 ,

control flow statement 의 형태중 ,

후자만을 사용합니다 .

Semicolons

세미콜론 ( 사용에 대하여 )

optional : 선택사항인

Semicolons are optional in JavaScript.

optional : 선택사항인

Semicolons are optional in JavaScript.

자바스크립트에서 세미콜론은

선택사항입니다 .

omitting (A) : (A) 를 생략하는 것

lead to (A) : (A) 로 이어지다 .

recommand against do-

ing it : 그것 하는 것을 하지 말라고 권하다 .

But omitting them can lead to sur-prises, which is why I recommend against doing it.

omitting (A) : (A) 를 생략하는 것

lead to (A) : (A) 로 이어지다 .

recommand against do-

ing it : 그것 하는 것을 하지 말라고 권하다 .

But omitting them can lead to sur-prises, which is why I recommend against doing it.

하지만 세미콜론을 생략하는 것은 놀람으로 이어질 수 있습니다 ,

그것이 제가 생략하지 말라고 권하는 이유입니다 .

As you can see above :

위에서 보듯이

terminate : 종료시키다 .

As you can see above, semicolons terminate statements, but not blocks.

As you can see above :

위에서 보듯이

terminate : 종료시키다 .

As you can see above, semicolons terminate statements, but not blocks.

위에서 보듯이 ,

세미콜론은 statement 를 종료시키고 ,

block 을 종료시키지는 않습니다 .

(block 뒤에는 세미콜론을 안 씁니다 .)

one case : 한 가지 경우

There is one case where you will see a semicolon after a block:

one case : 한 가지 경우

There is one case where you will see a semicolon after a block:

block 뒤에 세미콜론을 보게 되는 것은

딱 한 가지 경우가 있습니다 :

(A) ends with (B) : (A)

는 (B) 로 끝난다 . 즉 (A)

의 끝에는 (B) 가 나온다 .

A function expression is an expression that ends with a block.

(A) ends with (B) : (A)

는 (B) 로 끝난다 . 즉 (A)

의 끝에는 (B) 가 나온다 .

A function expression is an expression that ends with a block.

function expression 이란

block 으로 끝나는 expression

입니다 .

If such an expression comes last in a statement, it is followed by a semicolon:

var x = 3 * 7;

var f = function () { };

If such an expression comes last in a statement, it is followed by a semicolon:

var x = 3 * 7;

var f = function () { };

statement 에서 그런 expres-

sion 이 마지막에 오면 ,

그 뒤에 세미콜론이 나옵니다 :

Comments

주석에 대하여

two kinds of comments

: 두 종류의 주석

JavaScript has two kinds of com-ments: single-line comments and multi-line comments.

two kinds of comments

: 두 종류의 주석

JavaScript has two kinds of com-ments: single-line comments and multi-line comments.

자바스크립트에는 두 가지 종류의 주석이 있습니다 :

한줄 주석과 여러 줄 주석

start with (A) : (A) 로 시작하다

terminated : 종료당하다 .

Single-line comments start with // and are terminated by the end of the line: x++; // single-line comment

start with (A) : (A) 로 시작하다

terminated : 종료당하다 .

Single-line comments start with // and are terminated by the end of the line: x++; // single-line comment

한줄 주석은 // 로 시작하고 ,

그 줄의 끝에서 끝납니다 .

delimited : 범위가 정해지다 .

Multi-line comments are delimited by /* and */ /* This is

a multi-line comment. */

delimited : 범위가 정해지다 .

Multi-line comments are delimited by /* and */ /* This is

a multi-line comment. */

여러 줄 주석은 /* 와 */ 로 범위가 정해집니다 .

Further readingExpressions versus statements in JavaScriptAutomatic semicolon insertion in JavaScript

Further readingExpressions versus statements in JavaScriptAutomatic semicolon insertion in JavaScript

더 읽을 거리자바스크립트에서 expression 과 statement

자바스크립트에서 자동 세미콜론 삽입

Variables and assignment

변수와 값 할당

must be declared :

선언되어야 한다 .

Variables in JavaScript must be declared, before they can be used:

must be declared :

선언되어야 한다 .

Variables in JavaScript must be declared, before they can be used:

자바스크립트에서

변수는 선언되어야 합니다 ,

사용될 수 있는 상태가 되기 전에

Assignment

값 할당

at the same time :

동시에

You can declare a variable and as-sign a value at the same time: var foo = 6;

at the same time :

동시에

You can declare a variable and as-sign a value at the same time: var foo = 6;

변수를 선언하고

동시에 값을 할당할 수 있습니다 .

existing : 존재하는

You can also assign a value to an existing variable: foo = 4; // change variable `foo`

existing : 존재하는

You can also assign a value to an existing variable: foo = 4; // change variable `foo`

이미 존재하는 변수에다가

값을 할당할 수도 있습니다 :

foo = 4; // ‘foo’변수를 바꾼다 .

Compount assignment operators

복합 할당 연산자

operations such as (A)

: (A) 와 같은 연산자 .

There are compound assignment operators such as +=.

operations such as (A)

: (A) 와 같은 연산자 .

There are compound assignment operators such as +=.

+= 와 같은

복합 할당 연산자가 있습니다 .

following : 뒤에 나오는

equivalent : 동일한 것

The following two assignments are equivalent: x += 1; x = x + 1;

following : 뒤에 나오는

equivalent : 동일한 것

The following two assignments are equivalent: x += 1; x = x + 1;

다음에 나오는 두 가지 할당은

서로 동일합니다 .

Identifiers and variable names

identifier 와 변수명

Identifiers are names for things, they play various syntactic roles in JavaScript.

Identifiers are names for things, they play various syntactic roles in JavaScript.

identifier 는 이름을 말합니다 ,

이들은 자바스크립트에서

다양한 문법적 역할을 합니다 .

For example, the name of a variable is an identifier.

For example, the name of a variable is an identifier.

예를 들어 , 변수의 이름은 일종의 identifier 입니다 .

Roughly, the first character of an identifier can be any Unicode letter, a dollar sign ($) or an underscore (_).

Roughly, the first character of an identifier can be any Unicode letter, a dollar sign ($) or an underscore (_).

대략 , identifier 의 첫번째 문자는 Unicode 문자나 , $ 기호나 ,

언더바 모두 될 수 있습니다 .

Later characters can additionally be any Unicode digit.

Later characters can additionally be any Unicode digit.

그 뒤에 나오는 문자는 Unicode

digit 이면 뭐든 될 수 있습니다 .

Thus, the following are all legal identifiers: arg0

_tmp $elem π

Thus, the following are all legal identifiers: arg0

_tmp $elem π

따라서 , 다음에 나오는 것은

모두 문법에 맞는 identifier 입니다 :

arg0

_tmp

$elem

π

reserved : 예약된

Several identifiers are “reserved words” – they are part of the syntax and can’t be used as variable names:

reserved : 예약된

Several identifiers are “reserved words” – they are part of the syntax and can’t be used as variable names:

몇몇 identifier 는 “미리 예약된 단어”이다 –이들은 문법의 일부를 이루며 , 변수명으로 사용될 수 없습니다 .

reserved words

arguments break case catch class const continue debugger default delete do else enum eval export extends false finally for function if im-plements import in instanceof interface let new null package private protected public return static super switch this throw true try typeof var void while with yield

예약된 이름들

arguments break case catch class const continue

debugger default delete do else enum eval export

extends false finally for function if implements im-

port in instanceof interface let new null package

private protected public return static super switch

this throw true try typeof var void while with yield

technically : 엄밀히 따지자면

Technically, the following three identifiers are not reserved words, but shouldn’t be used as variable names, either: Infinity NaN undefined

technically : 엄밀히 따지자면

Technically, the following three identifiers are not reserved words, but shouldn’t be used as variable names, either: Infinity NaN undefined다음에 나오는 세 가지 identifier 는 ,

엄밀히 따지면 , 예약된 이름은 아니지만 ,

변수명으로 사용되어서는 안됩니다 .

Infinity NaN undefined

Further reading

Valid JavaScript variable names [by Mathias Bynens]

더 읽을 거리

사용할 수 있는 자바스크립트 변수명 [by Mathias Bynens]

감사합니다

끝까지는 못했어요 . 졸리기도 하고 , 슬라이드도 너무 많고 해서 .. 일단 여기까지 해서 중도 포기 !