1. 배열 내장 함수

  • forEach()

forEach() : forEach 내장함수에 파라미터로 전달하는 콜백 함수를 해당 배열내에 존재하는 하나하나의 요소들에 대해 실행한다고 보면 된다.

사용 예제(화살표 함수):

사용 예제(화살표 함수):

  • map()

map() : map 메소드는 forEach문과 다르게 각각의 요소들을 반복하지만, 각각에 대해 return을 시킬 수 있다. 또한 return시킨 요소들을 모아서 새로운 배열형태로 반환해준다.

사용 예제(화살표 함수):

  • includes()

includes() : includes 메소드는 파라미터로 받은 값이 해당 배열내에 존재하는 값인지 확인하고 boolean 형태로 true나 false 값을 반환시켜준다.

사용 예제:

  • indexOf()

indexOf() : indexOf 메소드는 파라미터로 받은 값이 해당 배열내에 몇번 째 인덱스에 위치해 있는지 확인하고 정수형으로 반환해준다. 다만, 해당 값이 배열내에 존재하지 않을 경우에는 -1값을 인덱스 번호로 반환한다.

사용 예제:

  • findIndex() / find()

findIndex() : findIndex 메소드 안에 파라미터 값으로 콜백 함수를 넣어서 사용한다. 콜백 함수 내부에 지정한 변수명으로 프로퍼티가 하나씩 들어오게 되고, 해당 변수명.~으로 접근해서 사용한다.

사용 예제:

코드 예제:

arr.findIndex(item => {
	return item.프로퍼티명 === "a";
})

: 배열 arr에서 프로퍼티명 값이 a인 녀석을 찾아서, 해당 인덱스 값을 반환해준다.

find() : find 메소드와 findIndex 메소드는 결국 전달하는 콜백 함수는 똑같다. 콜백 함수내의 조건을 만족하는 첫 번째 요소를 반환한다. find()를 사용하게 되면 조건을 만족하는 첫 번째 요소 자체를 반환하고, findIndex()를 사용하게 되면 조건을 만족하는 첫 번째 요소의 인덱스를 반환하는 차이이다.

  • filter()

filter() : filter 메소드는 파라미터로 전달한 콜백 함수가 true값을 반환하는 모든 요소를 배열 형태로 반환시켜준다. 즉, 말 그대로 특정 조건으로 필터링을 하고 싶은 배열이 있을 때 사용하기 유용한 친구이다.

사용 예제:

  • slice()

slice() : slice 메소드는 파라미터로 전달한 두 개의 숫자 값 (begin, end)을 기준으로 배열을 잘라서 반환해주는 메소드이다. begin번째부터 end - 1번까지가 잘라서 반환되는 배열의 값이 된다.

사용 예제:

  • concat()

concat() : concat 메소드는 파라미터로 전달한 배열과 target.concat에서 target 배열을 합쳐서 리턴시켜주는 메소드이다.

사용 예제:

  • sort()

sort() : sort 메소드는 파라미터로 값을 전달하지 않고, target.sort에서 target 배열을 정렬시켜주는 메소드이다. 리턴값으로 반환하지 않고, 원본 배열 target 자체를 정렬시킨 상태로 바꾸는 것이 특징이다. 다만, 숫자를 기준으로 정렬하는 것이 아니라, 문자를 기준으로 정렬하기 때문에 숫자 배열 정렬의 경우 비교함수를 직접 만들어서 넣어주면 된다.

사용 예제(문자열 정렬):

사용 예제(숫자형 정렬):

: 여기서 return 1의 의미는 a를 b보다 배열 순서상 더 뒤로 보내겠다는 의미이고, return -1의 의미는 앞에 두겠다는 의미이다. (음수가 나오면 a가 앞으로 가고, 양수가 나오면 뒤로 간다) 0은 자리를 유지한다는 의미. 따라서, 오름차순이 아닌 내림차순으로 하고 싶으면 리턴값 1과 -1을 각각 반대의 조건문에 넣어주면 된다. (원리만 알면 비교함수를 직접 제작해서 사용할 수 있다)

  • join()

join() : join 메소드는 배열내의 모든 요소를 하나의 문자열 형태로 합치는 메소드이다. 파라미터 값을 넘기지 않는 경우에는 각각의 요소들 사이에 쉼표가 기본값으로 먹여진다. 쉼표가 싫다면 파라미터 안에 문자열로 공백을 만들어 넣어준다던가 다른 값으로 대체해서 요소들 사이에 삽입시켜줄 수 있다.

사용 예제:

2. Truthy & Falsy

  • Truthy & Falsy?

: 자바스크립트에는 boolean 값을 넣지 않아도 참이나 거짓으로 인식이 되는 속성이 있다. (true나 false는 아니지만, true나 false처럼 인식하고 동작하는 느낌)

