본문 바로가기
기초공부/WEB

[JavaScript]생활코딩 언어 - 자바스크립트 정리

dndkdkdk 2019. 3. 25. 02:51

언어 자바스크립트

1

자바스크립트는 웹브라우저라고 분류되는 소프트웨어를 프로그래밍적으로 제어하기 위한 언어이다.
(프로그래밍적으로 제어란 예를 들어 브라우저가 가지고 있는 경고창이라는 기능을 alert이라는 프로그래밍 코드로 제어한다.)

탈웹브라우저
최근에는 자바스크립트가 웹브라우저를 제어하기 위한 용도로만 사용되고 있지 않다.
웹서버를 동작하기 위한 도구로써 자바스크립트인 Node.js를 사용한다.
서버에 존재하면서 웹브라우저에게 응답하기 위한 정보를 프로그래밍적으로 생성하는 기술에는 PHP, JAVA,PYTHON, Node.js 등이 있다.
Node.js를 사용하면 웹브라우저와 웹서버를 제어하기 위한 기술로써 모두 자바스크립트를 사용할 수 있다.

탈웹
웹에서 사용되던 자바스크립트가 웹 바깥쪽 기술에서 사용되기 시작했다
ex) Google Apps Script

언어 = 의사소통을 위한 약속 ex)~('Hello World');
환경 = 언어를 사용하는 대상
ex)웹브라우저에서는 alert라고 사용하지만 Node.js에선 write로, SpreadSheet에선 msgBox로 사용한다

3

크롬 개발자도구
우클릭, 검사(=F12) → 카테고리, Console→ 자바스크립트 코드 입력 → enter, 실행
console.log('입력'); 라고 코드를 작성하면 개발자도구 console 창에 출력된다

console실행

4

Sublime Text : 코드를 작성하게 해주는 editor
통합개발도구 IDE : 개발에 필요한 기능을 editor보다 더 많이 가진 도구

어떤 개발도구를 사용하는지는 매우 중요하다.

  1. 생산성이 달라지고
  2. 인간의 인지능력을 뛰어넘을 수 있도록 하기 때문이다.

삽은 금새 배울수 있는 반면, 포크레인은 배우는데 많은 시간이 필요하듯이 도구의 효용이 좋을수록 그 도구를 사용하기 위해 충분한 여유를 두어야한다.

5

데이터타입 number 데이터 타입은 정수와 실수로 이루어져 있다.

6

  1. 숫자 연산 : 덧셈(+), 뺄셈(-), 곱셈(*), 나누기(/)
  2. 그 외 연산 : Math.~ ex) Math.random, Math.sqrt, Math.ceil, Math.round 등

7

문자열

  • 문자를 작성할 때는 "문자" or '문자' 라고 표시한다
  • 만약 정보로서 '을 표시하고 싶다면 \'라고 작성한다
  • 1과 "1"은 다르다 전자는 숫자, 후자는 문자이다
  • typeof를 사용한다면 데이터 타입을 알 수 있다
    ex) typeof "1" 입력 > "string" 출력

8

문자열 관련

  • \n은 줄바꿈으로 사용한다
  • 문자열 결합에는 + 연산자를 사용한다
  • 문자열 관련 기능
    1. "문자".length : 문자 개수 출력
    2. "문자".indexof 입력 : 문자 인덱스 출력
  • 기타 다른 기능들이 많다

9

변수variable : 문자나 숫자의 값을 받는 그릇으로 유지할 필요가 있을 때 사용한다

  • 이 값은 다른 값으로 변경할 수 있다
  • var이라는 키워드는 변수를 선언하겠다는 것을 의미하며 처음 선언 이후 변수를 사용할 때는 필요치 않다
    ex) var a = 1; // a라는 이름을 가진 변수 생성
  • var이라는 키워드는 생략 가능(생략할 수 있는 이유를 알고 있을때만 생략하기)
  • 변수를 여러 개를 한 번에 선언할 수 있다

10

변수예시_전
(변수를 선언하지 않을 경우)
변수예시_후
(변수를 선언하였을 경우)
값을 수정해야 할 때 변수를 선언하였을 경우 코드의 변경이 쉬워진다. 즉, 변수는 코드의 재활용성을 높여준다.
+) 코드를 작성할 때 변하는 영역과 변하지 않는 영역을 구분한다면 코드의 유지,보수가 쉬워진다.

