반응형
4-1. 배열
JS는 인터프리터 언어, 컴파일 안해도 됨, 자유로움
다만, 이게 문제가 되는 경우도 있어 타입스크립트가 나옴
var arr = [1, "a", function() {}, {}]; // 이래도 됨
console.log(arr[1]); // 'a'
var arr1 = [];
arr1.push(1);
arr1[4] = 10;
console.log(arr1.length); // 5
arr1 // (5) [1, empty x 3, 10]
var arr3 = new Array(3); // new는 엔진을 좀 소모, 리터럴을 사용하자
arr3; // (3) [empty x 3]
var arr4 = new Array(4, 5);
arr4; // (2) [3, 4]
var arr5 = new Array(3, 4, 5);
arr5; // (3) [3, 4, 5]
// arr5 = {
// 0: 3,
// 1: 4,
// 2: 5,s
// length: 3
// }
var arr4 = {
0: 3,
1: 4,
2: 5
};
// 이렇게 object로 만들어도 됨, 그러나 배열과 객체의 차이는
4-2. 배열과 객체의 차이
배열과 객체의 큰 차이는 배열은 length라는 프로퍼티를 자동으로 생성한다는 것.
배열은 Array.prototype을 상속받기 때문에 일반 객체와는 다른 forEach, concat등 특별한 메소드를 사용할 수 있음
var arr = [1, 2, 3];
arr.name = 'Array'; // 라고 추가해도 됨
4-3. 배열 조작
1) 파괴적 방식의 배열 조작 - 원본이 변경됨
arr.unshift(0); // 앞에 추가
arr; // (4) [0, 1, 2, 3, name: 'Array']
arr.push(5); // 뒤에 추가
arr; // (5) [0, 1, 2, 3, 5, name: 'Array']
arr.shift(); // 앞에 제거
arr; // (4) [1, 2, 3, 5, name: 'Array']
arr.pop(0); // 뒤에 제거
arr; // (3) [1, 2, 3, name: 'Array']
// splice(시작 인덱스, 지울 개수[, 넣을 인자들])
arr.splice(0, 2, 'a', 'b'); // 임의의 위치에 추가, 제거
arr; // (3) ['a', 'b', 3, name: 'Array']
delete arr[1]; // 이렇게 해도 되지만...
arr; // (3) ['a', empty, 3, name: 'Array']
// length는 변경되지 않음
arr.splice(1, 1);
arr; // (2) ['a', 3, name: 'Array']
// length도 변경됨
2) 비파괴적 방식의 배열 조작 - 원본이 변경되지 않음
var arr1 = [1,2,3,4,5,6,7,8]
var result = arr1.slice(3,5);
result; // (2) [4, 5]
arr1; // (8) [1, 2, 3, 4, 5, 6, 7, 8]
var result = arr1.slice(-2);
result; // (2) [7, 8]
4-4. 유사 배열(array-like)
function func(a,b,c) {
console.log(arguments);
}
func(); // arguments를 안넣어도 오류 안남 - 그냥 undefined로 도는 것
func(1, 2, 3);
// Arguments(3) [1, 2, 3, callee:f, ...]
// 0: 1,
// 1: 2,
// 2: 3,
// ...
// Arguments에는 length가 있지만, Arguments.push()는 안됨!
// 배열처럼 생겼지만 배열이 아니기 때문
5. 기타 주요 메소드
String 내장 메소드
var str = "abc";
str.startsWith("aa"); // false
str.startsWith("ab"); // true
str.startsWith("a"); // true
str.length; // 3
str[0]; // 'a'
// Stirng
// ...
// startsWith: f ...
// String 내장 메소드
==, === 연산자
var num1 = 20;
var num2 = new Number(20);
console.log(num1 == num2); // true - 값은 같음
console.log(num1 === num2); // false - 참조값은 다름
형변환: Number to String, String to Number
var add = 1 + 'a';
add; // "1a" - 알아서 형변환을 해줌
var num = +'1';
num; // 1 - 알아서 Number로 형변환을 해줌
// var num = Number('1'); // 과 같다
typeof 연산자
typeof null // object
typeof undefined // undefined
!, !! 연산자, 0(false), 1(true), ""(false)
// 빈값, 0은 false
!"" // true
!!"" // false
!0 // true
!!0 // false
// 아래 세 개는 같음
if (str === "") { }
if (!str == true) { }
if (str) { }
반응형
'JavaScript > JS 초급&개념' 카테고리의 다른 글
[JS] 6장-1. 함수와 프로토타입 (0) | 2023.06.13 |
---|---|
[JS] 5장. 자바스크립트의 메모리 관리 (0) | 2023.06.13 |
[JS] 3장-2. 프로토타입 (0) | 2023.06.13 |
[JS] 3장-1. 데이터 타입(기본/참조 타입, null, undefined)과 프로퍼티 (0) | 2023.06.13 |
[JS] 2장. 브라우저, 자바스크립트 (0) | 2023.06.13 |