JavaScript : 참조 자료형
- Function
참조 자료형에 속하며, 모든 함수는 Function object 이다.
- 함수를 정의하는 2가지 방법
선언식 ⇒ 익명 함수 사용이 불가능하고 호이스팅이 발생한다.
표현식 ⇒ 함수 이름이 없는 익명 함수를 사용할 수 있다. 선언식과 달리 표현식으로 정의한 함수는 호이스팅 되지 않으므로 함수를 정의하기 전에 먼저 사용할 수 없다.
- 기본 함수 매개변수
전달하는 인자가 없거나 undefined 가 전달될 경우 이름 붙은 매개변수를 기본값으로 초기화한다.
- 나머지 매개변수
임의의 수의 인자를 배열로 허용하여 가변 인자를 나타낸다.
함수 정의 시 나머지 매개변수는 하나만 작성할 수 있고 함수 정의에서 매개변수 마지막에 위치해야 한다.
- 매개변수와 인자 개수가 불일치할 경우
인자 개수가 부족하면 누락된 인자를 undefined로 할당하고 인자 개수가 많으면 초과 입력된 인자는 사용하지 않는다.
⇒ 파이썬과 달리 에러가 나지 않는다.
- 전개 구문 ‘ … ‘
배열이나 문자열과 같이 반복 가능한 항목을 펼치는 것
배열이나 객체의 요소를 개별적인 값으로 분리하거나 다른 배열이나 객체의 요소를 현재 배열이나 객체에 추가하는 등 전개 대상에 따라 역할이 다르다.
- 화살표 함수 표현식 = 함수 표현식의 간결한 표현법
- function 키워드를 제거하고 매개변수와 중괄호 사이에 ‘⇒’ 작성
- 함수의 매개변수가 하나일 경우 매개변수의 ( ) 를 제거할 수 있다.
- 함수 본문의 표현식이 한 줄일 경우 { } 와 return 을 제거할 수 있다.
인자가 없다면 ( ) 나 _ 로 표시 가능
object 를 반환할 경우 return 을 생략할 수 없다. 굳이 생략하고 싶다면 반환하는 객체를 소괄호로 감싸야 한다.
- Object (객체)
키로 구분된 데이터 집합을 저장하는 자료형
중괄호를 이용해 작성
중괄호 안에는 key : value 쌍으로 구성된 속성을 여러 개 작성할 수 있다.
key는 문자형만 허용하고 value는 모든 자료형이 가능하다.
객체 속성 참조
⇒
점 또는 대괄호로 객체 요소에 접근한다.
key 이름에 띄어쓰기 같은 구분자가 있으면 대괄호 접근만 가능하다.
- in 연산자
속성이 객체에 존재하는지 여부를 확인하여 true / false 를 반환한다.
- Method
객체 속성에 정의된 함수
- ‘this’
함수나 메서드를 호출한 객체를 가리키는 키워드
→ 함수 내에서 객체의 속성 및 메서드에 접근하기 위해 사용한다.
자바 스크립트에서 this는 함수를 호출하는 방법에 따라 가리키는 대상이 달라진다.
호출 위치가 아니라 호출 방법이 중요!!!
- 단순 호출 시에는 전역 객체를 가리킨다.
- 메서드 호출 시에는 메서드를 호출한 객체를 가리킨다.
- JavaScript ‘this’ 정리
자바 스크립트의 모든 함수는 호출될 때 암묵적으로 this 를 전달 받는다.
python 의 self 가 선언 시에 이미 인스턴스 그 자체로 값이 정해지는 것과 달리
이때 this 는 함수가 호출되기 전까지 값이 할당되지 않고 호출 시 함수가 호출되는 방식에 따라 값이 결정된다. (동적 할당)
- 추가 객체 문법
- 단축 속성 키 이름과 value 값으로 쓰이는 변수 이름이 같으면 key-value 를 합쳐서 한번만 쓰는 단축 구문을 사용할 수 있다.
- 단축 메서드 메서드 선언 시 function 키워드 생략이 가능하다.
- 계산된 속성 key가 대괄호로 둘러싸여 있는 속성, 고정된 값이 아닌 변수 값으로 사용할 수 있다.
- 구조 분해 할당 배열 또는 객체를 분해하여 객체 속성을 변수에 쉽게 할당할 수 있는 문법
- 전개 구문 객체 내부에서 다른 객체를 복사하여 전개할 수 있다.
- object.keys() , object.values()
- optional chaining (?.) 속성이 없는 중첩 객체를 에러 없이 접근할 수 있는 방법 참조를 시도하는 속성이 null 또는 undefined 일 경우 에러가 발생하는 대신 평가를 멈추고 undefined 를 반환한다. ?. 대신 && 연산자를 사용할 수도 있다. optional chaining 앞의 변수는 반드시 선언되어 있어야 한다.
- JSON ( = JavaScript Object Notation )
key-value 형태로 이루어진 자료 표기법
자바 스크립트의 object 와 유사한 구조를 갖고 있지만 json 은 형식이 있는 문자열이다.
자바 스크립트에서 json 을 사용하기 위해서는 object 자료형으로 변경해야 한다.
- new
동일한 형태의 객체를 만들 때 사용한다.
⇒ new constructor( arguments )
- Array
순서가 있는 데이터 집합을 저장하는 자료 구조
객체에 순서가 추가된 것
대괄호를 이용하여 작성하고 요소 자료형에 제약이 없다.
length 속성을 사용하여 배열에 담긴 요소가 몇 개인지 알 수 있다.
배열 메서드
⇒
push( ) : 배열 끝에 요소를 추가
pop( ) : 배열 끝 요소를 제거하고 제거한 요소를 반환
unshift( ) : 배열 앞에 요소를 추가
shift( ) : 배열 앞 요소를 제거하고 제거한 요소를 반환
- Array Helper Methods
배열 조작을 보다 쉽게 수행할 수 있는 특별한 메서드 모음
배열의 각 요소를 순회하며 각 요소에 대해 콜백 함수를 호출한다.
메서드 호출 시 인자로 콜백 함수를 받는 것이 특징이다.
- 콜백 함수
다른 함수에 인자로 전달되는 함수
외부 함수 내에서 호출되어 일종의 루틴이나 특정 작업을 진행한다.
- forEach( )
배열의 각 요소를 반복하며 모든 요소에 대해 콜백 함수를 호출한다.
반환 값이 없다. (undefined)
- map( )
배열의 모든 요소에 대해 콜백 함수를 호출하고 반환된 호출 결과 값을 모아 새로운 배열을 반환한다.
forEach( ) 와 동작 원리가 같지만 그와 달리 새로운 배열을 반환하고 있다.
- 배열 순회 종합
for loop : 배열의 인덱스를 이용하여 각 요소에 접근한다. break, continue 사용 가능
for … of : 배열 요소에 바로 접근한다. break, continue 사용 가능
forEach : 간결하고 가독성이 높다. callback 함수를 이용하여 각 요소를 조작하기 용이하다. break, continue 사용이 불가능하다.
- 기타 Array Helper Methods
filter : 콜백 함수의 반환 값이 참인 요소들만 모아서 새로운 배열을 반환
find : 콜백 함수의 반환 값이 참이면 해당 요소를 반환
some : 배열의 요소 중 하나라도 콜백 함수를 통과하면 true를 반환하며 즉시 배열 순회를 중지한다. 모두 통과하지 못하면 false 를 반환
every : 배열의 모든 요소가 콜백 함수를 통과하면 true를 반환한다. 하나라도 통과하지 못하면 즉시 false를 반환하고 배열 순회를 중지한다.
- 배열과 객체
배열도 키와 속성들을 담고 있는 참조 타입의 객체이다.
배열의 요소를 대괄호 접근법을 사용해 접근하는 건 객체 문법과 같다.
숫자형 키를 사용함으로써 배열은 객체 기본 기능 이외에도 순서가 있는 컬렉션을 제어하게 해주는 특별한 메서드를 제공하는 셈이다.
⇒ 배열은 인덱스를 키로 가지며 length 속성을 갖는 특수한 객체이다.