11

개발자도구는 오류를 확인할 수 있다

// : 한 줄 짜리 주석이라는 약속
/**/ : 여러 줄 주석

잘 만든 코드란 좋은 주석(적당한 설명이 부가된 코드)을 갖고 있는 코드

주석을 사용하는 이유

  1. 자신이 만든 코드도 일정 시간 지나면 잊는다
  2. 다른 사람과 협업할 때 도움말이 된다
  3. 특정 코드를 일시적으로 동작시키지 않을 때 사용할 수 있다

12

  1. ; : 명령이 끝났다는 것을 명시적으로 나타낸다
  2. 줄바꿈은 자바스크립트에서는 명령이 끝났다고 간주한다
  3. 두 가지 이상의 명령어를 한 줄에 표현할 경우 ;이 필요하다

띄어쓰기는 가독성을 위한 것일 수 있지만 필수적일 수도 있다

<script>
  var a = 1;
  vara = 1; (x) - 오류가 발생한다
  var a=1; (o) - 하지만 가독성을 위하여 띄어쓰기를 한다
</script>

13

연산자 : 어떤 작업을 컴퓨터에게 지시하기 위한 기호
ex) a = 1 : (변수a) (대입연산자) (상수, 값1)
비교연산자 : 값들의 대소 비교하는 연산자. 결과는 불린boolean

14

  1. == : 동등연산자equal operator
    좌항과 우항을 비교하여 서로 값이 같다면 true, 다르면 false 리턴
  2. === : 일치연산자strict equal operator
    좌항과 우항이 정확하게 같은지 비교
  3. 예시
    ex) 1 === "1" : false - 값 뿐만 아니라 데이터의 형식의 일치를 따짐
    ex) 1 == "1" : true - 실질적인 값의 일치를 따짐

프로그래밍의 정확도를 높이기 위해 ==보다는 ===을 사용하자

15

  1. null : 값이 없다 → 프로그래머가 의도한 것
  2. undefined : 값이 정의되지 않음 → 프로그래머가 의도하지 않은 것
  3. 비교
    - alert(undefined == null); : true
    - alert(undefined === null) : false

    실제 결과
    4. 비교예제

  4. 데이터 타입
    1. true와 false는 데이터 형식이며 이 둘은 boolean 데이터 타입에 포함된다
    2. undefined는 undefined의 데이터 타입
    3. null은 null의 데이터 타입
    4. true, false는 boolean의 데이터 타입
    5. 1, 4는 number의 데이터 타입
  5. 예시
    - true == 1 : true
    - true == 그 외 : false
    - true == '1' : true
    - true === 1 : false
    - true === '1' : false
    - 0 === -0 : true
    - Nan === Nan : false(Nan : 계산할 수 없음, ex) 0/0)

    실제결과
비교예제

==, === 비교 사이트

16

  1. ! : 부정
  2. != : 같지 않다
  3. !==: 정확하게 같지 않다
  4. > : 크기 비교
  5. >= : 좌항이 우항보다 크거나 같은지 비교

17

조건문conditinal statement : 조건에 따라 애플리케이션을 다르게 동작하도록 하는 것

조건문 문법
if(true or false) {
    내용
}

18

else if 문법

if () {
}
else if () {
}
else {
}

else 문법

if () {
}
else {
}
else if와 else로 좀 더 복잡한 상황을 구현할 수 있다

19

prompt : 사용자로부터 어떤 정보를 입력 받는 자바스크립트 명령어
if문과 prompt, alert을 조합하여 기본 예제 실행 가능

20

논리연산자

  1. && : and 연산자
    좌항 우항 모두 참이면 true, 그 외에는 false
  2. || : or 연산자
    좌항 우항 모두 거짓이면 false, 그 외에는 true
  3. ! : not

21

  1. 조건문의 조건에서 1은 true로 대체 될 수 있다. 그러나 그러지 말고 true or false를 사용하자.
  2. 조건문의 조건에서 빈 문자열은 false로 간주된다. 문자열이 존재한다면 true로 간주된다.
  3. 조건문의 조건에서 undefined, null, Nan는 false로 간주된다.

22

반복문loop/iterate

while (Boolean) {
    반복 실행 코드
} // 조건이 true에서 false가 될 때까지 실행됨

