Javascript 유용한 Tip

1. Truthy 값과 Falsy 값

 -> Javascript는 엄격한 자료형을 따지지 않는 느슨한 언어이기 때문에 어떤 값들은  true, false 같은 Boolean 자료형이 아니더라도 마치 true, false인 것처럼 인식되는 값이다. 이는 프로젝트를 통해서 어떤 변수의 존재 유무를 별도의 메서드를 사용하지 않고도 손쉽게 쓸 수 있어서 유용하게 사용할 수 있었다.

1.1 Truthy 값

• true
• 0 보다 큰 숫자
• '0' 과 같은 비어있지 않은 문자열
• []와 같은 빈 배열
• {}와 같은 빈 오브젝트
• function() {} 와 같은 빈 함수

 1.2 Falsy 값

•  false
• 숫자 0
• '' 와 같은 빈 문자열
• null
• undefined
• NaN

 

2. 배열 메서드

 2.1 forEach

• 설명: 배열의 원소들을 하나씩 순회하는 메서드이다.
• 매개변수: 현재원소, 현재인덱스(Optional), 전체배열(Optional)
• 리턴값: undefined

 2.2 map

• 설명: forEach와 마찬가지로 배열을 순회하는 메서드이지만 map에서는 새로운 배열을 리턴한다. 콜백 함수에서 조건에 맞지 않아도 undefined로 채워져서 항상 원본 배열의 길이와 같다.
• 매개변수: 현재원소, 현재인덱스(Optional), 전체배열(Optional)
• 리턴값: 각 요소에 대해 실행한 callback의 결과를 모은 새로운 배열(항상 원본 배열의 길이와 같다)

 2.3 filter

• 설명: 테스트를 통과한 요소로 이루어진 새로운 배열을 반환하는 함수
• 매개변수: 현재원소, 현재인덱스(Optional), 전체배열(Optional)
• 리턴값: 테스트를 통과한 요소로 이루어진 새로운 배열. 어떤 요소도 테스트를 통과하지 못했으면 빈 배열을 리턴한다.

 2.4 every

• 설명: 배열 안의 모든 요소가 주어진 판별 함수를 통과하는지 테스트한다. 즉, 주어진 콜백 함수의 테스트가 모두 통과 되었다면 true를 반환하고 단 하나라도 테스트를 통과하지 못했다면 false를 반환한다. 따라서 유효성 검사에서 굉장히 자주 사용되는 함수이다.
• 매개변수: 현재원소, 현재인덱스(Optional), 전체배열(Optional)
• 리턴값: Boolean(모든 배열 요소에 대해 참이면 true, 아니면 false)

 2.5 some

• 설명: 배열 안의 어떤 요소라도 주어진 판별 함수를 통과하는지 테스트한다.
• 매개변수: 현재원소, 현재인덱스(Optional), 전체배열(Optional)
• 리턴값: Boolean(어떤 배열 요소에 대해 참이면 true, 아니면 false)

※ 여기서 some과 every의 차이는 some은 모든 원소 중 하나라도 조건에 일치하면 true, every는 모든 원소가 일치해야 true 이다.

 2.6 reduce

• 설명: 배열의 각 요소에 대해 주어진 reducer 함수를 실행하고, 하나의 결과 값을 반환한다.
• 매개변수: 누산기, 현재값, 현재인덱스(Optional), 전체배열(Optional)
• 리턴값: 누적 계산의 결과값

 2.7 find

•  설명: 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환하고 요소가 없다면 undefined를 반환한다.
• 매개변수: 현재원소, 현재인덱스(Optional), 전체배열(Optional)
• 리턴값: 주어진 판별 함수를 만족하는 첫 번째 요소 값. 그 외에는 undefined

 2.8 findIndex

•  설명: 주어진 판별함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환한다. 만족하는 요소가 없으면 -1을 반환한다.
• 매개변수: 현재원소, 현재인덱스(Optional), 전체배열(Optional)
• 리턴값: 주어진 반별함수를 만족하는 요소의 인덱스. 만족하는 요소가 없으면 -1

 2.9 includes

• 설명: 배열이 특정 요소를 포함하고 있는지 판별합니다. 즉, 배열 안에 해당 원소가 존재하는지에 대한 여부만 반환한다.
• 매개변수: 탐색할요소, 탐색을 시작할 인덱스(Optional)
• 리턴값: Boolean

 

3. 객체 메서드

 3.1 Object.assign

• 설명: 타킷 객체와 소스 객체들을 병합하는 메서드이다. 첫 번째 인자는 합쳐질 대상이 될 객체이며 그 후의 인자들은 합쳐질 재료가 될 소스 객체이다. 객체간 중복되는 속성은 가장 마지막에 있는 소스 객체 속성의 값으로 대체한다.
• 매개변수: 대상객체, 소스객체
• 반환값: 중복된 속성 값은 소스 객체 속성 값으로 대체된 최종 객체

 3.2 Object.keys(대상 객체), Object.values(대상 객체)

•  Keys 메서드는 객체가 가지고 있는 속성의 키들을 배열로 반환하는 메서드이고, values 메서드는 객체가 가지고 있는 속성의 값을 배열로 반환하는 메서드이다.

 3.3 Object.freeze

•  설명: 객체를 동결한다. 동결된 객체는 더 이상 변경될 수 없다. 즉, 동결된 객체는 새로운 속성을 추가하거나 존재하는 속성을 제거하는 것을 방지하며 존재하는 속성의 불변성, 변경되는 것을 방지하고, 존재하는 속성의 값이 변경되는 것도 방지한다. 또한, 동결 객체는 그 프로토타입이 변경되는 것도 방지한다.
• 매개변수: 동결할 객체
• 반환값: 함수로 전달된 객체

 

4. Javascript Import, Export

 import 구문은 자바스크립트의 모듈을 불러오는 문법으로 기본 사용법은 "import 가져올 객체이름 from 모듈이름 or 파일명" 형태로 작성한다. import 구문을 통해 추출된 물리적으로 분리된 파일 혹은 외부 모듈을 가져올 수 있다.

import '가져올 객체이름' from '모듈 이름 혹은 파일명' 과 같은 경우 '가져올 객체이름'은 '모듈 혹은 파일명'에서 추출된 모듈의 모든 멤버를 받아온다. 모든 멤버를 받아오기 위한 전제 조건은 해당 모듈에서 'default' 파라미터를 통해 모듈을 보내야 한다.

 export 구문은 Javascript 모듈을 내보낼 때 사용된다. export 구문을 이용하여 Javascript 모듈을 내보낼 때는

 1) default 파라미터를 입력해주는 방법

 2) 변수 이름으로 내보내는 방법

이 존재하고 하나의 모듈에서 여러 개의 변수 이름은 내보낼 수 있지만 default 파라미터는 하나만 가능하다.

 

export let a = 'abc' 라는 소스를 갖는 Javascript 가 있다면

사용할 때는 import { a } from '모듈 이름' 와 같이 내보낸 변수의 이름과 동일한 변수 이름으로 사용할 수 있다.