안녕세계
[SK고용디딤돌] 자바스크립트 (3/7) - 1주차 본문
[SK고용디딤돌] 자바스크립트 (3/7) - 1주차
Junhong Kim 2016. 7. 7. 17:55
** 복습 **
- null
: Object 초기화 역할, 참조 카운터를 없앨 수 있다.
- typeof VS instance of
: typeof가 Object일 경우, typeof와 instanceof는 같이 붙어 다닌다 instaneof로 어떤 객체인지 식별 가능하다
- 동적 프로그래밍
: 값에 의해 type이 결정되는 것
- scope chain
: JavaScript 코드가 실행 될 때 global scope가 생성 됨, 함수가 호출되면 function scope가 생성 되고, 이는 global scope와 연결되어 있다.
- inline script VS external script
: inline과 external script는 같이 쓸 수 없다. 같이 쓸 경우 inline script는 무시된다.
: <head> 와 <body> 태그에 사용할 수 있다.
: <head> 에는 주로 라이브러리 코드를 사용한다 (external script)
: <body> 에 쓸 때는 최하단에 사용하는 것이 좋다
→ 이유? html parsing을 하면 DOM에 의해 rendering 되는데 그 부분의 속도를 빠르게 하기 위해서 (상단에 배치한다고 문제되진 않음)
- undefined VS null
1) undefined : 변수가 초기화 되지 않음 or 변수가 존재하지 않음
2) null : 객체는 참조의 개념이 있기 때문에 참조 카운터를줄이기 위해서 사용 → garbage collection이 그나마 빨리 된다.
- NaN(Not a Number)
: number 타입의 정보를 산술 연산을 했는데 number 연산이 실패 했다는 의미 → 결과 값이 숫자가 아니다
- 함수형 언어(functional program language)
: "값", "매개변수", "실행코드 반환 값" 으로 함수를 전달할 수 있다.
- Refactoring
: interior바꾸지 않고 exterior만 바꾸는 것 → 기능 동일 (이쁘게 만드는 것이라고 생각)
- 논리 연산자
: var X = A || []
: var X = (A === undefined)? [] : A
- L-Value VS R-Value
: L-Value는 공간(장소)을 의미하고, R-Value는 읽어 들이는 것을 의미
- new
: Dynamic Memory Allocation Operator(동적 메모리 할당 연산자)
: new는 constructor와 함께 쓰인다 → 초기화 작업
: new는 this와 참조 변수에게 참조 정보를 전달 한다.
- main
: 모든 프로그램은 main에서 시작하고 main으로 끝난다.
: 실행될 때 마다 PC(Program Counter)가 이동한다.
: Code Segment의 Startup Code가 main을 실행한다.
- delete
: 배열에서의 delete와 객체에서의 delete의 차이
- block scope
: ECMAScript5 까지 JavaScript에서는 block scope가 없고 function scope만 존재
: ECMAScript6 에서는 let 이라는 키워드가 있는데 이 키워드를 block 안에서 사용하면 block scope를 만들 수 있다.\
→ 하위 호환성을 위해 var를 쓰면 block scope가 없이 만들 수 있다.
** JavaScript Day03 **
/* 3장 연산자, 제어문 */
● 제어문
1) if문
- 생략
2) switch
- JavaScript에서는 문자열도 가능 (int형 or 문자열)
3) 조건 연산자
- 생략
4) while
- 생략
5) for
- 생략
6) for...in
- 객체의 프로퍼티나 배열의 원소에 대해 순서대로 반복처리를 실행
for (v in 객체) → 프로퍼티명이 넘어가는 것
for (v in 배열) → 원소의 인덱스가 넘어가는 것
※ v에 담기는 정보는 property 명 또는 원소의 index 이다
※ 자바스크립트에만 있는 특징
JavaScript Object = Association array(연관 배열) → 배열 표기법으로 접근 가능
obj.x = obj["x"]
obj["1"] = 0
7) 예외
- 예외란 예외적인 상황이나 error가 발생했음을 나타내는 객체
- JavaScript는 runtime에서 error가 발생할 때마다 예외를 발생시킴
- 프로그램에서 throw 문을 사용하여 명시적으로 예외를 발생시킬 수도 있음
- throw 문에서 사용하는 표현식의 결과 타입은 대부분 error object 혹은 error
- 객체를 상속받는 객체이지만, 에러메세지를 담은 문자열이나 에러코드를 나타내는 숫자값도 유용하게 사용
※ throw 표현식
throw new Error('에러메시지');
8) try..catch..finally
- 예외가 발생하면 자바스크립트 인터프리터는 정상적인 프로그램 실행을 즉시 중단하고 가장 가까운 예외처리기로 넘김
try { /* 정상일 경우 수행되어야 할 코드 */ // 코드 실행중 runtime에서 error가 발생하여 예외가 발생하거나 // throw 문을 통해 예외를 직접 발생시킬 수 있으며, // 호출한 함수를 통해 예외가 전파될 수도 있다. throw( 아무거나 ) // 방법 : 1, "에러", new Error("에러 메세지") // 자기가 속한 곳에서 catch를 찾는다. 없는 경우 앞으로 전파가 됨 } catch ( e ) { /* 예외가 발생할 경우 수행되어야 할 코드 */ // 예외가 관련된 정보를 ()에 선언된 변수 e를 통해 참조 // 이 블록에서 예외를 처리할 수도 있고 예외를 무시할 수도 있다. // throw 문을 통해 예외를 다시 발생시킬 수도 있따. } finally { /* 정상 또는 예외가 발생한 경우 모두 수행되어야 할 코드 */ } |
※ 다른 언어와 다르게 자바스크립트는 catch 블럭이 하나만 존재한다 - 왜? 자바스크립트는 동적언어이기 때문에!!!
|
funcA(){ try { funcB(); } catch (e) {
}
|
→ ←
|
funcB(){ throw(); }
|
1) 자기가 속한 곳에서 catch를 찾는다.
2) 없는 경우 앞으로 전파가 되어 catch가 처리함
3) funcA에서도 처리 못하면 error
※ finally는 자원을 회수하는 용도로 사용한다
< try..catch..finally 예제 >
-------------------------------------------------------------
/* 4장 함수 */
● 함수?
- 특별한 기능을 수행하는 코드의 집합체
● 함수를 만드는 3가지 방법
1) new Function()
2) Function Literal
3) Function 문
※ function literal 과 function 문의 차이 : 함수가 되는 시점
- function literal은 실행될때 함수가 됨 function문은 파싱할 때 함수가 됨
- function문은 위에있든 아래있든 상관없음, function literal을 이용한것은 할당이 이루어지고 나서 호출이 이루어져야 한다.
● 자바스크립트에서 함수의 역할
1) 호출 루틴으로서의 함수
2) 데이터로서의 함수(pure function) 외부의 영향을 받지 않고 독립적으로 운영될 수 있는 함수
3) 메서드로서의 함수 : 객체 프로퍼티에 저장되어 객체를 통해 호출
4) 생성자 함수 : new연산자와 함께 생성자 함수가 사용, 객체를 생성하고 초기화하는데 사용
● 변수의 전역스코프와 지역스코프
- 스코프? 코드에서 변수를 참조할 수 있는 해당 변수의 유효 범위를 결정하느 개념
- 자바스크립트는 블록 스코프가 존재하지 않음에 유의
● 함수의 매개변수와 스코프
- 매개변수는 함수의 지역 변수, 매개변수는 함수 스코프에 존재
- 전역스코프의 전역변수 값을 함수의 매개변수로 전달할 때 그 값이 함수의 지역 스코프의 매개변수로 복사됨
- 전달된 값이 기본형일 경우 전역변수와 매개변수는 상호 독립적인 값이 되고,
참조값이 전달된 경우 전역변수와 매개변수가 동일 객체를 참조하게 됨
● 값에 의한 vs 참조에 의한
/* 함수 선언 */
/* 변수 및 객체 생성 */
- swapByValue() 는 값을 매개변수로 전달 → swap (X)
- swapByReference() 는 obj 참조값을 매개변수로 전달 → swap (O)
● 함수의 매개변수와 인자 arguments
- 자바스크립트 함수는 함수 정의시 선언된 매개변수에 상관없이 인자를 전달할 수 있으며, 어떤 데이터 타입의 값이라도 전달 할 수 있음
- 선언된 매개변수보다 적은 수의 인자 값들을 전달하면, 값을 전달받지 못한 남은 매개변수들은 undefined 값을 갖게 됨
- 생략이 가능한 매개변수는 매개변수는 매개변수 목록의 끝에 위치하도록 하여 임의로 생략할 수 있게 만드는 것이 중요
inclusiveㄱ exclusiveㄱ
function sum(배열, 시작인덱스, 종료인덱스) {
}
배열/시작인덱스/종료인덱스 undefined 검사
배열 array (instanceof 경우) 검사
시작인덱스/종료인덱스 number 검사
* 가변형 인자 설정
function printf(format, var_args) {
if (arguments.length < 1) {
throw new Error('한 개 이상의 전달인자가 필요합니다');
}
for (var i = 0; i < arguments.length; i++) {
var pattern = new RegExp('\\{' + (i - 1) + '\\}', 'gi'); // new RegExp({-1},'gi')
format = format.replace(pattern, arguments[i]); // {-1}을 arguments[0]으로 변경
}
document.writeln(format + '<br/>');
}
try {
printf('{0} + {1} = {2}', 2, 3, 5);
printf('{0} + {1} = {2}');
printf();
} catch (e) {
document.writeln(e + '<br/>');
}
/* 결과 */
2 + 3+ 5
{0} + {1} = {2}
Error: 한개 이상의 전달인자가 필요합니다
- var_args : 가변형 매개변수라고 알려주는 것 실제 여기서 쓰는건 아님 (idiom 관용)
- RegExp(=Rgular Experience) : 즉, 규칙 (패턴 매칭 기술
- gi : 대소문자 구분을 위한 (여기서는 의미 없음)
- { } 는 원래 Frequency(빈도)를 뜻함
|
arguemnts length : 4 "0" : "{0} + {1} = {2}" "1" : 2 "2" : 3 "3" : 5
|
● 재귀호출과 callee
: Arguments 객체는 현재 실행되고 있는 함수를 가리키는 callee 프로퍼티도 가지고 있는데,
이를 이용하면 이름 없는 함수도 재귀적으로 호출할 수 있다.
● 함수와 명시적인 이름을 가진 인자 전달
- 함수 호출시 매개변수를 객체로 전달하여, 메소드 내에서 전달된 객체의 프로퍼티를 인자로 활용하는 방법
- 코드의 가독성을 더욱 높일 수 있으며 매개변수 순서에 상관없이 값을 자유롭게 전달할 수 있다.
- 생략된 매개변수를 명확히 표현할 수 있는 특징이 있다.
● 함수에 인자로 함수를 전달
- 자바스크립트에서 함수는 데이터의 속성을 갖고 있어서, 변수, 객체의 프로퍼티에도 저장될 수 있으며, 함수의 전달 인자로도 사용될 수 있다
------------------------------------------------------------------------
※ calculator.add = calculator['add']
● 함수에 함수 리터럴을 전달하는 익명함수
- function literal = unnamed function
- 함수 리터럴을 이용해 정의한 함수를 이름 없는 함수, 즉 익명함수라고 부름
- 이름이 없기 때문에 주로 변수, 객체 프로퍼티에 저장하거나 함수의 인자 혹은 반환 값으로 주로 사용
- 즉시 실행 함수
1) 익명함수가 라이브러리 코드를 가지고 있고 라이브러리 등록할 때 주로 사용
2) 이벤트처리(이벤트핸들러)
(fucntion(x, y){}(2, 3)) // 최근 트렌드
(function(x, y){})(2, 3) // 옛날 방식
※ 익명함수 - 즉시실행함수, 이벤트 핸들러에서 많이 사용 됨
● 중첩함수
|
function outer() { var a = 5; function inner() { var a = 10; } inner(); } outer(); // 그 함수내에서만 호출할 수 있다.
|
global [ outer : f ] --- (1) ↑ outer() --------- (2) [ inner : f ] --- (3) [ a : 5] ↑ inner() --------- (4) [ a : 10 ]
|
|
function outer() { var a = 5; function inner() { a = 10; var b = 5; } inner(); } outer();
|
global [ outer : f ] --- (1) ↑ outer() --------- (2) [ inner : f ] --- (3) [ a : 10] ↑ inner() --------- (4) [ b : 5 ] |
클로저? 리턴된 중첩 함수를 클로저라고 한다.
클로저 메커니즘은 스코프 메커니즘의 확장 된것이다.
is a -> inheritance
has a -> composition
1) inheritance 2) polymorphism 3) encapsulation 4) Information Hiding
객체 지향은 낮은 결합도(loosely coupled) + 높은 응집도(high cohesion)
* inner 함수는 outer 함수의 지역변수에 접근 가능!! => scope chain의 특징 때문에 가능한 것
[번외]
pattern 패턴
idiom 관용
convention 규칙
[추천서적]
손에 잡히는 정규 표현식 - 벤 포터 저/ 김경수 역/ 인사이트
[링크]
http://www.regexlib.com/?AspxAutoDetectCookieSupport=1
'My Trace > SK고용디딤돌2기' 카테고리의 다른 글
| [SK고용디딤돌] 자바스크립트 (5/7) - 2주차 (0) | 2016.07.11 |
|---|---|
| [SK고용디딤돌] 자바스크립트 (4/7) - 1주차 (0) | 2016.07.08 |
| [SK고용디딤돌] 자바스크립트 (2/7) - 1주차 (0) | 2016.07.06 |
| [SK고용디딤돌] 자바스크립트 (1/7) - 1주차 (0) | 2016.07.05 |
| [SK고용디딤돌] 오리엔테이션 - 1주차 (0) | 2016.07.04 |