무한루프 : 반복이 끊임없이 실행되는 것

24

while문은 전체적으로 보면 초기화, 반복실행, 반복 조건으로 구분되어 있다.
→ for문으로 한꺼번에 처리할 수 있다

for ( 초기화 ; 조건 ; 반복실행 ) {
    반복 실행 코드
}

실행 순서
초기화 → ( 조건 → 코드 → 반복실행 ) (괄호 안의 부분을 반복한다)

while문과 for문은 서로 대체 가능하다

26

반복문 제어

  1. break : 반복문을 종료하고 반복문 밖으로 빠져나간다
  2. continue : 다음 반복으로 넘어간다

27

자바스크립트는 문자열과 숫자를 결합하면 문자열로 취급한다
ex)document.write('a'+i)

디버그 : 오류를 제거하는 행위
디버거 : 디버그를 도와주는 행위(F12 → source에서 실행가능)

정지점을 설정하여 차례대로 실행할 수 있다.
예시 디버거예시

28

함수 : 하나의 로직을 재실행할 수 있도록 하는 것 - 코드의 재사용성을 높여준다
function 함수명([인자..]) {
    코드
    return 반환값
}

29

함수의 효용

  1. 재사용성이 높아져 함수의 유지보수가 용이하다.
    반복문과 함수는 어떠한 로직을 재사용할 때 편리한다.
    그러나 반복문은 기계적으로 일정한 반복을 그 자리에서 실행할 때 의미가 있다.
    함수는 반복적으로 실행되는 로직인 여러가지 맥락에서 사용할 때 의미가 있다.
  2. 코드의 가독성이 높아진다
    (똑같은 이름의 로직은 같은 코드, 구성, 취지를 갖고 있다는 것을 확신할 수 있기 때문이다)
  3. 로직에 정통하지 않아도 사용할 수 있다

이들은 프로그래밍언어가 발전하는 방향성이라고 해도 과언이 아니다

30

함수의 출력
함수는 return이라는 키워드를 쓴다
return : 함수 종료/값을 출력값으로 반환

31

함수의 입력
매개변수parameter : 함수를 정의할 때, 값을 받는 변수
인자argument : 함수를 사용할 때, 입력 받는 값

32

함수를 정의한 것을 변수에 대입할 수 있다

<script>
  numbering = function() {
  코드
}
numbering();
</script>

익명함수 : 함수의 정의와 호출을 동시에 하는 함수 - 1회성으로 호출할 때

33

  1. 배열array : 연관된 데이터를 모아서 통으로 관리하기 위하여 사용하는 데이터 타입
  2. 원소element : 배열에 들어 있는 각각의 데이터
  3. 색인index : 데이터를 출력할 때

34

배열의 효용
함수는 여러 개의 인자를 받을 수 있지만 하나의 값만 출력할 수 있다. 배열이 이를 보완할 수 있다.

예시
배열예시

35

  1. 내장함수 : 자바스크립트가 기본적으로 제공하는 함수
  2. 사용자 정의 함수 : 사용자가 정의하여 사용하는 함수

배열의 구체적인 사용법 : 반복문과 결합하여 사용하자

36

배열의 제어

  1. 크기 : arr.length
  2. 추가 : arr.push('');
  3. 복수의 원소 추가 : arr.concat(['', '']);
  4. 배열의 시작점에 원소 추가 : arr.unshift('');
  5. 원하는 지점에 원소 추가 : arr.splice(index, howmany, ''); (return 값 체크)
배열함수예시

37

  1. 첫 원소 제거 : arr.shift();
  2. 끝 원소 제거 : arr.pop();
  3. 정렬 : arr.sort(); / arr.reverse();
배열함수예시

38

객체object : 데이터를 담는 그릇, 배열과 달리 인덱스를 지정할 수 있다

선언 및 출력
객체기본예시

39

배열은 순서를 가지고 있다. 객체는 key, value를 가지고 있지만 순서를 가지고 있지 않다

for in 문 (배열/객체 둘 다 사용 가능)
예시
객체예시

key에는 객체의 속성명인 a, b, c가 대입된다

40

객체에 담길 수 있는 값의 예시
객체예시
- 함수도 객체에 저장할 수 있다. 자바스크립트에서는 함수도 일종의 값이여서 변수에 저장할 수 있기 때문

