[JavaScripts] 함수, Array, 객체

함수

• 참조 타입 중 하나로써 function타입에 속한다.
• 함수 선언식과 함수표현식 2가지로 구분된다.
• 기본 인자(Default arguments)
• 인자 작성시 '=' 문자 뒤 기본 인자 선언이 가능하다.
• 매개변수와 인자의 개수 불일치를 허용한다.

• Spread syntax(...)/ 전개구문
• 전개 구문을 사용하면 배열이나 문자열과 같이 반복 가능한 객체를
  배열의 경우는 요소, 함수의 경우는 인자로 확장할 수 있다.
• 배열과의 사용(배열 복사)

• 함수와의 사용(Rest parameters) - 정해지지 않은 수의 매개변수를 배열로 받을 수 있다

선언식과 표현식

• 함수의 타입

• 호이스팅- 선언식
• 함수 선언식으로 정의한 함수는 var로 정의한 변수처럼 호이스팅이 발생한다.
• 즉, 함수 호출 이후에 선언해도 동작한다.
• 호이스팅 - 표현식
• 함수 표현식으로 선언한 함수는 함수 정의 전에 호출 시 에러가 발생한다.
• 함수 표현식으로 정의된 함수는 변수로 평가되어 변수의 scope규칙을 따른다.
• 선언식보다는 표현식을 사용하는걸 권장한다.

Arros Fucntion

• =>를 이용해 함수를 비교적 간결하게 정의할 수 있는 문법이다.
• 규칙
• function 키워드 생략이 가능하다.
• 함수의 매개변수가 하나 뿐이라면 매개변수의 '()" 생략이 가능하다.
• 함수의 내용이 한 줄이라면 '{}'와 'return'도 생략이 가능하다.
• 화살표 함수는 항상 익명함수이므로, 함수 표현식에서만 사용이 가능하다.

this

• 어떠한 object를 가리키는 키워드 이다.
• 함수는 호출될 때 this를 암묵적으로 전달 받는다.
• 해당 함수 호출 방식에 따라 this에 바인딩 되는 객체가 달라진다.
• 함수를 선언할 떄 this에 객체가 결정되는 것이 아니고,
  함수를 호출할 때 함수가 어떻게 호출 되었는지에 따라 동적으로 결정된다.

전역 문맥에서의 this

• 브라우저의 전역 객체인 window를 가리킨다.
• 전역객체는 모든 객체의 유일한 최상위 객체를 의미한다.
• console.log(this) // window

함수 문맥에서의 this

• 함수 내부에서 this의 값은 함수를 호출한 방법에 의해 좌우된다.

단순 호출

• 전역객체를 가리키며, 브라우저에서 전역은 window를 의미한다.


Method(function in objecs, 객체의 메서드로서)

• 메서드로 선언하고 호출한다면, 객체의 메서드이므로 해당 객체가 바인딩


Nested

1. Function키워드
• forEach의 콜백함수에서의 this가 메서드의 객체를 가리키지 못하고 전역 객체 window를 가리킨다.
• 단순호출방식으로 사용되었기 때문이다.
• 이를 해결하기 위해 등장한 함수 표현식이 바로 '화살표 함수'이다.

2. 화살표 함수
• 일반 function 키워드와 달리 메서드의 객체를 잘 가리킨다.
• 화살표 함수에서 this는 자신을 감싼 정적 범위
• 자동으로 한 단계 상위의 scope의 context를 바인딩

• 화살표 함수는 호출의 위치와 상관없이 상위 스코프를 가리킨다.(Lexical scope this)
• Lexical scope
• 함수를 어디서 호출하는지가 아니라 어디에 선언하였는지에 따라 결정
• Static scpoe라고도 하며, 대부분의 프로그래밍 언어에서 따르는 방식이다.
• 함수 내의 함수에서도 화살표 함수를 사용하는것을 권장한다.

• 함수(Method)를 하나만 만들어 여러 객체에서 재사용할 수 있다는 것은 장점이지만,
  이런 유연함이 실수로 이어질 수 있다는 단점도 가지고 있다.

Array

• 키와 속성들을 담고 있는 참조 타입의 객체
• 순서를 보장하는 특징을 가지고 있다.
• 주로 대괄호 '[]'를 이용하여 생성하고, 0을 포함한 양의 정수 인덱스로 특정 값에 접근이 가능하다.

Array 메서드 기초

• reverse - 원본 배열의 요소들의 순서를 반대로 정렬해준다.
• push & pop - 배열의 가장 뒤에 요소를 추가 또는 제거한다.
• unshift & shift - 배열의 가장 앞에 요소를 추가 또는 제거한다.
• includes - 배열에 특정 값이 존재하는 판별 후 참/거짓을 반환한다.
• indexOf - 배열에 특정 값이 존재하는지 판별 후 인덱스를 반환하다.(요소가 없을 경우 -1반환)

Array 메서드 심화

• 배열을 순회하면 특정 로직을 수행하는 메서드로, 메서드 호출 시 인자로 callback함수를 받는것이 특징이다.
• callback함수란 어떤 함수의 내부에서 실행될 목적으로 인자로 넘겨받는 함수이다.

