Ch1. 배열 (Array)
📌 배열 기초
🔸 순서가 있는 값으로, 배열을 구성하는 각각의 값을 배열 요소(element)라고 하며, 배열에서 위치를 가리키는 숫자를 인덱스(index) 라고 함 (인덱스는 0부터 번호를 매김).
🔸 대괄호(square bracket; [])를 이용해서 배열을 만들고, 각각의 element는 쉼표로 구분.
🔸 값은 인덱스를 이용해 접근할 수 있음.
let myNumber = [73, 24, 32, 14, 42]; // index 0 1 2 3 4 // "myNumber라는 배열의 3번째 인덱스"를 조회하려면 myNumber[3] = 14; myNumber; // [73, 24, 32, 14, 42]; // 값을 변경하려면 myNumber[3] = 200 myNumber; // [73, 24, 32, 200, 42];🔸 index 값을 넘는 번호를 호출할 경우
undefined.
🔸 element 내의 element 호출하기
let myNumber = [[13, 23], [73, 39], [94, 57]] // 94를 호출하고 싶을 경우 myNumber [2][0] // 2차원배열🔸 배열 요소의 타입이 고정되어 있지 않으므로, 같은 배열에 있는 배열 요소끼리의 타입이 서로 다를 수도 있음.
🔸 배열 요소의 인덱스가 연속적이지 않아도 되며, 따라서 특정 배열 요소가 비어 있을 수도 있음.
📌 배열 메서드
🔸 배열의 길이 알아보기
.lengthlet myNumber = [73, 24, 32, 14, 42]; muNumber.length; //5
🔸 뒤에 있는 element 추가하기
.push()let myNumber = [73, 24, 32, 14, 42]; muNumber.push(20); // 배열 마지막에 추가됨 myNumber = [73, 24, 32, 14, 42, 20];
🔸 뒤에 있는 element 삭제하기
.pop()let myNumber = [73, 24, 32, 14, 42]; myNumber.pop(); // 배열 마지막 값이 삭제 myNumber = [73, 24, 32, 14];
🔸 앞에 있는 element 삭제하기
.shift()let arr = ['code', 'states'] arr.shift(); // "code" console.table(arr) // 'code'가 삭제되고 'states'가 index 0이 됨. // return 값은 length 값
🔸 앞에 있는 element 추가하기
.unshift()let arr = ['code', 'states'] arr.unshift('creative); // 3 (length) console.table(arr) // 'creative'가 추가되고 'states'가 index 2이 됨. // ['creative', 'code', 'states']
🔸 객체의 타입은
object
🔸 자바스크립트에서 배열은 Array 객체로 다뤄짐.typeof [1, 2, 3]; //"object" typeof { a: 1}; //"object"🔸 이를 구분하기 위해
Array.isArray를 이용. 배열을 넣을 시true배열 이외는falseArray.isArray([1, 2, 3]); // true; Array.isArray([]); // true; Array.isArray(1); // false;
🔸 console.table() element를 인덱스 값에 맞게 표로 보여주는 method.
🔸 index 값을 반환
indexOf(). (모든 브라우저에서 사용가능)let words = ['a', 'e', 'c']; words.indexOf('a') // 0 words.indexOf('c') // 2 words.indexOf('없는단어') // -1 words.indexOf('a') !== -1 // true;
🔸 내가 찾고자하는 단어 존재여부를 확인하고 싶을 때
includes. (internet explorer에서 사용할 수 없음(호환성문제))let words = ['a', 'e', 'c']; words.includes('a') // true words.includes('b') // false
🔸 문자열은 대소문자 구분을 확실히 해야됨.
Ch2. 객체 (Object)
객체 기초
🔸 다양한 데이터를 담을 수 있음.
🔸 객체는 키와 값 쌍(key-value pair)으로 이루어져 있음.
🔸 {key: value} key = 문자형, value = 모든 자료형
let user = { // 객체
name: "John", // 키: "name", 값: "John"
age: 30 // 키: "age", 값: 30
};🔸 빈 객체 만드는 방법.
- '객체 생성자' 문법 :
let user = new Object()- '객체 리터럴' 문법 :
let user = {}
🔸 객체의 값 사용하는 방법.
- Dot notation : Dot(
.) 뒤에 key를 입력해 value를 얻을 수 있음.object.key-->value
- 동적인 변수를 못 담음.
- Bracket notation : 중괄호(
[]) 내에 key를 문자열로 전달해 value를 얻을 수 있음.object['key']-->value
- key 값이 동적일 때, 변수일 때
user.name; // 'John' user.age; // 30 user['name'] // 'John' user['age'] // 30🔸 키-값 쌍 추가.
user.content = 'hello` // user라는 객체에 {content: 'hello'} 값이 추가됨.🔸
delete키-값 쌍 삭제.delete user.age;🔸
in연산자를 통해 해당하는 키가 있는지 확인.'content` in user; // true
추가 공부
JavaScript에서 type을 확인하는 방법
🔸 typeof : 피연산자의 데이터 타입을 문자열로 반환.
typeof ''; // string
typeof 1; // number
typeof NaN; // number
typeof true; // boolean
typeof []; // object
typeof {}; // object
typeof new String(); // object
typeof new Date(); // object
typeof /test/gi; // object
typeof function () {}; // function
typeof undefined; // undefined
typeof null; // object (설계적 결함)
typeof undeclared; // undefined (설계적 결함)🔸
String.prototype.split(seperator, limit): String 객체를 지정한 구문자를 이용해 여러 개의 문자열로 나누고 배열에 담아 반환.
seperator: 원본 문자열을 끊어야 할 부분을 나타내는 문자열.
(' '): 띄어쓰기로 구분하여 문자열을 나눔.(''): 각각의 문자가 배열의 원소 하나씩으로 변환.(): 원본 문자열을 유일한 원소로 가짐.limit: 끊어진 문자열의 최대 개수를 나타내는 정수.
🔸
Array.prototype.concat(): 두 개 이상의 배열을 병합. 기존 배열을 변경하지 않고, 새 배열을 반환함.
🔸
Array.prototype.join(): 배열의 모든 요소를 연결해 하나의 문자열로 만듬.const elements = ['Fire', 'Air', 'Water']; elements.join() //"Fire,Air,Water" elements.join('') //"FireAirWater" elements.join('-') //"Fire-Air-Water"
- 배열의 길이가 0이라면 빈 문자열(
"")을 반환.
🔸
slice(begin, end): index begin부터 index end까지에 대한 얕은 복사본을 새로운 배열 객체로 반환 (원본 배열은 바뀌지 않음).
- end가 없을 경우 : begin이 지정한 곳부터 마지막 까지.
- begin, end가 없을 경우 : 전체를 지정
- end가
-1일 경우 : 끝에서 두번째 요소까지.- end가 없고, begin이 음수일 경우 : 끝에서 부터 추출.