예시2 this : 이 함수가 속한 객체를 가리키는 변수
객체예시

이 예제에서는 this는 function이 속한 grades를 가리킴

예시3
객체예시

객체지향프로그래밍 : 연관된 데이터와 함수가 그룹핑하여 하나의 그릇에 담는 기법
위의 예시에서는 grade라는 그릇에 연관된 데이터인 list과 show라는 함수가 그룹핑되었다.

41

모듈화를 지원하기 위한 기법 중 하나는 코드를 여러 개의 파일로 분리하여 사용하는 기법이다.

이를 통해 얻을 수 있는 효과

  1. 재사용성이 높아진다
  2. 코드를 개선하면 이와 관련된 모든 애플리케이션 동작을 개선할 수 있다
  3. 코드 수정 시 필요한 로직을 빠르게 찾을 수 있다
  4. 필요한 로직만을 로드하여 메모리 낭비를 줄일 수 있다
  5. 한 번 다운받은 모듈은 다음에 다시 사용할 때 시간과 트래픽을 절약할 수 있다

자바스크립트에서는모듈이라는 개념이 분명하게 존재하지 않는다. 하지만 자바스크립트가 구동되는 환경인 호스트 환경에 따라서 각각의 모듈화 방법이 제공되고 있다.
(호스트환경 : 브라우저, Node.js, 구글 앱스 스크립트 등)

42

모듈화 방법
head태그 부분에 <script src="a.js"></script>코드를 작성하면 a.js에 정의되어 있는 함수를 호출하여 사용할 수 있다.

모듈화가 필요한 이유

  1. html 파일에는 웹페이지를 표시하는 코드만 존재하기 때문에 가독성이 높아진다.
  2. html 파일의 용량을 줄어든다.
  3. 다양한 html 파일에서도 사용할 수 있다.

43

각각의 호스트환경에 따라 모듈화 방법이 달라짐을 보여주기 위하여 Node.js에서 모듈화하는 방법을 소개한다

44

모듈 : 프로그램을 구성하는 작은 부품으로서의 로직
라이브러리 : 자주 사용되는 로직을 재사용하기 편리하도록 잘 정리한 일련의 코드의 집합

라이브러리를 만들 때 자신의 경쟁력의 원천이 아닌 사용하기 위한 도구로써 만들고자 하는 것이라면 우선은 라이브러리를 찾거나 검색하자. 라이브러리를 만들 때는 많은 사람들이 그것을 목적으로 모여서 많은 시간, 많은 자본, 많은 노하우가 포함된 것이기 때문에 그 라이브러리보다 좋은 라이브러리를 만드는 것은 쉬운 일이 아니기 때문이다.

웹브라우저가 제공하는 기능, 자바스크립트가 제공하는 기능을 제외한 어떠한 것도 라이브러리는 할 수 없다.
브라우저가 허용하는 기능만 쓸 수 있기 때문이다. 그러나 이 기능들은 자유도가 높고, 파편화 되어 있어 사용하기 불편하다.
이 문제점을 위해 어떠한 목표를 정해 놓고 쉽게 달성할 수 있도록 만들어 놓은 로직들의 집합인 라이브러리를 만들었다.
ex) 웹페이지를 쉽게 제어할 수 있도록 하는 것, 서버와 쉽게 통신할 수 있게 하는 것

현 시점에서 가장 많이 사용되고 있는 라이브러리는 JQuery
라이브러리 사용 시 핵심요소

  1. JQuery의 자바스크립트 파일을 자신의 웹페이지로 가져와야 함(JQuery 홈페이지에서 다운받아 읽어오면 됨)
  2. API documentation : JQuery가 제공하는 명령어들의 리스트

45

JQuery 체험
라이브러리를 사용하는 것의 중요성을 체감할 수 있다

47

UI : User Interface, 시스템 입장에서 사용자를 대면하는 접점이 되는 그 지점
- 하드웨어적인 ui(입출력장치) 뿐만 아니라 소프트웨어적으로 구현되는 것(예를 들어 button)
- 사용자의 의중을 시스템에게 전달하고 시스템의 상태를 보여주면 ui라고 한다

