생활코딩 Javascript 기본

2016.08.16 생활코딩 Javascript 1회독

2016.08.22 생활코딩 Javascript 2회독

JavaScript 기본

JavaScript

javascript는 웹페이지를 동적으로, 프로그래밍적으로 제어하기 위해서 고안된 언어다.

문자의 표현

큰 따옴표 혹은 작은 따옴표 중의 하나로 감싸야한다.

escape charactor : \

변수의 선언

var는 생략 할수도 있지만 유효범위에 영향을 미친다.

javascript에서는 세미콜론을 생략할 수 있는데, 이 경우 줄바꿈을 명령의 끝으로 간주하게 된다.

javascript let, const 차이

비교 연산자

!== (엄격한 다른)

'!=='는 '!='와 '=='의 관계와 같다. 정확하게 같지 않다는 의미. 피연산자들이 다르거나 형태가 다른 경우 참을 반환한다.

var3 !== "3" // true

3!=='3' // true

조건문

01

조건문에 사용될 수 있는 데이터 형이 꼭 불린만 되는 것은 아니다. 관습적인 이유로 0는 false 0이 아닌 값은 true로 간주된다.

조건문의 조건 팁

반복문

continue

실행을 즉시 중단 하면서 반복은 지속

웹 브라우저는 무한 반복을 허용하지 않는다.

함수의 정의와 호출

함수(function)란 하나의 로직을 재실행 할 수 있도록 하는 것을 코드의 재사용성을 높여준다.

인자는 생략 할 수 있다.

배열의 사용

배열은 복수의 데이터를 효율적으로 관리, 전달하기 위한 목적으로 고안된 데이터 타입이다. 따라서 데이터의 추가/수정/삭제와 같은 일을 편리하게 할 수 있도록 돕는 다양한 기능을 가지고 있다.

배열이란 연관된 정보를 하나의 그룹으로 관리하기 위해서 사용한다. 그리고 그 정보를 처리 할 때는 반복문을 이용한다.

function numbers(){
    return['asd','asss','aaaaa'];
}

var num=numbers;

alert(num[0]);
alert(num[1]);
alert(num[2]);

Q. 이 코드에서 왜 굳이 numbers[0]이렇게 출력하지 않고 다시 num이라는 변수에 배열을 만들어서 출력하는지 알고 싶습니다. 감사합니다.

A. 하하, 저도 똑같은 질문을 웹계발자에게 했답니다. 이유는, numbers[0] 이렇게 출력을 하게되면, 컴퓨터가 다시 function에 들어가서 numbers[0]이 뭔지 계산&과정을 거친후에 출력을 해줘야되기 때문에 (변수를 사용하는것보다 상대적으로) 시간도 많이 걸리고 메모리도 많이 잡아먹습니다. 하지만 님의 예제에서처럼 "var num=numbers;"을 쓰게되면 컴퓨터는 계산할 필요없이 "num = ['asd','asss','aaaaa']"이라는 데이터만 딱 가지고 있는 상태에서 index가 0인 데이터만 뽑아내는 것이므로 컴퓨터 입장에서는 시간, 에너지 소모가 적은것이죠. :) 도움이 되셨길 바랍니다.

javascript array의 function

배열(Array)
 -  배열은 데이터를 논리적 순서에 따라 순차적으로 데이터를 입력하며, 물리적 주소 또한 순차적이다. 그리고 인덱스를 가지고 있어서 원하는 데이터를 한번에 접근이 가능하기 데이터 접근 속도가 매우 빠르다. 그러나 배열은 데이터의 삽입/삭제에는 취약하다. 배열 특성상 데이터 삽입/삭제가 이루어지면 삽입/삭제가 이루어진 위치의 다음부터 모든 데이터의 위치를 변경해야 하기 때문이다.

연결리스트(LinkedList)
 -  연결리스트는 데이터를 논리적 순서에 따라 데이터를 입력한다. 하지만 물리적 주소는 순차적이지 않다. 인덱스를 가지고 있는 배열과는 달리 연결리스트는 인덱스 대신 현재 위치의 이전 및 다음 위치를 기억하고 있다. 때문에 한번에 데이터 접근이 가능하지 않고 연결되어 있는 링크를 따라가야만 접근이 가능하고, 배열에 비해 속도가 떨어진다. 하지만 데이터 삽입/삭제는 논리적 주소만 바꿔주면 되기 때문에 데이터 삽입/삭제는 용이하다.

