Function
=> 코드를 하나의 이름으로 묶어두고 사용하는 것Argument(Parameter)
함수를 호출할 때 호출하는 쪽에서 넘겨주는 데이터매개변수가 없는 함수는 항상 동일한 작업만 수행 가능
매개변수는 함수 내의 지역 변수가 됨 - 외부에서 사용 불가
매개변수에 하나의 데이터를 저장하는 기본형 데이터를 대입하면 함수 내에서 데이터를 변경해도 원본에는 아무런 영향이 없고(Call By Value) 0개 이상의 데이터를 가진 배열이나 객체를 대입한 경우, 내부 요소를 변경하면 원본의 내용도 변경된다.(Call By Reference)
arguments 배열 : 함수 내의 숨겨진 변수로 매개변수에 데이터를 대입하면 순서대로 저장하는 배열이다. JS에서는 매개변수 개수보다 더 많은 양의 데이터를 대딥하면 매개변수 개수만큼 대입하고 나머지는 arguments 배열에서 찾아서 쓸 수 있다.
적게 대입하면 앞에부터 순서대로 채워지고 나머지는 undefined가 된다.
return
함수의 수행을 종료하고 하나의 데이터를 호출한 곳으로 넘겨준다.
pure function(순수 함수)
동일한 입력에 동일한 출력을 만들어야 한다.
외부 데이터를 변경하지 않아야 한다.
결과는 리턴해야 한다.
recursion(recursive call - 재귀)
함수가 자기 자신의 함수를 리턴하는 경우
재귀를 사용하면 코드의 가독성이 높아지는데 메모리 사용량이 많아지고 시간이 오래걸릴 수 있다.
javascript에서는 함수가 일급 객체
함수도 하나의 자료형
함수도 하나의 자료형이므로 변수에 대입할 수 있고 매개변수로도 사용가능, return도 가능하다.
Callback : 이벤트 / 상태 변화가 발생시 호출되는 함수
보통 매개변수로 함수를 대입받는 형태로 구현된다.
Nested : 함수 안에 함수를 만드는 것
High Order Function : 다른 함수를 리턴하는 함수로 currying이라고도 하며 디자인 패턴으로 간주하기도 함.
Closure : 함수 안에서 함수를 리턴해서 함수 외부에서 함수 내부의 데이터를 수정하는 것
함수의 매개변수에 기본값 설정이 가능
매개변수 이름 뒤에 =와 함께 값을 지정하면 된다.
Built-In (내장) 함수
JS에서 제공하는 함수. 실제로는 window 객체의 메소드이다. window 객체를 이용해서 호출할 때는 window.을 생략할 수 있다.1) alert
메시지를 대화상자에 출력할 때 사용한다.
return되는 데이터가 없다.
2) confirm
메시지를 대화상자에 출력하고 버튼을 2개 제공하는데 확인 버튼을 누르면 true가 리턴되고 취소 버튼을 누르면 false가 리턴됨.
3) prompt
한 줄의 문자열을 입력받을 수 있는 대화상자. 확인 누르면 문자열이 리턴, 취소 누르면 null 리턴.
4) eval
문자열을 대입하면 이에 해당하는 DOM 객체를 찾아서 리턴해주는 함수
현재는 안쓴다. (document.getElementById 사용을 권장)
5) Encoding, Decoding
Encoding = 데이터를 컴퓨터에 저장하는 형태로 만드는 것
JS에서 서버에 데이터를 전송할 때 get 방식을 사용시, Quert String (parameter)는 encoding을 해서 전송해야함. 아니면 깨짐
escape(문자열): 일부 특수문자(@, *, -, _, +, ., /)를 제외한 모든 문자를 인코딩
escapeURI(문자열): 인터넷 주소에 사용되는 문자를 제외한 모든 문자를 인코딩 - 주로 사용
encodeURIComponent(문자열): 알파벳과 숫자를 제외한 모든 문자를 인코딩
Decoding = 컴퓨터에 저장된 데이터를 출력하기 위한 형태로 만드는 것
unescape
decodeURI
decodeURIComponent
6) isNaN
NaN 여부를 판단하는 함수
7) isFinite
유한수인지 판단하는 함수
8)parseInt와 parseFloat
문자열을 정수나 실수로 변환해주는 함수
JS의 OOP(Object Oriented Programming)
ES5까지는 클래스의 개념이 없어서 OOP의 개념이 아님 - 객체 기반 언어 ECMA 2015에서 클래스의 개념이 도입됨.객체지향의 3대 특징
1)Encapsulation(캡슐화)
불필요한 부분을 숨기고 하나로 만드는 것
클래스, 인스턴스, 접근 지정자를 학습
2)Inheritance(상속)
하위 클래스가 상위 클래스의 모든 것을 물려받는 것
물려주는 것이 아니라 물려받는 것이다.
3)Polymorphsim(다형성)
동일한 메시지에 대하여 다르게 반응하는 성질
동일한 코드가 호출하는 객체에 따라 다른 메소드를 호출하는 성질
상속과 오버라이딩(가끔은 구현)으로 구현됨
객체 (Object)
데이터를 저장할 수 있는 속성(variable - property)과 기능을 수행하는 메소드를 모아놓은 것
내장 객체 : JS에서 제공하는 객체
API(Application Programming Interface)
SDK(Software Development Kit)
3rd Party 객체 : 다른 개발자는 회사가 제공(Library, Framework, Solution)
사용자 정의 객체
1) 생성 var/let/const name = {"속성이름" : 데이터, "메소드이름" : 메소드코드} var/let/const name = new 생성자2) 내부 요소 호출(.을 이용)
. 대신에 [속성이름]을 써서 속성 호출이 가능. String 형태로 입력해야함.
내부 속성은 중복해서 만들어지지 않기 때문에 동일한 이름에 2번 삽입하면 새로운 내용으로 변경된다.
3) for in
for (temp_var_name in object) {
context
}객체의 모든 속성의 이름을 문자열 형태로 대입
4) 속성이름 in 객체
속성이 객체에 존재하는지 여부를 판단하다 Boolean으로 리턴
5) with 블럭
with(객체이름)
{
이 안에서는 객체 이름을 생략해도 된다.
}
6) 속성 추가 및 수정
Object.Attr = data / function ();존재하는 속성이면 수정이고 그렇지 않으면 축가
7) 속성 삭제
delete(Object.Attr)8) this
객체 안에 존재하는 메소드에 존재하는 숨겨진 매개변수
객체 안에 만들어진 메소드에서는 this를 사용할 수 있는데, 객체를 참조한다.
객체 안에 만들어진 메소드에서 속성을 이용할 때는 this.Attr 형식으로 사용해야한다. this를 붙이지 않으면 메소드 안에서 이름을 찾게 된다.
화살표 함수에서는 this를 사용할 수 없다.
9) constructor (생성자)
생성자는 객체를 생성해서 메모리 할당을 하고 그 참조를 리턴하는 함수
일반 함수를 만드는 것과 동일한 방법으로 만든다. 내부에서 this를 이용해 필요한 속성과 메소드를 정의한다.
생성자 호출 : new 생성자이름(변수)
생성자를 만드는 이유는 동일한 속성을 갖는 객체를 여러 개 생성해야 할 때 편의를 위함
class
유사한 모양의 객체를 만들기 위한 템플릿
생성자를 이용해서도 생성이 가능하지만 그럴 경우 객체가 가져야하는 메소드가 많아질수록 가독성이 떨어지게 된다.
ECMA2015(ES6)에서 class 문법을 추가시킴
1) 선언
기본적인 방법
class className
{
context
}상속을 받는 경우
class className extends UpperClass
{
context
}표현식을 이용할 경우
let name = class{class context}
let name = class 내부에서 사용할 이름 {class context}클래스 이름은 일반적으로 첫글자를 대문자로 한다.
2) 클래스를 이용한 객체 생성 - 클래스를 이용해서 생성된 객체를 Instance라고 한다.
var i = 10; // static 영역 사용
var j = new ? (); // heap 영역 사용클래스의 생성자는 이름과 동일하게 만들어지기 때문에, 생성자 대신 클래스 이름을 기재해도 된다.
var/let/const className = new constructor_name(param);new 연산자는 생성자를 호출해서 인스턴스를 Heap에 만들고, 참조를 Return한다.
3) 클래스 안에 member 속성 만들기
method 안에서 this와 이름을 만들면 인스턴스의 속성이 된다.
4) JS에서의 class는 정적이지 않다.
JS에서는 class의 내용을 수정할 수 있다.
class가 prototype이라는 내부 객체를 이용해서 모든 속성을 저장한다.
prototype은 객체이기 때문에, 확장이 가능하다.
클래스는 선언할 때는 없었지만 나중에 추가/변경하고자 하면 ClassName.prototype.attr = context로 class에 속성을 추가하는 것이 가능하다.
5) 이름
JS에서는 변수, 함수, class가 모두 동일한 레벨이다.
기존의 이름에 값이 저장되어 있는데 함수를 대입하면 값은 사라지고 함수의 내용이 저장된다.
6) static
method앞에 static을 붙이면 인스턴스가 아니라 클래스가 호출할 수 있는 속성이 된다.
static이 붙으면 인스턴스가 호출이 불가하다.
인스턴스의 method안에서 static을 호출하는 것은 가능하지만, 반대는 불가하다.
class가 만들어지고나서 인스턴스가 생성되기 때문에 인스턴스 method를 호출하는 시점에서는 class의 내용이 완성이 된 상태이다.
그렇지만 class의 method를 호출하는 시점에서는 인스턴스가 만들어져있는지 확실치 않으므로, 클래스의 method에서 인스턴스의 method를 호출하는 것은 불가하다.
상속
1) 개념
상위 class의 모든 것을 하위 class가 물려받는 것
기본적으로는 class들을 만들다가 중복되는 내용이 나오면 해당 내용을 가지고 상위 class를 가지고 다른 class들에서 상속을 하는 형태를 취하게 된다.
아래에서 위로 상속하는 것. (상속해주는 것이 아닌 상속받는 것)
객체 지향에서는 is a라고 한다.
하나의 클래스 안에 다른 클래스의 인스턴스가 포함되면 has a 라고 한다.
Is - a와 has - a 관계 : https://minusi.tistory.com/entry/%EA%B0%9D%EC%B2%B4-%EC%A7%80%ED%96%A5%EC%A0%81-%EA%B4%80%EC%A0%90%EC%97%90%EC%84%9C%EC%9D%98-has-a%EC%99%80-is-a-%EC%B0%A8%EC%9D%B4%EC%A0%90
is - a는 확장하는 개념, has - a는 일부만 사용하는 개념이다.
has - a는 일반적인 계층 구조라고 인식된다.
2) 상속받는 방법
class className extends upperClass
{
}3) super
하위 class에서 상위 class의 속성을 호출할 때 상위 class 인스턴스를 super라고 한다.
하위 class의 일반 method에서 상위 class에 만들어진 method를 호출하고자 할 때는 super.methodName() 형태로 호출한다.
constructor 안에서 상위 class의 constructor를 호출하고자 하는 경우 super()로 호출한다.
4) method overriding(재정의)
상위 클래스의 method와 동일한 모양의 method를 하위 class에서 재정의하는 것. 목적은 기능 확장이다.
상위 class의 method를 가지고 그대로 사용하는 것이 부족해서 추가하기 위함.
새로운 기능을 만들거라면 overriding을 사용하면 안된다.
Iteration
1) 개념
순차적처리를 위한 것
모든 데이터가 순차적 처리를 할 수 있는 것은 아니고 JS에서는 Iterable 프로토콜과 Iterator 프로토콜을 준수해야 처리가 가능하다.
대표적인 data가 Array(배열)
순차적 처리가 가능한 데이터에는 Symbol.iterator를 생성해야함.
직접 만들고자 할 때는 Generator와 Symbol 내장 객체를 이용
for-of
for - in은 객체나 배열의 모든 속성을 순차적으로 접근위한 명령문
for - of는 순차적 처리가 가능한 데이터를 순회하는 명령문
Destructuring - 구조 분해 할당 / 비구조화 할당
1) 개념
데이터를 나누어서 저장
다른 언어에서는 Tuple이라고 함
2) 배열
순서대로 할당되고 마지막 변수에는 이전에 할당한 것들을 제외한 모든 것들이 할당
3) 인스턴스
변수의 이름과 속성의 이름을 맞추어서 할당
4) 파라미터 설정에도 가능
5) spread 연산 & rest param
구조 분해 할당을 할 때 나머지를 전부 할당하는 연산을 spread라고 하ㅗ 파라미터에 적용하면 rest param이라고 한다.
할당할 변수 앞에 ...을 붙인다.
Exception Handling
1) 용어
error
물리적 에러 : 문법을 잘못써서 실행이 안됨
논리적 에러 : 문법은 맞지만 알고리즘이 틀려서 실행이 안됨
exception(예외)
문법은 맞아서 번역은 되는데 특수한 상황이 발생하여 프로그램이 중단되는 현상
assertion(단언)
에러가 없고, 예외가 발생하는 상황이 아니지만 개발자가 강제로 예외를 발생시켜 프로그램을 중단하는 것
debugging
코드를 잘게 쪼개서 실행시키면서 논리적 에러나 예외 발생 지점을 찾아내는 것
Test
예전에는 테스트를 개발이 종료되고 난 후 하는 경우가 많았는데 최근에는 개발 과정에 테스트를 하기도 한다.
이를 TDD라고 한다.
2) 예외 처리
예외가 발생했을 때 어떻게 할 것인가?
목적 : 예외가 발생하더라도 계속해서 프로그램을 실행시키는 것
예외를 logging(기록)하기 위해서
3) 예외 처리 기본 구조
try
{
예외 발생 가능성이 있는 코드
}
catch (예외처리 변수)
{
예외 발생 시 수행 코드
}
finally
{
예외 발생 여부에 상관없이 수행할 코드
}
}finally는 생략이 가능
예외가 발생하면 예외 객체가 예외처리 변수에 자동으로 대입된다.
언어에 따라서는 catch를 여러 개 만들 수 있는 것도 있고 catch를 생략하고 finally만 적어도 되는 경우가 있다.
JS는 catch를 1개만 작성할 수 있고 catch 대신 finally를 사용할 수 있음
finally에는 대부분의 경우 정리 작업을 수행하는 코드를 작성한다.
4) 예외 객체
예외가 발생했을 때 catch에 전달되는 객체
속성
message : 발생 이유
decription : 설명
name : 이름
5) 강제로 예외 발생
throw 메시지
throw new Error(메시지)
Module Programming
프로그램을 분할해서 작성하는 것
클래스 단위로 분할하는 것이 일반적이지만, 함수 단위로 분할하기도 한다.
1) export
현재 모듈의 내용을 내보내서 외부에서 사용할 수 있게 해주는 기능
export Data 형태로 내보냄
export default 데이터 형태로 내보낼 수 있는대, 1개만 내보내고 싶을 때 이용
하나의 모듈에 하나만 작성되어야함
각자 내보내기
export (값, 함수 ,클래스) 나열
여러개
export{내보내고자 하는 데이터 나열]
2) import
default : import 이름 from 모듈이름
내보낸거 다 가져오기 import 이름 from "모듈 이름"
일부만 가져오기 import {이름} from "모듈이름)
이름을 변경해서 사용 import {이름 as 다른이름} from "모듈이름"