forEach - 배열의 각 요소에 대해 콜백 함수를 한 번씩 실행한다.(반환 값은 없다.)

• array.forEach(callback(element[, index[,array]]))
• 인자로 주어지는 함수(콜백 함수)를 배열의 각 요소에 대해 한 번씩 실행한다.
• element : 배열의 요소, index : 배열 요소의 인덱스, array : 배열 자체


map - 콜백 함수의 반환 값을 요소로 하는 새로운 배열을 반환한다.

• array.map(callback(element[, index[, array]]))
• 배열의 각 요소에 대해 콜백 함수를 한 번씩 실행
• 콜백 함수의 반환 값을 요소로 하는 새로운 배열을 반환한다.
• 기존 배열 전체를 다른 형태로 바꿀 떄 유용하다.
• forEach + return


filter - 콜백 함수의 반환 값이 참인 요소들만 모아서 새로운 배열을 반환한다.

• array.filter(callback(element[, index[, array]]))
• 배열의 각 요소에 대해 콜백 함수를 한 번씩 실행한다.
• 콜백 함수의 반환 값이 true인 요소들만 모아서 새로운 배열을 반환한다.
• 기존 배열의 요소들을 필터링할 때 유요하다.


reduce - 콜백 함수의 반환 값들을 하나의 값(acc)에 누적 후 반환한다.

• array.reduce(callback(acc, element, [index[, array]])[, initialValue])
• 인자로 주어지는 함수(콜백 함수)를 배열의 각 요소에 대해 한 번씩 실행해서, 하나의 결과 값을 반환한다.
• 배열을 하나의 값으로 계산하는 동작이 필요할 떄 사용한다(총합, 평균 등)
• map, filter 등 여러 배열 메서드 동작을 대부분 대체할 수 있다.
• acc - 이전 callback함수의 반환 값이 누적되는 변수
• initialValue(optional) - 최초 callback 함수 호출 시 acc에 할당되는 값, default 값은 배열의 첫 번째 값
  빈 배열의 경우 initialValue를 제공하지 않으면 에러가 발생한다.


find - 콜백 함수의 반환 값이 참이면 해당 요소를 반환한다.

• array.find(callback(element[, index[, array]]))
• 배열의 각 요소에 대해 콜백 함수를 한 번씩 실행한다.
• 콜백 함수의 반환 값이 true면, 조건을 만족하는 첫번째 요소를 반환한다.
• 찾는 값이 배열에 없으면 undefined를 반환한다.


some - 배열의 요소 중 하나라도 판별 함수를 통과하면 참을 반환한다.

• array.some(callback(element[, index[, array]]))
• 배열의 요소 중 하나라도 주어진 판별 함수를 통과하면 true를 반환한다.
• 모든 요소가 통과하지 못하면 거짓을 반환한다.
• 빈 배열은 항상 false를 반환한다.


every - 배열의 모든 요소가 판별 함수를 통과하면 참을 반환한다.

• array.every(callback(element[, index[, array]]))
• 배열의 모든 요소가 주어진 판별 함수를 통과하면 true를 반환한다.
• 하나의 요소라도 통과하지 못하면 false를 반환한다.
• 빈 배열은 항상 true를 반환한다.


Callback Fucntion(콜백 함수)

• 다른 함수의 인자로 전달되는 함수를 뜻한다.

객체(Object)

• 객체는 속성(property)의 집합이며, 중괄호 내부에 key와 value의 쌍으로 표현한다.

key

• 문자열 타입만 가능하다.
• key이름에 띄어쓰기 등의 구분자가 있으면 따옴표로 묶어서 표현한다.

value

• 모든 타입(함수포함)이 가능하다.

객체 요소 접근

• 점(.) 또는 대괄호[]로 가능하다.
• key 이름에 띄어쓰기 같은 구분자가 있으면 대괄호가 접근만 가능하다.


생성자 함수

• 동일한 구조의 객체를 여러개 만들 때 사용한다.
• new연산자로 사용하는 함수
• 함수 이름은 반드시 대문자로 시작해야한다.


객체 관련 문법

1. 속성명 축약
• 객체를 정의할 때 key와 할당하는 변수의 이름이 같으면 예시와 같이 축약이 가능하다.

2. 메서드명 축약
• 메서드 선언 시 function 키워드 생략이 가능하다.

3. 계산된 속성
• 객체를 정의할 떄 key의 이름을 표현식을 이용하여 동적으로 생성 가능하다.

4. 구조 분해 할당
• 배열 또는 객체를 분해하여 속성을 변수에 쉽게 할당할 수 있는 문법이다.

5. Spread syntax(...)
• 배열과 마찬가지로 전개구문을 사용해 객체 내부에서 객체 전개가 가능하다.
• 얕은 복사에 활용이 가능하다.
6. JSON
7. Key - Value 형태로 이루어진 데이터오브젝트를 전달하기 위해, 인간이 읽을 수 있는 텍스트 형식의 개방형 데이터 포멧이다.
8. JavaScript의 Object의 유사한 구조를 가지고 있지만 Object는 그 자체로 타입이고, JSON은 형식이 있는 문자열이다.
9. JSON을 Object로 사용하기 위해서는 변환 작업이 필요하다.

참고

this MDN

this poiemaweb