객체(Object)

배열은 인덱스로 숫자를 사용한다. 만약 인덱스로 문자를 사용하고 싶다면 객체(dictionary)를 사용해야 한다. 

다른 언어에서는 연관배열(associative array) 또는 맵( map), 딕셔너리(Dictionary)라는 데이터 타입이 객체에 해당한다.

객체의 생성

1	var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80};

위의 예제에서 egoing은 key가 되고, 10은 value가 된다. 아래는 객체를 만드는 다른 방법이다.

1 2 3 4

var grades = {}; grades['egoing'] = 10; grades['k8805'] = 6; grades['sorialgi'] = 80;

아래와 같은 방법으로 객체를 만들수도 있다.

1 2 3 4

var grades = new Object(); grades['egoing'] = 10; grades['k8805'] = 6; grades['sorialgi'] = 80;

객체의 접근

sorialgi라는 이름(key)으로 저장된 값을 가져오는 법이다. 결과는 80이다.

1 2	var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80}; alert(grades['sorialgi']);

다음 방법으로도 객체의 속성에 접근 할 수 있다.

1	alert(grades.sorialgi);

for 문은 in 뒤에 따라오는 배열의 key 값을 in 앞의 변수 name에 담아서 반복문을 실행한다. 반복문이 실행될 때 변수 key의 값으로 egoing, k8805, sorialgi가 순차적으로 할당되기 때문에 grades[key]를 통해서 객체의 값을 알아낼 수 있다.

객체에는 객체를 담을수도 있고, 함수도 담을 수 있다. 

자바스크립트를 이용한 객체 지향 프로그래밍 기법의 핵심이 되는 성질로 취지에 따라서 로직을 객체에 그룹핑해서 객체라는 부품을 조립해서 소프트웨어라는 완제품을 만들 수 있게 해준다.

모듈

하나의 코드를 여러 파일로 분리하는 것의 효과

• 자주 사용되는 코드를 별도의 파일로 만들어서 필요할 때마다 재활용할 수 있다.
• 코드를 개선하면 이를 사용하고 있는 모든 애플리케이션의 동작이 개선된다.
• 코드 수정 시에 필요한 로직을 빠르게 찾을 수 있다.
• 필요한 로직만을 로드해서 메모리의 낭비를 줄일 수 있다.
• 한번 다운로드된 모듈은 웹브라우저에 의해서 저장되기 때문에 동일한 로직을 로드 할 때 시간과 네트워크 트래픽을 절약 할 수 있다. (브라우저에서만 해당)

라이브러리

라이브러리는 모듈과 비슷한 개념이다. 모듈이 프로그램을 구성하는 작은 부품으로서의 로직을 의미한다면 라이브러리는 자주 사용되는 로직을 재사용하기 편리하도록 잘 정리한 일련의 코드들의 집합을 의미한다고 할 수 있다.

하나의 프로세스를 수행하는 단위 프로그램을 모듈이라고 합니다.

- 모듈은 더 이상 나누어지지 않는 최소 단위 프로그램입니다.
- 모듈은 가능한 사이즈가 작아야 합니다. 프로그래머가 수정이 용이하기 때문입니다. 

한편 이런 모듈이 프로세스의 단위라면 기능의 단위인 function point가 있습니다.
이것은 모듈과 수가 일치할 수록 좋으며 1:1 대응할 경우 응집도가 가장 높다고 말합니다.

정규표현식

다시 확인하기

https://opentutorials.org/course/743/6580

* javascript API 문서

• ECMAScript (표준문서)
• 자바스크립트 사전 (생활코딩)
• 자바스크립트 레퍼런스 (MDN)
• jscript 레퍼런스 (MSDN)

JavaScript 함수 지향

유효범위

같은 이름의 지역변수와 전역변수가 동시에 정의되어 있다면 지역변수가 우선한다. var를 사용하지 않은 지역변수는 전역변수가 된다.