API : Application Programming Interface
- 주소창에 javascript:alert("Hello world"); 치면 ui가 화면에 출력
→ alert과 같은 인터페이스를 API라고 부른다
개발자가 아닌 사람들은 ui를 통해서 시스템을 제어하는 것이고 개발자는 api를 이용해서 자신의 맥락에 맞게 그것들을 응용하여 애플리케이션을 제어하는 것

전산공학(사용자 - 웹 개발자, 게임 개발자, 앱 개발자 등 많은 개발자들이 종사 - 웹브라우저 개발 - 운영체제 - C, C++ - 어셈블리어 - 기계어) > 전자공학(cpu, 메모리, 하드웨어) > 전기공학 > 물리학
- 오른쪽에 있는 것은 왼쪽에 있는 시스템들이 동작하는 일종의 인프라를 제공한다
왼쪽에 있는 것은 오른쪽에 있는 것들을 응용하여 사용하는 애플리케이션이다

48

프로그래머가 제어하고 싶은 환경이 제공하는 API라는 것을 통해서 소프트웨어를 제어한다
프로그래밍은 만든다는 것은 그 프로그램이 제어하고자 하는 환경이 제공하는 API가 무엇이 있고 그 각각의 API들은 어떤 특성이 있고 어떻게 사용하는가에 대한 지식이 필요하다
그런 지식을 머릿속에 항상 가지고 있을 수 없기 때문에 자신이 필요한 것을 찾아낼 수 있는 능력을 스스로 기르는 것이 프로그래밍을 주체적으로 작성하는 핵심이다

어떤 프로그래밍을 배울 때 일반적으로 플랫폼, 환경이 제공하는 정보

  1. 래퍼런스 : 튜토리얼의 지식을 기반으로 사용자들이 찾는 (환경이 제공하는) 명령들의 정보
  2. 튜토리얼 : 환경이 어떠한 기능을 제공하는가에 대해서 사전에 알고 있어야 되는 것들을 공부

자바스크립트의 래퍼런스

  1. 자바스크립트가 제공하는 api
  2. 자바스크립트가 동작하는 호스트 환경의 api

1에 어느 정도 익숙해진 다음, 제어하고자 하는 대상에 따른 2를 익히자
자바스크립트의 표준문서 : ECMAscript
그 외 : MDN, MSDN
웹브라우저 API

.

49

자바스크립트 내에서 정규표현식 사용하기(생활코딩_정규표현식수업)
정규표현식regular expression : 특정한 문자를 찾아내는 도구

50

정규표현식 실행 단계

  1. 컴파일 : 패턴을 찾는 것
  2. 실행 : 대상에 대해서 어떤 작업을 하는 것

컴파일 - 패턴 만들기

  1. 정규표현식 리터럴
    ex) var pattern = /a/ → 우리가 찾고자 하는 대상을 변수에 저장
  2. 정규표현식 객체 생성자
    ex) var pattern = new RegExp('a'); → 정규표현식 객체를 생성

51

컴파일 - 추출, test(원하는 패턴이 있는지 테스트)
실행 - 치환

패턴을 통해서 정규표현식을 사용하는 법
RegExp : 정규표현식 객체

예시
> var pattern = /a/; → 찾고자 하는 'a'
> pattern.exec('abcde'); → 인자 안에 찾고자 하는 정보가 존재한다면 찾은 정보 리턴, 목표 : 추출
["a"]

> var pattern = /a./; → .이 오는 자리에 1개의 문자가 있음
> parttern.exec('abcde');
["ab"]

> var pattern = /a/;
> pattern.exec('bcdef');
null
> pattern.test('abcde'); → 인자 안에 찾고자 하는 정보가 존재한다면 true 리턴, 존재하지 않는다면 false, 목표 : test
true
> pattern.test('bcde');
false

52

문자열에서 정규표현식을 사용하는 법 예시
> var pattern = /a/;
> var str = 'abcdef';
> str.match(pattern);
["a"]

> var str = 'bcdef';
> str.match(pattern);
null

> var str = 'abcdef';
> str.replace(pattern, 'A'); → pattern에 해당하는 값을 찾아서 두 번째 인자로 바꿈
"Abcdef"

53

정규표현식 옵션
i : 대소문자 구별x
> var xi = /a/;
> "Abcde".match(xi);
null
> var oi = /a/;
> "Abcde".match(oi);
["A"]

g : 모든 결과 리턴
> v ar xg = /a/;
> "abcdea".match(xg);
["a"]
> var og = /a/;
> "abcdea".match(og);
["a", "a"]