Truthy case: 빈 배열, 빈 객체 등등 객체 리터럴 값을 직접 할당하는 경우에는 참으로 인식 / 평가한다. (Infinity, 문자열, 빈 배열, 빈 객체, 중괄호, 대괄호 등등)

Falsy case: null, undefined, 숫자 0(문자열 아님)과 숫자 -0, NaN, "" (빈 문자열).

사용 예제:

: falsy 속성을 이용하면 위의 코드처럼 하나씩 전부 따로 예외처리 하지 않아도 보다 쉽고 간결하게 처리가 가능하다.

3. 삼항 연산자

  • 항이 세 개인 연산자?

: 삼항 연산자는 조건에 대해 true / false 일때 수행할 동작이 나누어지면 보다 간결하게 사용할 수 있다.

사용 예제(올 바른 예제):

사용 예제(부적합한 예제):

: 삼항 연산자를 중첩으로 여러겹 사용할 경우 가독성이 많이 떨어지기 때문에, 가급적이면 이럴 때는 if 문을 통해서 코딩하는 것이 바람직하다.


if문 사용 예제(부적합한 예제를 바람직한 예제로 ):

4. 단락 회로 평가

  • '&&' and 연산자, '||' or 연산자, '!' not 연산자

: 단락 회로 평가는 왼쪽에서 오른쪽으로 연산하는 연산 순서를 이용하는 문법이다.

: && (and) 연산자

and 연산자를 예시로 들어보자. 두 개의 피연산자 중에 앞에 존재하는 피연산자가 false일 경우에는 뒤에 위치하는 피연산자를 확인할 필요가 없기 때문에 굳이 확인하지 않고 연산을 끝내버리는 것이 바로 단락 회로 평가인 것이다.

: || (or) 연산자

or 연산자에서도 마찬가지로 앞 부분에 오는 피연산자가 true 값일 경우에 뒤의 피연산자를 굳이 살펴보지 않고, 바로 연산을 종료시킬 수 있다.

사용 예제 01:

: 예제에서 2번째 줄 return 문을 살펴보면 조건문으로 따로 처리한 것도 아닌데, 알아서 person이 언디 값이 되니까 false로 인식되고 (falsy 속성), person에서 뒤에 부분까지 연산되지 않고 종료되기 때문에 리턴값으로 person.name값이 아닌 언디가 돌아간다.


사용 예제 02:

: 단락 회로 평가를 사용하지 않고, if문 + falsy 속성을 이용해 작성했던 코드를 단락 회로 평가 + falsy를 사용해서 구현해보자.

: 2번째 줄 코드를 보면 name이라는 변수를 만들어서 && 연산자를 통해 해당 값이 unde, null 혹은 제대로 된 값인지를 넣어두고, 3번째 줄에서 || 연산자를 통해 해당 값이 존재하면 (truthy 속성 이용), 해당 값을 반환 그렇지 않으면 (falsy -> false) 뒤에 있는 문자열을 반환해서 최종적으로 사용자에게는 if 문으로 구현했던 내용이 (if문 구현 -> 단락 회로 평가를 통해 구현되어) 그대로 출력된다.

5. 조건문 업그레이드

  •  배열과 객체를 사용한 조건 처리

: if 문이나 switch 문으로 모든 조건에 대해 하나하나 처리하기 어려운 경우에는 배열과 배열의 내장 함수 'includes'를 활용해서 처리하면 훨씬 간결하고 효율적으로 진행할 수 있다. 코드 예제를 보며 살펴보자.

사용 예제:

: 위와 같은 코드를 배열과 객체를 사용해서 보다 간결한 코드로 처리해보자.

6. 비 구조화 할당

  •  배열과 객체를 우아하게 사용하는 방법

: 비 구조화 할당은 보다 코드를 간결하고 깔끔하게 처리할 수 있게 해주는 문법이다. 대괄호를 이용해서 배열의 값을 순서대로 할당받아서 사용할 수 있는 방법을 배열의 비구조화 할당이라고 한다. 아래 예제를 통해 살펴보자.

사용 예제(기존 코드):

사용 예제(비구조화 할당을 통한 코드 구현):

: 배열의 기본 변수 비구조화 할당 구현 코드.

: 배열의 선언 분리 비구조화 할당 구현 코드.

  •  '배열'의 비구조화 할당을 활용한 swap 구현.

: swap 예시 기존 코드.

: 비구조화 할당을 활용한 swap 코드 구현.

  •  '객체'에 비구조화 할당을 활용한 예시.

사용 예제(일반적인 변수에 객체 속 값을 할당하는 코드):

사용 예제(비 구조화 할당을 통해 단순 반복 노동을 최적화 시킨 예제):

: 객체의 비구조화 할당은 배열처럼 인덱스, 즉 '순서'가 아니라 '키'값을 기준으로 할당을 한다. 따라서 할당을 할 때 순서가 크게 상관이 없다.

