🍒What I did today(오늘 한 일)

✅ Javascript 배열(Array), 객체(Object) 공부

 

배열이란?

[0]	[1]	[2]	[3]	[4]
73	98	86	61	96

배열은 순서가 있는 값, 연관된 데이터를 하나의 틀에서 관리하기 위한 자료구조이다.

변수가 하나의 데이터를 저장하기 위한 것이라면, 배열은 여러 개의 데이터를 하나의 변수에 저장하기 위해 만든 것이라고 할 수 있다.

순서는 인덱스라고 부르며, 1이 아닌 0부터 번호를 매기고, index를 벗어나면 undefined의 값을 반환한다.배열은 리터럴 대괄호[]를 사용하여 만들 수 있다.

const arr =  []; // 배열 생성(빈 배열)
const arr1 = [1,2,3,4] // 배열 생성(숫자를 포함한 배열)
const arr2 = ['h', 'e', 'l', 'l', 'o']; // 배열 생성(문자를 포함한 배열)
// arr[0] === 'h'
// arr[3] === 'l'
const first = arr[0]; //h
const last =  arr[arr.length -1]; //o 
// 필요에 따라서 다른 변수에 인덱스로 접근한 값을 할당할 수 도 있다.

 

배열의 길이를 얻는 방법

const arr = ['h', 'e', 'l', 'l', 'o'];
// arr[arr.length-1] -> 'o'
// 총 배열의 길이(arr.length)는 5이고, 마지막 요소의 인덱스는 4 이다.

🍒Remember(기억하기)

---

✅for of 연산자(for element of array)

array에서 각 요소(element) 꺼내는 반복문으로, for(int i=0; i<array.length; i++)와 비슷한 역할

 

 

✅for in 연산자

객체(Object)에서 key의 존재 여부를 확인해 boolean값(true/false)을 반환해주는 연산자

 

 

✅객체 value에 접근하기

방법1 : Dot notation (ex. student.id)
방법2 : Bracket notation (ex. student['id'])

-> 따옴표가 없으면 변수명으로 인식해버림!
-> 동적변수를 다룰 때 사용 (key값이 변할 때)

 

 

✅console.table()

table 형태로 콘솔에 출력 (배열은 index, value값을 column으로 출력)

ex) console.table(["apples", "oranges", "bananas"]); // 모르겠으면 F12 console에 확인해보자!

 

 

✅indexOf, includes

둘 다 어떠한 요소가 배열에 포함되는지 여부를 확인하는 메서드이다.

indexOf는 요소의 index를 반환해주며(존재X시 -1), includes는 요소의 포함여부를 true, false(boolean)로 반환해준다.

포함여부만 알려주는 includes보다는 어디에 위치한 지 index까지 반환해주는 indexOf가 더 범용적이고 유용하다!

 

✅Array.isArray()

인자가 Array인지 판별한다.

Array.isArray([1, 2, 3]);  // true
Array.isArray({foo: 123}); // false
Array.isArray('foobar');   // false
Array.isArray(undefined);  // false

 

✅push()

push() 메서드는 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환한다.

let sports = ['축구', '야구'];
let total = sports.push('미식축구', '수영');

console.log(sports); // ['축구', '야구', '미식축구', '수영']
console.log(total);  // 4

 

✅pop()

배열에서 마지막 요소를 제거하고 그 요소를 반환합니다.

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];

var popped = myFish.pop();

console.log(myFish); // ['angel', 'clown', 'mandarin' ]

console.log(popped); // 'sturgeon'

 

✅unshift

새로운 요소를 배열의 맨 앞쪽에 추가하고, 새로운 길이(length)를 반환합니다.

const array1 = [1, 2, 3];

console.log(array1.unshift(4, 5));
// expected output: 5

console.log(array1);
// expected output: Array [4, 5, 1, 2, 3]

 

✅shift

배열에서 첫 번째 요소를 제거하고, 제거된 요소를 반환합니다. 이 메서드는 배열의 길이(length)를 변하게 합니다.

const array1 = [1, 2, 3];

const firstElement = array1.shift();

console.log(array1);
// expected output: Array [2, 3]

console.log(firstElement);
// expected output: 1

 

✅array.slice(start, end)

어떤 배열의 begin부터 end까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다. 원본 배열은 바뀌지 않습니다.

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]

// arr.slice(begin, end)

 

✅arr.join()

배열의 모든 요소를 연결해 하나의 문자열로 만듭니다.

const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());
// expected output: "Fire,Air,Water"

console.log(elements.join(''));
// expected output: "FireAirWater"

console.log(elements.join('-'));
// expected output: "Fire-Air-Water"

// 예제 2
var a = ['바람', '비', '불'];
var myVar1 = a.join();      // myVar1에 '바람,비,불'을 대입
var myVar2 = a.join(', ');  // myVar2에 '바람, 비, 불'을 대입
var myVar3 = a.join(' + '); // myVar3에 '바람 + 비 + 불'을 대입
var myVar4 = a.join('');    // myVar4에 '바람비불'을 대입

 

 

✅array.splice(start, deleteCount, items)

배열 중간에 요소를 끼워넣거나 삭제할 수 있다. 끼워넣고 싶은 지점을 시작지점(start)으로 지정하고, 삭제할 요소 개수를 deleteCount로 지정한다.

이 때 deleteCount=0으로 두면 삭제 대신 끼워넣기(insert)를 하겠다는 뜻이 된다! items는 추가하고 싶은 요소가 있을 경우 적어주면 된다.

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// inserts at index 1
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, 'May');
// replaces 1 element at index 4
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "May"]

 

✅str.split(separater)

문자열(str)을 구분자(separater)를 기준으로 잘라서 return해준다 (ex. '010-8844-3439'.split('-')  //['010', '8844', '3439'])

 

 

 

✅immutabiliy in javascript(자바스크립트 불변성)

값을 변경할 수 없고, 원시 타입(primitive type)으론 Boolean / String / Number / null / undefined 있다.

값을 변경하기 위하여 다음의 과정을 거친다

• 새로운 인스턴스를 생성한다.
• 기존의 인스턴스의 포인터를 지운다.
• 포인터에 새로운 인스턴스의 주소를 할당한다.

자바스크립트의 불변성을 유지하는 방법은 slice()메서드를 이용한 방법을 사용할 수 있다.

function addToBackOfNew(arr, el) {
  let arr2 = arr.slice(); // arr2라는 인스턴스에 arr.slice를 할당한다.
  arr2.push(el);          // arr2에 push()를 함으로써 배열의 끝에 문자열의 길이를 추가한다.
  return arr2;
}
let input = [1, 2];
let output = addToBackOfNew(input, 3);
console.log(input); // --> [1, 2]
console.log(output); // --> [1, 2, 3]

 

2021-01-25

---

학교에서 분명 배웠던 내용이었던 것 같은데 정말 기억이 잘 안난다.

공부를 안했던 나를 탓하며 오늘도 엄청 열심히 했따...🙄

문제를 꾸준히 풀고, 적응해야만 문제의 관한 이해를 할 수 있을 것 같다.

처음 문제 보자마자 완전 멘붕😂

그래도 페어님이 혼자 잘 풀게 도와주셔서 잘 해결해 나아간 것 같다.