객체와 배열

객체(object)

const aydenProfile = {
    name: 'Ayden',
    age: 28,
    bornYear: 1994,
    'most Famous Work': {
        title: '사서 에밀리 힐덴베르크의 우울',
        language: 'korean'
    }
}

객체는 key와 value로 이루어져있으며, 이 두 값을 합쳐서 property라고 부른다. key엔 문자형, value엔 모든 자료형이 허용된다.

일반적으로 객체의 key는 문자열로 구성되지만, 반드시 따옴표로 감싸줘야 할 필요는 없다. 다만, 첫번째 글자가 문자, 밑줄, 달러 기호 중 하나로 시작하지 않거나 띄어쓰기나 하이픈을 사용해야 할 때는 따옴표로 묶어줘야 한다.

 

프로퍼티의 접근과 변경

aydenProfile.age // 점 표기법(dot notation)
aydenProfile['most Famous Work']['title'] // 대괄호 표기법(square bracket notation)
aydenProfile['most Famous Work'].title // 두 표기법을 혼용하여 사용할 수 있다

aydenProfile['most Famous Work'].publish = "2019" // 프로퍼티 추가
Delete aydenProfile['most Famous Work'].language // 프로퍼티 삭제

 

in 연산자

'name' in aydenProfile  // Boolean 값으로 반환해줌

객체 내에 속성('name')을 찾아서 존재하면 참으로, 존재하지 않으면 거짓을 반환한다.

 

메소드(Method)

메소드는 함수로 이루어진 객체라 할 수 있다.

let greetings = {
	sayHello: function (name) {
		console. log (`Hello ${name}!`);
	},
	sayHi: function () {
		console. log( `Hi!`);
	},
	sayBye: function () {
		console. log ( `Bye!`);
	}
};

greetings.sayHello('Ayden'); // 점 표기법
greetings['sayHello']('Ayden'); // 대괄호 표기법

 

 

배열(array)

순서가 있는 컬렉션을 다뤄야 할 때 객체를 사용하면 순서와 관련된 메소드가 없어 그다지 편리하지 않다. 객체는 태생이 순서를 고려하지 않고 만들어진 자료구조이기 때문에 객체를 이용하면 새로운 프로퍼티를 기존 프로퍼티 ‘사이에’ 끼워 넣는 것도 불가능하다.
이럴 땐 순서가 있는 컬렉션을 저장할 때 쓰는 자료구조인 배열을 사용할 수 있다.

let arr = new Array(); // '배열 생성자' 문법
let arr = [];  // '배열 리터럴' 문법
let country = ['한국', '일본', '태국', '중국', '베트남']; // 선언 시점에 초기 요소들을 넣을 수 있다

각 배열 요소엔 0부터 시작하는 숫자(인덱스)가 매겨져 있다. 이 숫자들은 배열 내 순서를 나타낸다. 배열 내 특정 요소를 얻고 싶다면 대괄호 안에 순서를 나타내는 숫자인 인덱스를 넣어주면 된다. 인덱스 내에서 계산도 가능하다.

country[0] // 한국
country[1 + 1] // 태국
country[3] = '영국'; // blair[3]은 중국인데, 해당 값을 '영국'으로 변경한다.

배열도 객체의 하나이기 때문에 각종 프로퍼티와 메소드를 사용할 수 있다.

country.length // 0부터 4까지 5개가 들어있기 때문에 5를 반환한다
country[blair.length] = '독일'; // blair[5]는 선언되지 않았기 때문에, 해당 항목에 '독일'을 추가하게 된다.

 

배열을 다루는 메소드

다재다능 splice(startIndex, deleteCount, item)

arr.splice(0, 2); // 0번 인덱스로부터 두 개의 item을 삭제

arr.splice(arr.lenght - 1, 1); // 가장 마지막 인덱스로부터 하나의 item을 삭제

arr.splice(1, 3, 'a', 'b'); // 1번 인덱스로부터 세 개의 item을 삭제하고, 1번 인덱스 자리부터 'a'와 'b' item을 추가

 

splice() vs delete

let country = ['한국', '일본', '태국', '중국', '베트남'];

delete country[1]; // '일본'을 삭제합니다.

console.log(country[1]); // undefined

country.length // 5

console.log(country); // ['한국', , '태국', '중국', '베트남'];

splice() 메소드를 사용하여 삭제하면, 전체 배열의 길이가 줄어든다. 그러나 delete 키워드를 사용해 삭제하면 인덱스가 아니라 item이 삭제되기 때문에 전체 배열의 길이가 줄어들지는 않는다.

 

 

 

배열 vs 문자열

배열과 문자열 공통적으로 length 프로퍼티를 가지고 있다. 즉, index를 활용해서 각각의 요소에 접근할 수 있다는 뜻이다. 또한 slice()를 사용하여 특정 배열과 문자열을 반환받을 수 있다. indexOf() 메소드를 사용하면 배열/문자열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고 존재하지 않으면 -1을 반환한다.

그러나 배열의 자료형은 object고, 문자열의 자료형은 string이다. 때문에 arr.splice()와 같이 배열을 직접적으로 변경하는 다양한 프로퍼티와 메소드를 문자열에서는 사용할 수 없다. 수정이 필요하다면 아예 새로운 문자열을 지정해야 한다. 또한, 아래의 메서드는 문자열에서만 사용 가능하다.

someString.toUpperCase() // 문자열을 대문자로 변경
someString.toLowerCase() // 문자열을 소문자로 변경
someString.trim() // 문자열의 앞뒤에 있는 공백을 제거
blair.trim() // 에러 발생

+ 숫자에서만 사용 가능한 toFixed() 메서드는 고정 소수점 표기법을 사용하여 나타낸 수를 문자열로 바꾼 값을 반환한다

let someNumber = 123.45678;

someNumber.toFixed(1) // '123.5'
someNumber.toFixed(3) // '123.457'
someNumber.toFixed(5) // '123.45678'