한식 메뉴 렌더링 하기 (1)

과제를 시작하기 전 문법 이해하기. 

한식 메뉴 렌더링 하기 과제에서는 배열과 배열 메서드를 사용합니다.

이번에도 자바스크립트 핸드북을 통해 살펴봅시다.

 

배열이란?

대충 내가 배웠던 리스트와 같은 말인 듯 보인다. 

 

pop.

let fruits = ["사과", "오렌지", "배"];
alert( fruits.pop() ); // 배열에서 "배"를 제거하고 제거된 요소를 얼럿창에 띄웁니다.
alert( fruits ); // 사과,오렌지

맨 끝의 요소(이 경우에는 배,)를 '추출'해오는 메서드. 말 그대로 추출이기 때문에 리스트에서 사라진다! 

 

push

let fruits = ["사과", "오렌지"];
fruits.push("배");
alert( fruits ); // 사과,오렌지,배

 

배열 맨 끝에 새로운 요소를 추가하는 메서드. 딕셔너리도 이런 식으로 추가할 수 있겠어. 

 

shift

let fruits = ["사과", "오렌지", "배"];
alert( fruits.shift() ); // 배열에서 "사과"를 제거하고 제거된 요소를 얼럿창에 띄웁니다.
alert( fruits ); // 오렌지,배

 

pop과 유사하지만, 이건 맨 앞에 있는 걸 추출한다. 

 

unshift

let fruits = ["오렌지", "배"];
fruits.unshift('사과');
alert( fruits ); // 사과,오렌지,배

마찬가지로 push와 유사하지만, 이건 맨 앞에 있는 요소를 추가한다. 

 

push와 unshift는 여러 요소를 더해줄 수 있으며, 같이 써도 무방하다. 

 

그런데... 여기서 무지막지한 놈이 나온다 .

 

splice.

스플라이스를 사용하면 특정 순서에 있는 리스트 내용을 마음대로 다른 내용으로 바꿔줄 수 있다! 

splice의 기본 문법은 다음과 같다. 

 

splice(0,3) // 0번째 항복부터 3번째 항목을 지정, 삭제. 

splice(0,3, "let's", "dance.")

// 0번째 항목부터 3번째 항목까지 삭제. 그 이후 배열 두 개를 추가. 이 경우에는 렛츠 댄스가 된다. 

 

delete를 이용한 제거 방식도 존재는 하지만, 세련되지 않아.

왜? delete로 리스트 안의 요소를 지워도, 리스트의 길이는 변화하지 않기 때문. 

 

3명이 의자에 앉아있는 상황에서, 한 명을 따로 방으로 불러냈다고 치자. 

하지만 의자는 계속해서 남아있는 상황이라고 생각하면 될 듯 하다. 

하지만 스플라이스를 이용하면 의자 째로 없애버릴 수 있다. 편리. 

 

음수를 이용한 배열 지정 방법(잘 안 쓸 거 같긴 하지만.)

let arr = ["t", "e", "s", "t"];

이렇게 지정되어 있다고 치자.

그럼 앞에서부터 -4, -3, -2 -1. 순이다. 

slice

let arr = ["t", "e", "s", "t"];
alert( arr.slice(1, 3) ); // e,s (인덱스가 1인 요소부터 인덱스가 3인 요소까지를 복사(인덱스가 3인 요소는 제외))
alert( arr.slice(-2) ); // s,t (인덱스가 -2인 요소부터 제일 끝 요소까지를 복사)

 

슬라이스를 사용하면 특정 문자열을 복사해서 끌고 올 수 있다. 추출하는 pop, shift와는 달리 원래의 리스트를 건드리지 않는다. 

concat

기존 리스트의 요소를 사용해 새로운 리스트를 만들 거나, 리스트에 요소를 추가한 새로운 리스트를 만들 때 사용. 

 

let arr = [1, 2];
// arr의 요소 모두와 [3,4]의 요소 모두를 한데 모은 새로운 배열이 만들어집니다.
alert( arr.concat([3, 4]) ); // 1,2,3,4
// arr의 요소 모두와 [3,4]의 요소 모두, [5,6]의 요소 모두를 모은 새로운 배열이 만들어집니다.
alert( arr.concat([3, 4], [5, 6]) ); // 1,2,3,4,5,6
// arr의 요소 모두와 [3,4]의 요소 모두, 5와 6을 한데 모은 새로운 배열이 만들어집니다.
alert( arr.concat([3, 4], 5, 6) ); // 1,2,3,4,5,6

 

추가된 요소들은 전부 끝에 붙는 듯 보인다. 숫자의 경우에는 별도의 대괄호 없이도 요소로 적용되는 모양. 

 

let arr = [1, 2];
let arrayLike = {
  0: "something",
  length: 1
};
alert( arr.concat(arrayLike) ); // 1,2,[object Object]

 

이런 식으로 딕셔너리를 붙이는 것도 가능. 근데 alert로 호출했을 때, 딕셔너리는 오브젝트로 표시되는 듯 하다. 콘솔로 확인해본 결과, 제대로 딕셔너리가 들어간 걸 확인할 수 있었다. 

 

배열 내에서 특정 요소를 찾는 방법. 

find와 findindex

let users = [
  {id: 1, name: "John"},
  {id: 2, name: "Pete"},
  {id: 3, name: "Mary"}
]; // 리스트와 딕셔너리를 변수 선언. 
let user = users.find(item => item.id == 1); // user 변수 선언. 요소 안에서 id가 1인 요소를 탐색. 
alert(user.name); // user 항목의 name을 출력, // John이 출력됨. 

 

arr.findIndex는 find와 동일한 일을 하나, 조건에 맞는 요소를 반환하는 대신 해당 요소의 인덱스를 반환한다는 점이 다르다. findIndex는 '순서'를 출력한다. 위의 경우에서 find만 findindex로 바뀌었더니 0이 나왔다. 0번째를 의미하는 듯. 

filter

find 메서드는 함수의 반환 값을 true로 만드는 단 하나의 요소를 찾습니다. 조건을 충족하는 요소가 여러 개라면 arr.filter(fn)를 사용하면 됩니다. filter는 find와 문법이 유사하지만, 조건에 맞는 요소 전체를 담은 배열을 반환한다는 점에서 차이가 있습니다.

 

let users = [
  {id: 1, name: "John"},
  {id: 2, name: "Pete"},
  {id: 3, name: "Mary"}
];
// 앞쪽 사용자 두 명을 반환합니다.
let someUsers = users.filter(item => item.id < 3); // someUsers 변수 선언. 해당 변수 안에 id가 3미만인 요소만을 정제. 
alert(someUsers.length); // 2 someUsers의 인덱스 길이를 측정. 3미만인 건 존이랑 피트기에 2가 출력. 

 

let users = [

            { id: 1, name: "John" },

            { id: 2, name: "Pete" },

            { id: 3, name: "Mary" }

        ];

        // 앞쪽 사용자 두 명을 반환합니다.

        let someUsers = users.filter(item => item.id < 3); // someUsers 변수 선언. 해당 변수 안에 id가 3미만인 요소만을 정제.

        console.log(someUsers[0]['name']); // 2 someUsers의 인덱스 길이를 측정. 3미만인 건 존이랑 피트기에 2가 출력.

 

이런 식으로 하면 특정 배열의 이름만 필터링해서 뽑아낼 수 있다.