-
깜빡한 사항 템플릿 리터럴(Template Literals)
템플릿 리터럴
템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다.
이중 따옴표 나 작은 따옴표 대신 백틱(``)을 사용하는 문자열.
플레이스 홀더(${expression})를 이용하여 표현식을 문자열 사이에 넣을 수 있으며, 백틱 사이에서는 공 백 또한 그대로 인식한다.
템플릿 리터럴 안에서 백틱을 사용하려면 백틱 앞에 역슬러쉬('\')를 넣으면 된다.
대량의 정보를 보관, 관리하는 방법
변수에 할당된 값이 한가지일 경우 정보를 보관, 관리하는데에는 특별한 방법이 필요하지 않다. 하지만, 값이 백만개일 경우? 억단위의 데이터를 보관해야 한다면 각 데이터를 보관하는 백만, 억단위의 변수를 선언하는 것은 말이 되지 않는다. 이렇듯 대량의 정보를 보관, 관리하기 위해선 새로운 개념을 알아야 한다.
→순서가 중요한 배열
한가지의 변수에는 한가지의 값만 들어갈수 있다. 물론 선언에 따라서 재선언, 재할당이 가능하지만 여전히 지닐수 있는 값은 한가지로 제한되어 있다.
그렇다면 일정한 공간을 만들고 자료에 순서를 매겨 넣어놓는다면? 공간 자체를 값 하나로 셀수도 있을지도 모른다.
배열의 순서(Index)
배열은 순서가 중요하다. 배열에 순서가 없다면 배열 내에서 특정한 자료를 조회하려 할때 조회의 기준이 없어지게 된다. 자료가 들어갈때 마다 순차적으로 특정 순서를 부여 한다면 원하는 자료의 순서만 기억하고 있으면 해당 자료를 조회할수 있을것이다.
이러한 순서를 Index라 한다. 인덱스는 0부터 1씩 증가하는 정수로 자료가 들어간 순서에 따라 부여된다.
const arr = [0, 1, 2, 3, 4]
/*배열의 이름을 arr로 선언하고 5개의 자료를 넣어주었다. 순서대로 0번,1번
...4번 인덱스배열의 조회
배열 내부의 자료에 접근할때 앞서 부여했던 인덱스를 사용하여 해당 인덱스의 자료를 조회할수 있다.
arr[2]//arr 배열의 2번째 인덱스를 조회반복문을 이용하여 배열 내부의 자료를 순차적으로 조회할수도 있다.
for (let i = 0; i < arr.length; i++) {
console.log(arr[i])
} //콘솔 로그가 배열의 길이 만큼 찍히게 된다.또는 for of를 이용할수도 있다.
for (let index of arr) {
console.log(arr[index])
}배열 인덱스의 변경
배열의 인덱스는 조회를 할수 있을 뿐만 아니라 해당 인덱스의 자료를 변경해 줄수 있다.
arr[2] = 'apple' //배열의 2번째 인덱스의 값을 2에서 'apple'로 변경
/* arr배열은 이제 [0, 1, 'apple', 3, 4]로 변경 되었다.배열에 새로운 인덱스를 추가하거나 삭제 할수도 있다.
arr.push('banana') //[0, 1, 'apple', 3, 4, 'banana']
arr.pop() //[0, 1, 'apple', 3, 4]
arr.shift() //[1, 'apple', 3, 4]
arr.unshift(0) //[0, 1, 'apple', 3, 4]배열의 메소드
배열에 사용할수 있는 메소드들은 다음과 같다.
- Array.isArray() : 특정 값이 배열인지 아닌지 판별할 수 있다. (Boolean)
- indexOf : 특정 값이 배열에 포함 되어 있는지 여부와 해당 값의 인덱스를 반환한다. (Number, 포함 되어 있지 않다면 -1을 반환)
- includes : 특정 값이 배열에 포함 되어 있는지 확인할 수 있다. (Boolean)
- concat : 2개의 배열을 합쳐 순서대로 합쳐진 새로운 배열을 반환한다.
- slice : 배열의 특정 부분을 복사해 복사한 인덱스로 이루어진 새로운 배열을 반환한다.
arr.slice(0, 3) //[0, 1, 'apple']
arr.slice()
/*[0, 1, 'apple', 3, 4], 아무런 값을 입력하지 않으면 복사 하는 것
과 같다. 의미를 가진 인덱스가 필요해 : 객체
값에 인덱스를 부여해서 순서를 가진 배열을 구성해 대량의 데이터를 보관, 관리 할수 있지만, 자료의 크기가 백만개라면? 각 인덱스에 어떤 정보가 들어 있는지 알기 위해 인덱스 별로 어떤 자료가 들어있는지 따로 적어 놓아야 하는 불편이 생긴다.
인덱스에 이름을 붙일수 있다면 대량의 자료 안에서 언제든지 원하는 자료를 찾고 수정할수 있을 것이다. 이와 같이 인덱스에 의미를 부여한 데이터를 객체라 한다.
객체와 배열
객체와 배열은 둘다 순서를 가지고 있는 데이터다. 이때 배열은 순서를 인덱스로 관리 하지만, 객체는 인덱스에 의미를 갖게 하기 위해 이름을 붙이게 된다. 객체와 배열은 다양한 타입의 자료를 담을수 있다. 객체 안에 배열이 들어갈수 있으며 배열안에 객체가 들어갈수도 있다.
const obj = {
banana: {type: 'fruit', taste: 'sweet', shape: 'long'},
number: 1,
arr: [1, 2, 3, 4],
string: 'this is string'
}배열은 순서가 중요한 자료에서 사용할수 있을 것이다. 예를 들면 번호표 기계가 있을 것이다. 번호를 배정하고 대기열(배열)에 추가한다. 배열의 길이가 대기 인원수가 될 것이고 처리되면 배열에서 해당 번호를 삭제한다.
객체는 순서보단 객체 내의 자료에 쉽게 접근하고 수정이 가능한 상황에서 유용할 것이다. 예를 들면 웹페이지의 회원 정보를 객체로 관리 하는 것.
객체의 조회
obj.banana.taste //닷 노테이션(Dot notation)
/* obj 객체내의 banana 속성을 조회하고 banana 객체의 taste를
조회한다. sweet가 최종 조회 값 */
obj['banana']['taste']
/* 위의 조회방법과 동일한 결과
/* 브라켓 노테이션(Bracket Notation)객체의 조회방법은 닷 노테이션과 브라켓 노테이션 2가지가 있다. 굳이 조회 방법을 2가지로 둔 이유는 무엇일까? 둘 중 한 가지 방법으로는 객체의 속성을 조회 할때 변하는 값을 줄수 없기 때문이다.
for(let key in obj) {
console.log(obj[key])
}
/* obj 객체내의 키 값이 콘솔 로그를 통해 전부 출력 된다. */
for(let key in obj) {
console.log(obj.key)
}
/* undefined가 4번 출력 된다.결국 객체의 속성을 조회 할때 정해진 한가지의 속성을 조회 하는 것이 아닌 조회값을 변수로 주어야 할 때 브라켓 노테이션을 사용해야 한다.
객체 속성의 수정
obj.banana.type = 'vegetable'
obj['banana']['type'] = 'vegetable'
/* 객체에 속성을 변경하기 위해선 새로운 데이터를 재할당 해주면 된다. */
obj['color'] = 'yellow'
/* 새로운 속성과 속성값을 추가해 줄수 있다. */
delete obj.banana.type
/* 객체의 속성을 삭제할수도 있다. */객체는 데이터의 순서보다는 데이터의 속성이 가지고 있는 의미가 중요하기 때문에 순서를 기준으로 작동하는 배열의 메소드(.pop(), .shift())와 같은 메소드는 가지고 있지 않다.
객체의 메소드
객체에 사용할수 있는 메소드 들은 다음과 같다.
- .assign() : 원본 객체의 속성들을 (대상객체)로 복사한다.
- .keys() : 대상 객체의 속성들의 이름을 배열로 반환한다.
- 메소드는 아니지만 특정 속성이 객체에 포함되어 있는지를 확인할수 있다.
'banana' in obj는 true를 반환한다. (Boolean)
