[TIL]Day 15. JS 정리(2)

이번 포스팅에서는 JS와 관련된 기초 개념들을 정리해보는 시간을 가져보도록 하겠습니다.

 

1. scope

 

-scope는 변수가 선언되고 사용될 수 있는 범위를 의미합니다.

 

-scope와 관련된 용어들은 다음과 같습니다.

• block: 하나의 함수, 혹은 기능이 작용하는 범위를 의미합니다.

• global scope: 전역 범위. 활동 범위가 코드 전체로 할당되어 있는 것을 말합니다.

• global variable: 전역 변수. 변수의 활용 범위가 코드 전체로 할당되어 있는 것을 말한다.

• block scope: 구역 범위. 함수 혹은 변수의 범위가 특정 구역으로 한정되어 있는 것을 말합니다.

• local variable: 지역 변수. 변수의 활용범위가 block 단위로 정해져 있는 것을 말합니다.

• scope pollution: 변수의 scope가 중첩되어 오류 또는 의도치 않은 상황을 일으키는 것을 말합니다.

 

2. class

 

-class는 JS에서 설계도와 같은 역할을 합니다. 

 

-class는 특정 목적을 위해 만들어진 변수와 함수들을 한데 묶어 특정 기능을 하는 묶음을 의미합니다.(ex- 사이드바의 기능 만들기) 

 

-생성자(Constructor)

생성자는 객체를 만드는 역할을 하는 함수 입니다.

class를 통해 생성된 객체를 인스턴스라고 부릅니다.

class는 새로운 instance를 생성할 때마다 constructor()메서드를 호출합니다.

 

 

-인스턴스(Instance)

인스턴스(Instance)는 class를 통해 생성된 객체입니다.

인스턴스는 class의 property이름과 method를 갖는 객체입니다.

인스턴스 마다 모두 다른 property 값을 갖고 있습니다.

 

 

-메서드(Methods)

메서드는 함수입니다.

그런데 객체가 프로퍼티 값으로 갖고 있는 것을 메서드라고 부릅니다.

Class의 method는 Object(객체)의 문법과 똑같습니다.

다만 객체는 프로퍼티마다 comma(,)로 구분해줘야 했지만, 클래스는 그렇지 않습니다.

 

 

 

3. object

-접근은 dot(.)으로 접근하는 방법과, [] 대괄호로 접근하는 법이 있었습니다.

-변수로 접근할 때는 항상 대괄호로 접근해야 합니다.

 

4. arrow function

-arrow function은 ES6에 추가된 새로운 기능입니다.

-함수를 정의하는 방식을 ES5와 비교해보면 다음과 같습니다.

//ES5
function() {}

//ES6
() => {}

 

5. template literals

ES6 에서 추가된 문법에서 편한 것 중 하나가 template literal 입니다.

원래 string을 작성할 때 따옴표를 사용했었지만,

이제 back tick으로도 string을 감쌀 수 있습니다.

const name = '김개발';
const name = `김개발`;

 

그리고 back tick 으로 감싸면 그 안에 변수를 넣어서 표현할 수 있습니다.

const name = '김개발'; const hi = `안녕하세요. 저는 ${name} 입니다.`;

const name = '김개발'; 
const hi = `안녕하세요. 저는 ${name} 입니다.`;

변수를 사용하려면 ${} 으로 변수를 감싸줘야 합니다.

 

 

 

6. 그 외

-split()

문자열을 split() 메소드를 사용하여 배열로 변환 할 수 있다.
split() 사용방법

문자열.split(구분자);

구분자를 ""로 한다면 문자 하나하나가 인덱스로 처리된다.