변수를 선언할 때는 꼭 var을 붙이는 것을 습관화해야 한다. 전역변수를 사용해야 하는 경우라면 그것을 사용하는 이유를 명확히 알고 있을 때 사용하도록 하자.

위의 예제에서는 var i로 선언했기 때문에 scope가 제한되었다. 아래 예제에서는 전역변수로 사용되어 무한루프 발생되었다.

불가피하게 전역변수를 사용해야 하는 경우는 하나의 객체를 전역변수로 만들고 객체의 속성으로 변수를 관리하는 방법을 사용한다.

자바스크립트는 함수가 선언된 시점에서의 유효범위를 갖는다. 이러한 유효범위의 방식을 정적 유효범위(static scoping), 혹은 렉시컬(lexical scoping)이라고 한다. 

값으로서의 함수

JavaScript의 함수가 다른 언어의 함수와 다른 점은 함수가 값이 될 수 있다는 점이다.

콜백

비동기 처리

시간이 오래걸리는 작업이 있을 때 이 작업이 완료된 후에 처리해야 할 일을 콜백으로 지정하면 해당 작업이 끝났을 때 미리 등록한 작업을 실행하도록 할 수 있다. 

콜백,,, 영어로 callback 입니다. call back이죠
즉 불려지는 겁니다. 수동이죠. 불려지는 대상이 콜백 함수구요.

뭔가를 콜할 때 그 콜을 당한 놈이 공통적인 사항은 처리를 하는데, 공통적이지 않은 부분(비지니스 로직)은 제가 처리를 해야죠. 그때 그 부분을 콜백 함수에 정의하면 내가 부른 놈이 반대로 절 다시 부르죠(call back). 이때 제가 정의한 비지니스 로직을 처리할 수 있게 됩니다.

클로저

클로저(closure)는 내부함수가 외부함수의 맥락(context)에 접근할 수 있는 것을 가르킨다.

내부함수는 외부함수의 지역변수에 접근 할 수 있는데 외부함수의 실행이 끝나서 외부함수가 소멸된 이후에도 내부함수가 외부함수의 변수에 접근 할 수 있다. 이러한 메커니즘을 클로저라고 한다.

클로저란 내부함수가 외부함수의 지역변수에 접근 할 수 있고, 외부함수는 외부함수의 지역변수를 사용하는 내부함수가 소멸될 때까지 소멸되지 않는 특성을 의미한다.

fuction안에 있는 function들을 method라고 한다.

다시보기 https://opentutorials.org/course/743/6544

arguments

함수의 정의부분에서 인자에 대한 구현이 없음에도 인자를 전달 할 수 있는 것은 왜 그럴까? 그것은 arguments라는 특수한 배열이 있기 때문이다.

arguments는 사실 배열은 아니다. 실제로는 arguments 객체의 인스턴스다.

arguments.length는 함수로 전달된 실제 인자의 수를 의미하고, 함수.length는 함수에 정의된 인자의 수를 의미한다.

Q. javascript에서 인자를 구현하지 않아도 사용할 수 있는 것이 java에서 매개변수 형식을 다르게하는 overloading과 같은 개념인가요?

A.오버로딩과는 조금 다릅니다. 오버로딩은 같은 이름이지만 원형에 따라서 여러 함수가 공존 할 수 있는 기능을 의미하고요. 자바스크립트는 동일 이름의 함수가 있다면 덮어쓰기 되기 때문에 오버로딩이 지원되지 않습니다.

JavaScript 객체 지향

객체 지향 프로그래밍

객체지향의 개념 https://opentutorials.org/course/743/6553

객체

객체 내의 변수를 프로퍼티(property) 함수를 메소드(method)라고 부른다. 자바스크립트에서 함수는 재사용 가능한 로직의 묶음이 아니라 객체를 만드는 창조자라고 할 수 있다.

자바스크립트 생성자의 특징

일반적인 객체지향 언어에서 생성자는 클래스의 소속이다. 하지만 자바스크립트에서 객체를 만드는 주체는 함수다. 함수에 new를 붙이는 것을 통해서 객체를 만들 수 있다는 점은 자바스크립트에서 함수의 위상을 암시하는 단서이면서 또 자바스크립트가 추구하는 자유로움을 보여주는 사례라고 할 수 있다.

