본문 바로가기

JavaScript/JS 초급&개념

[JS] 4장. 배열

반응형

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) { }

 

반응형