: 객체의 비구조화 할당에서도 배열처럼 기본값, 즉 default 값을 선언 및 사용할 수 있다. 또한 배열과 다르게 순서가 아닌 키 값을 기준으로 할당하기 때문에 키 값을 통해 미리 선언해주기만 한다면, 변수명은 키 값이랑 다른 임의의 명의여도 상관이 없다.

7. Spread 연산자

  •  배열과 객체를 한줄로 펼치는 방법.

: 여러 객체들 중에 겹치는 부분이나 한 객체가 다른 한 객체의 교집합인 경우가 있다면, spread 연산자를 이용해서 보다 간결하게 코드를 작성할 수 있다.

사용 예제(객체 예제):

: spread 연산자는 객체 말고도, 배열에도 똑같이 적용시켜서 사용할 수 있다.

사용 예제(객체 예제):

8. 동기 & 비동기

  •  순서를 실행하는 것과 그렇지 않은 것들.

: Thread에서 작업 하나를 수행하고 있을 때, 다른 작업을 동시에 할 수 없는 방식을 '블로킹 방식'이라고 한다.

: 동기처리 방식의 문제점은 테스크들이 전체적으로 가볍고 처리 시간이 짧은 친구들일땐 큰 문제가 되지 않지만, 테스크 단위들이 무거워지고 테스크들을 처리하는데 시간이 오래걸릴수록 효율성과 처리속도의 문제가 심각해진다.

: 그래서 필요한게 멀티 쓰레드 / 비동기 처리 방식이다.

: 따라서, 일꾼, 즉 스레드를 여러 친구 두고 작업을 진행하면 마치 직렬 / 병렬 처리처럼 작업을 보다 효율적으로 진행할 수 있다.

: 다만, 자바스크립트 언어에서는 이처럼 다중으로 스레드를 두고 동시에 여러가지를 처리할 수 없기 때문에 필요한 것이 바로

: '비동기 작업' 이다.

: 콜백 함수를 각각 task에 붙여서 해당 작업을 끝내면 '무엇무엇'을 하라는 지시사항을 체크 포인트를 만들어서 해당 테스크가 끝난 시점들에 대해 체킹이 가능하다.

: 이런식으로 테스크별로 비동기 처리 작업을 했을 때, 싱글 스레드 작업 처리 방식인데도 병렬 식으로 처리해서 하나의 스레드에서도 동시에 작업 수행을 가능하게 할 수 있고, 이를 체크 한 예제이다.

: 자바스크립트는 동작을 처리할 수 있는 콜 스택이 하나이기 때문에 싱글 스레드 언어이다. 그렇다면 자바스크립트는 싱글 스레드를 가지고 동작하는데 어떻게 비동기 방식으로 동시에 여러 테스크를 처리할 수 있는 것일까?

: 왼쪽 function asyncAdd라는 함수를 보면 비동기로 동작하는 코드인데, 해당 코드를 실행할 때 웹 에이피아이와 콜백 큐라는 자바스크립트 엔진 외적인 새로운 친구들이 등장한다.

사용 예제(기존 코드):

9 . Promise

  •  콜백 지옥에서 우리를 구원하다.

: 프로미스는 비동기를 돕는 객체이다. 프로미스 객체를 이용하면, 비동기 처리의 결과값을 핸들링 하는 코드를 비동기 함수로부터 분리할 수가 있어진다. 즉, 더 이상 비동기 처리 함수에 콜백을 줄 지어 전달할 필요가 없어서 더 쉽고, 빠르고, 직관적으로 비동기 처리를 만들 수가 있어진다.

  1. Pending(대기 상태) : 대기 상태로, 현재 비동기 작업이 진행중이거나 작업을 당장 시작할 수 없는 문제가 발생했음을 의미한다.

2: Fulfilled(성공) : 이행 또는 성공 상태로 비동기 작업이 의도한대로 정상적으로 완성된 상태를 의미한다.

3: Rejected(실패) : 거절 또는 실패 상태로 비동기 작업이 모종의 이유로 인해서 실패했음을 의미한다. (서버가 응답을 하지 않는다거나, 시간이 너무 오래걸려서 자동으로 취소되는 등의 사례가 해당된다)

: 비동기 작업은 한번 성공하거나 실패하면 그걸로 테스크가 끝난다고 이해하면 된다.

: pending -> fulfiled로 상태가 변화하는 과정은 'resolved',
: pending -> rejected로 상태가 변화하는 과정은 'reject'이다.

사용 예제(일반적인 비동기 처리 코드):

: 사용자에게 입력 받은 값이 정수형인지 아닌지를 체크해주고, 수행이 성공했는지 실패했는지, 제대로 된 숫자형 입력값이면 양수인지 음수인지 실행 결과값을 알려주는 코드이다.

: 같은 수행을 동작하는 코드를 Promise 객체를 활용해서 만들어보자.

사용 예제(promise 객체를 활용한 비동기 처리 코드):

profile
RM_young

0개의 댓글