복수의 옵션 사용 가능
> var ig = /a/ig;
> "AabcdAa".match(ig);
["A", "a", "A", "a"]

54

예시
(\w+)\s(\w+)
() : group을 의미한다
\w : 문자, A~Z, a~z, 0~9를 의미한다
+ : 수량자, 앞에 있는 문자가 1개 이상인 경우에만 유효하다
\s : 공백을 의미한다

관련 사이트
- 정규표현식 시각화
- 정규표현식 빌더

캡쳐 : 그룹을 지정하고 지정된 그룹을 가져와서 사용하는 개념 예시
> var pattern = (\w+)\s(\w+);
> var str = "coding everybody";
> var result = str.replace(pattern, "$2, $1"); → 치환, $2 : 두번째 그룹, $1 : 첫번째 그룹
> console.log(result);
everybody, coding

55

치환 예시

56

함수는 모듈화의 근간이기 때문에 시즌2에서는 함수와 관련된 여러가지 기능들을 소개한다.
시즌 3는 객체지향이라고 하는 프로그래밍 패러다임에 대한 이야기를 한다. 자바스크립트는 객체지향이라고 하는 것을 매우 독특한 관점에서 구현하고 있기 때문에 이전에 객체지향을 배웠더라고 해도 낯설것이다.

유효범위 : 변수의 수명

예시1
var vscope = 'global'; // 전역변수 선언
function fscope() {
     alert(vscope);
}
fscope(); // global 출력
>> fscope이라는 함수는 함수 바깥쪽에 선언되어 있는 변수에 접근할 수 있다

예시2
var vscope = 'global';
function fscope() {
     var vscope = 'local'; // 지역변수
     alert(vscope);
}
fscope();
>> 함수 내에서 정의되어 있는 vscope을 출력한다

지역변수 : 함수의 중괄호 안쪽에서만 접근할 수 있는 변수
전역변수 : 자바스크립트 전역에서 접근할 수 있는 변수

예제3
function fscope() {
     var lv = 'local variables';
     alert(lv);
}
fscope() ; // 'local vairables' 출력
alert(lv); // 'undefined' 출력
>> 함수 내에서 만들어진 lv라는 변수는 지역변수이고 그 지역내에서만 접근할 수 있기 때문에 undefined 출력

예제4
var vscope = 'global';
function fscope() {
     var vscope = 'local';
}
fscope();
alert(vscope); // 'global' 출력

var vscope = 'global';
function fscope() {
     vscope = 'local'
}
fscope(); // 'local' 출력

local 변수를 만들 때 var이라는 키워드를 쓰게 되면 var 키워드 뒤에 따라오는 변수는 local 변수가 된다.
var을 쓰지 않은 변수는 전역 변수를 의미한다.

예제5
var vscope = 'global';
function fscope() {
     var vscope = 'local';
     vscope = 'local';
}
fscope();
alert(vscope); // 'global' 출력

local 변수인 vscope 생성한 뒤 다시 vscope을 할당할 때 var이 없다고 하더라도 우선적으로 지역변수가 존재하는지 체크한다.
즉, 함수 안에서 변수를 선언할 때 var을 붙이지 않았다면 전역변수를 사용하게 되는 것이고, 같은 이름의 지역변수가 존재한다면 지역변수를 우선적으로 가리키게 된다.

전역변수를 써야하는 이유를 느끼지 못하면 언제나 지역변수를 사용하자. 지역변수를 사용한다면 이름의 충돌을 피할 수 있다.

57

지역변수를 사용해야 하는 이유를 예제로 확인해보자

예제1
function a {
     var i = 0;
}
for (var i = 0; i < 5; i++){
     a();
     document.write(i);
}
>> 01234 출력

예제2
function a {
     i = 0;
}
for (var i = 0; i < 5; i++){
     a();
     document.write(i);
}
>> 무한반복
예제2는 같은 이름의 변수를 중복해서 사용했지만 각각의 취지가 다르기 때문에 문제가 발생한다.

58

전역변수를 사용해야할 경우
var MYAPP = {} // 객체
MYAPP.calculator = { // 속성 : 객체 안에 들어 있는 변수. 여기서는 calculator
     // calculator 속성의 값은 다시 객체
     'left' : null, // null : 현재 값을 아직 정의하지 않았다는 것을 프로그래머가 명시적으로 지정하는 것
     'right' : null
}
MYAPP.coordinate = {
     'left' : null,
     'right' : null
}