this

this는 함수 내에서 함수 호출 맥락(context)를 의미한다. 맥락이라는 것은 상황에 따라서 달라진다는 의미인데 즉 함수를 어떻게 호출하느냐에 따라서 this가 가리키는 대상이 달라진다는 뜻이다. 함수와 객체의 관계가 느슨한 자바스크립트에서 this는 이 둘을 연결시켜주는 실질적인 연결점의 역할을 한다.[

[참고] javascript의 this

this는 전역객체인 window와 같다.

생성자는 빈 객체를 만든다. 그리고 이 객체내에서 this는 만들어진 객체를 가르킨다. 생성자가 실행되기 전까지는 객체는 변수에도 할당될 수 없기 때문에 this가 아니면 객체에 대한 어떠한 작업을 할 수 없다.

prototype

상속의 구체적인 수단인 prototype

객체는 프로퍼티를 가질 수 있는데 prototype이라는 프로퍼티는 그 용도가 약속되어 있는 특수한 프로퍼티다. prototype에 저장된 속성들은 생성자를 통해서 객체가 만들어질 때 그 객체에 연결된다. 

자바에서 상속을 할려면 extends키워드가 필요한데
자바스크립트에서는 안되니
즉, function super() extends Ultra{
}
이렇게 안되니 자바스크립트에서는 일단 super()객체부터 일단 만들어 놓고
super객체의 prototype변수에 상위 객체 포인터를 연결시키는것..

표준 내장 객체

표준 내장 객체(Standard Built-in Object)는 자바스크립트가 기본적으로 가지고 있는 객체들을 의미한다.

• Object
• Function
• Array
• String
• Boolean
• Number
• Math
• Date
• RegExp

Object

Object 객체는 객체의 가장 기본적인 형태를 가지고 있는 객체이다. 다시 말해서 아무것도 상속받지 않는 순수한 객체다. 자바스크립트에서는 값을 저장하는 기본적인 단위로 Object를 사용한다. 

hasOwnProperty는 인자로 전달된 속성의 이름이 객체의 속성인지 여부를 판단한다. 만약 prototype으로 상속 받은 객체라면 false가 된다.

원시 데이터 타입

객체가 아닌 데이터 타입을 원시 데이터 타입(primitive type)이라고 한다. 

• 숫자
• 문자열
• 불리언(true/false)
• null
• undefined

레퍼 객체

문자열과 관련해서 필요한 기능성을 객체지향적으로 제공해야 하는 필요 또한 있기 때문에 원시 데이터 형을 객체처럼 다룰 수 있도록 하기 위한 객체를 자바스크립트는 제공하고 있는데 그것이 래퍼객체(wrapper object)다.

래퍼객체로는 String,Number,Boolean이 있다. null과 undefined는 레퍼객체가 존재하지 않는다.

복제

 복제는 파일을 복사하는 것이고 참조는 심볼릭 링크(symbolic link) 혹은 바로가기(윈도우)를 만드는 것과 비슷하다. 원본 파일에 대해서 심볼릭 링크를 만들면 원본이 수정되면 심볼릭 링크에도 그 내용이 실시간으로 반영되는 것과 같은 효과다. 심볼릭 링크를 통해서 만든 파일은 원본 파일에 대한 주소 값이 담겨 있다. 다시 말해서 원본을 복제한 것이 아니라 원본 파일을 참조(reference)하고 있는 것이다. 덕분에 저장 장치의 용량을 절약할 수 있고, 원본 파일을 사용하고 있는 모든 복제본이 동일한 내용을 유지할 수 있게 된다.

객체를 다른 말로는 참조 데이터 형(참조 자료형)이라고도 부른다. 기본 데이터형은 복제 되지만 참조 데이터형은 참조된다. 모든 객체는 참조 데이터형이다. 변수에 담겨있는 데이터가 원시형이면 그 안에는 실제 데이터가 들어있고, 객체면 변수 안에는 데이터에 대한 참조 방법이 들어있다고 할 수 있다.