MYAPP.calculator.left = 10;
MYAPP.calculator.right = 20;
function sum() {
     return MYAPP.calculator.left + MYAPP.calculator.right;
}
document.write(sum()); // 30
MYAPP이라는 전역변수 하나만을 생성하여 그 전역변수의 객체의 소속으로 다른 전역변수들을 만든다면 변수의 이름이 충돌할 확률은 현저히 낮아지게 된다

만약 하나의 전역변수도 허용하고 싶지 않으면?
(function() {
     위의 코드 작성
}())
이렇게 호출하면 MYAPP도 지역변수가 된다. 이 때 이 함수를 익명함수라고 부른다

59

지역변수를 선언할 수 있는 곳은 함수로 제한된다.
만약 함수 바깥, 이를테면 for문이나 if문에서 변수를 선언한다면 그것은 전역변수가 된다

60

정적 유효범위static scoping/lexical scoping : 함수가 선언된 시점에서의 유효범위를 갖는 방식
var i=5;

function a(){
     var i=10;
     b();
}

function b(){
     document.write(i);
}
a();

a()가 실행되면, b()가 실행되고 b에서 i가 무엇인지를 찾는다. 우선 function b안에서의 지역변수를 찾는다. 지역변수가 존재하지 않으면 전역변수를 찾는다.
이 때, function a의 i가 아니라 전역변수 i를 찾는다. b가 선언된 이 시점에서 i의 전역변수는 i=5이기 때문이다.
b가 호출 됐을 때 시점에서 b가 담겨있는 함수의 지역변수가 사용되는 것이 아니다.

61

함수도 객체다. 즉 일종의 값이다.

function a () {} == var a = function() {}
에서 function은 변수 a에 담겨진 값이다.

예제
a = {
     b : function() {}
}
함수는 객체의 값으로 포함될 수 있다. 여기서 b는 key지만 function이란 값을 담는 일종의 변수의 역할을 한다.

속성property : 객체 안에서 변수 역할을 하는 것
메소드method : 객체의 속성의 값으로 담긴 함수

함수는 다른 함수의 인자로 전달될 수 있다

예제
function cal(func, num){
     return func(num);
}
function increase(num){
     return num+1;
}
alert(cal(increaese, 1));

62

함수는 함수의 리턴 값으로도 사용할 수 있다.

예제
function cal (mode) {
     var funcs = {
          'plus' : function(left, right) { return left + right },
          'minus' : function(left, right) { return left - right }
     }
     return funcs[mode];
}
alert ( cal ( 'plus' ) (2, 1));
alert ( cal ( 'minus' ) (2, 1));

우선 cal('plus')가 실행 → return funcs['plus'] → funcs['plus'] : function(left, right) { return left + right }이므로 function(2, 1) 실행 → alert(3)

함수는 배열의 값으로도 사용할 수 있다.

예제
var process = [
     function (input) { return input + 10; },
     function (input) { return input * input; },
     function (input) { return input / 2; }
];
var input = 1;
for ( var i = 0 ; i < process.length : i++) {
     input = process[i](input);
}
alert(input);

i가 0, 1, 2일 때 for문 실행  →  i = 0 일 때, input = process[0](input);  →  input = 1 + 10  →  i++, i = 2  →  input = process[1](input);  →  input = 11 * 11;  →  i++, i=2 input = process[2](input);  →  input = 121 / 2  →  alert(60.5);

first-class citizen/object/entity/value : 변수, 매개변수, 리턴 값 등으로 다양하게 사용할 수 있는 데이터 형태 ex) 함수

'기초공부 > WEB' 카테고리의 다른 글

stackoverflow april fools day cursor-effects  (0) 2019.03.31
[JavaScript]생활코딩 클라이언트 - 웹브라우저 자바스크립트 정리  (0) 2019.03.31
[CSS]생활코딩 WEB2-CSS 정리  (0) 2019.03.24
[HTML5]이미지 태그, 오디오 태그, 비디오 태그  (0) 2019.03.20
[HTML5]표 태그  (0) 2019.03.20

'기초공부/WEB' Related Articles

티스토리툴바