js/node - 배열, 객체

배열, 객체

배열과 객체라는 개념을 통해, 수 많은 데이터를 한 번에 처리
배열과 객체는 참조 타입(reference type) 데이터
참조 타입 데이터는 이전에 학습한 원시 타입(숫자, 문자열, boolean, undefined 등) 데이터와 다른 성격을 가짐

---

배열 기초

학습 목표

[배열 기초]
* 용어들에 대한 이해
- index, element, length
- arr[0], push, pop
* 배열에서 특정 인덱스의 요소(element)를 조회하거나 변경
* 이중 배열: 배열의 요소가 배열
* 이중 배열의 요소를 조회, 변경

[배열의 반복]
* 배열의 요소를 반복적으로 불러오는 방법
* 배열에 각 요소에 대해 반복하는 코드 실행
- 기본적인 for문을 응용한 다양한 for문 만들기
- 반복문에 조건문을 응용하여 특정 조건에서만 코드 실행시키기
- 이중반복문
* 배열과 반복문을 활용한 실생활 문제 풀기
* 문자열과 배열의 “타입 변환”을 돕는 메소드
- 띄어쓰기(“ “)로 문자열을 구분하여 배열로 변경하기: str.split(“ “).join(“ “)
- 문자열을 요소로 가지는 배열을 띄어쓰기(“ “)로 구분한 문자열로 변경하기

[배열 기초 메소드]
* 배열의 욧소를 조회: bracket notation
* 배열을 복사, 분리: slice, splice
* 배열인지 아닌지 판별: Array.isArray
* 배열의 요소를 추가/삭제: push, unshift, pop, shift
* 배열의 길이: length
* 특정값이 배열에 포함된지 확인: indexOf, includes

---

배열의 기초

배열은 순서가 있는 값

순서는 인덱스(index)라고 부르며 0부터 번호를 매김. 그 인덱스의 값은 요소(element)
값은 인덱스를 이용해 접근

ex) let myNumber = [66,42,21,64,72];
    myNumber[3];    //64

# 여기서 myNumber의 5번째 인덱스값은 무엇일까?
→ 위 배열은 인덱스 4번의 값까지만 존재한다. 그러므로 5번째 인덱스 값은 아직 정의되지 않았다
→ 그러므로 “undefined”    // 에러가 발생하는 거는 아님!

 
index를 벗어나면 undefined 이다!

2차원 배열(이중 배열)

배열의 요소가 배열

ex)
let myNumber = [ [13,30], [73,8], [44,17]];

myNumber의 1번째 인덱스의 값은?
MyNumber[1];    // [73,8]
myNumber의 1번째 인덱스 값의 0번째 인덱스의 값은?
myNumber[1][0]        //73

→ myNmber[x][y] 식으로 접근한다

# 이중 배열은 “행렬”의 개념으로 생각하면 된다

---

배열의 반복

배열과 반복문을 조합하는 경우가 많다

반복문을 이용해 배열의 요소를 한번 씩 출력하려면?

ex)
let myNum = [73, 98, 86, 61];

# 조건
console.log([myNum[n])    // 배열의 n번째 인덱스를 출력하자
let n=0;    // 숫자는 0부터 시작
n< myNum.length;    // 숫자를 배열의 길이보다  작을 때 까지 반복
n++;        // 숫자는 1씩 증가

→ 
for(let n=0; n< myNum.length;n++){
console.log([myNum[n]);
}

---

배열 기초 메소드

Array.isArray: 특정 값이 배열인지 아닌지 판별

typeof 메소드를 쓰면 object라고 나오기 때문에 이것이 배열인지 객체인지 판별 불가

→ Array.isArray();

ex)
Array.isArray([1,2,3]);    // true

Array.isArray([]);    //true

Array.isArray(‘문자열’)    //false

# boolean 값을 반환한다

push, pop, unshift, shift: 배열의 요소(element)를 추가 및 삭제

→ push(맨 뒤에 추가), pop()(맨 뒤에 삭제)

console.table(); 활용해 보기

ex) let arr = [‘code’, ‘states’];
    console.table(arr);    //index와 value가 그래피컬하게 보임

    arr.push(‘pre’)    // “맨 뒤”의 인덱스에 값이 추가됨

    arr.pop()        //”맨 뒤”의 인덱스의 값이 삭제됨

 
그렇다면 앞쪽에 있는 것을 추가 및 삭제하고 싶을 땐?
→ shift(맨 앞 삭제), unshift(맨 앞 추가)

ex) arr.shift()    //”맨 앞”에 있는 인덱스의 값이 삭제됨
ex) arr.unshift(‘creative’)    // “맨 앞”에 인덱스의 값이 추가됨

indexOf, includes: 배열의 요소 포함 여부 확인

indexOf: 없는 값을 넣으면 -1을 반환, 대소문자도 구별함

ex) let words = [‘radagast’, ‘the’, ‘brown’];
    words.indexOf(‘brown’)    //    2    해당 인덱스 값 출력
    words.indexOf(‘없는 단어’)    // -1    인덱스 값 출력
→ 없는 값을 넣으면 -1을 리턴

 
includes(): true, false 값을 반환

ex)
words.includes(‘brown’);    // true
words.includes(‘없는것’);        // false

→ includes()는 true, false 값을 반환

includes()의 치명적인 약점이 존재?

브라우저 호환성 여부: “인터넷 익스플로러(IE) 환경”에서 지원되지 않는다!
→ 반면에 indexOf는 모든 브라우저를 지원!
즉 둘 중에 굳이 하나만 써야 한다면 indexOf 를 활용하는 것이 낫다!

---

객체

각기 다른 값을 가질 수 있지만 입력해야 하는 데이터의 종류가 동일한 경우에 사용
→ 즉, 공통적인 속성을 가지는 경우에 사용
→ 배열과 객체의 차이점을 이해하는 것이 필요

학습 목표

* 배열과 객체의 구조를 이해
- 배열과 객체의 특징을 구분: 순서를 가진다, 의미를 가진다
* 객체의 속성(property)의 추가, 조회, 변경, 삭제하기
- tweet.content 와 tweet[‘content’]의 차이 이해
- dot notation을 이용한 객체 할당 방식 이해: obj.a=”hello”
- 객체 속성 삭제: delete 키워드
- 객체를 위한 for문: for … in 문

---

객체 기초

이름, 이메일, 주소 라는 변수를 가지는 다양한 사용자들의 정보를 만드는 경우를 생각?
→ 문자열로 표현할 경우? 배열로 표현할 경우?
→ 다 문제가 존재함
→ 객체를 사용한다면 이를 깔끔하게 표현 가능

ex)
let user = {    // 중괄호로 객체를 생성
    firstName: ‘steve’,    // 키와 값 사이는 콜론(:) 으로 구분함
    lastName: ‘lee’,        // 여기서 [lastName]이 key 부분, [‘lee’]부분이 값(value)
    email: ‘steave@code.com’,    // 키-값 쌍은 쉼표로 구분
    city: ‘seoul’
    };

→ 객체는 키와 값의 쌍(key-value pair)으로 이루어져 있다

객체의 값을 사용하는 방법: 2가지

방법1: Dot notation

변수명.key이름; 형식으로 객체 값 사용가능

ex)
et user = {    
    firstName: ‘steve’,    
    lastName: ‘lee’,        
    email: ‘steave@code.com’,    
    city: ‘seoul’
    };

user.firstName;    //’Steve’
user.city;        //’Seoul’

방법2: Bracket notation

[]를 의미
→ 변수명[‘key이름’]; 형식으로 사용 // “ “(쌍따옴표)나 (백틱)에 넣어도 동일!

ex)
et user = {    
    firstName: ‘steve’,    
    lastName: ‘lee’,        
    email: ‘steave@code.com’,    
    city: ‘seoul’
    };

user[‘firstName’];    //’Steve’
user[‘city’];        //’Seoul’

 
만약에 변수명[key이름] 으로 적어서 ‘ ’를 까먹었다면 어떨까?

→ ReferenceError: key이름 is not defined를 출력!
→ key이름을 key값이 아니라 변수로 보고 있는 상태

ex)
ex)
et user = {    
    firstName: ‘steve’,    
    lastName: ‘lee’,        
    email: ‘steave@code.com’,    
    city: ‘seoul’
    };

let keyname = ‘lastName’;    //lastName 이라는 “문자열”을 담음    // 이 문자열은 lee를 담고있음
user[keyname]    // ‘lee’ 출력
user[keyname] ===user[‘lastName’]    //true 출력
user[keyname]===user.lastName         //true

dot/bracket notation을 이용해 값을 “추가”

변수명.새로운key명 = value ;
변수명[‘새로운key명’] = value;

delete 키워드를 이용한 “삭제”

delete 변수명.삭제할key명;
delete 변수명[‘삭제할key명’];

in 연산자를 통한 키 존재 “확인”

‘확인할key명’ in 변수명;    // 있으면 true 없으면 false

dot notation 과 bracket notation의 차이?

bracket notation을 반드시 써야 하는 경우?

→ key가 동적으로 변할 때
 

ex)
const person = {
name: 'Steve',
age: 16,
};

function getProperty(obj, property) {
    return obj[propertyName];    // 이런식으로 key가 name, age를 오갈때
                        // 변수인자명[키인자명]
}

객체에서의 반복문 : for..in

객체에서 반복문을 사용할 때는 for...in 구문을 사용
→ for(let key이름 in obj인자이름) 형식으로 사용

ex)
function allKey(obj){
    for(let key in obj){    // for(let key이름 in obj인자이름)
    console.log(key);
    }
}            //객체의 모든 key를 콘솔에 출력

// 두 개의 객체를 입력받아 두 번째 객체의 속성들을 첫 번째 객체에 추가하는 함수의 경우

function extend(obj1, obj2) {
   for (let key in obj2) {    //for...in 구문 사용
    if (!(key in obj1)) {
      obj1[key] = obj2[key];
    }
  }
}

for...of 구문

객체에서는 사용불가
string, array, 유사배열에서 사용 가능한 반복문

for (let arr[i] of arr)가 for (let i = 0; i < arr.length; i += 1) 과 같다라고 생각하면 됨

Array.from(문자열);

문자열을 배열화시켜서 저장
→ 문자열에서만 사용가능

const str = '987654';

const fromStr = Array.from(str);
// fromStr: [ '9', '8', '7', '6', '5', '4' ]

const modifyStr = Array.from(fromStr, e => e*3);
// modifyStr: [ 27, 24, 21, 18, 15, 12 ]
// 뒤의 e => e*3 은 callback 함수입니다
// return 함수로 사용할 수 있습니다

push 사용법(배열) //배열에서 사용가능

result.push(arr[i]); //들어갈배열.push(들어갈 값)

concat

concat() 메서드는 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환
→ 기존배열을 변경하지 않습니다.(immutable)!
→ 추가된 새로운 배열을 반환합니다

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3);
// expected output: Array ["a", "b", "c", "d", "e", "f"]

Array.prototype.slice()

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

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"]

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

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

Array.prototype.splice()

splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경

array.splice(시작인덱스, 제거할요소의수, 배열에 추가할 요소)

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"]

Array.prototype.join()

join() 메서드는 배열의 모든 요소를 연결해 하나의 문자열로 만든다
→ arr.join([separator])

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"

String.prototype.replace()

replace() 메서드는 어떤 패턴에 일치하는 일부또는 모든 부분이 교체된 새로운 문자열을 반환합니다. 그 패턴은 문자열이나 정규식(RegExp)이 될 수 있으며, 교체 문자열은 문자열이나 모든 매치에 대해서 호출된 함수일 수 있습니다.
→ pattern이 문자열 인 경우,첫 번째 문자열만 치환이 되며 원래 문자열은 변경되지 않습니다.

→ 새로운 문자열을 반환하고 원래 문자열은 변경되지 않으므로 immutable!

test.replce("해당문자","변경할문자")    //test라는 변수에 문자 중에 해당문자에 들어가 있는 내용을 변경할 문자에 있는 형식으로 변경한다.

만약 바꾸고 싶은 문자가 다수인 경우는?
test.replace(/,/gi,"")    // 이런식으로 (/바꿀문자/gi , 대체할단어 )

---

나를 위한 짧은 정리

블로깅 할때 어떤 문제를 풀어가는 데에 있어서
나만의 풀이 방법을 만들어서 정리하는 것이 좋다!
 
→ 블로그 내용은 단순한 내용 정리 보다는
도움이 될 만 한 기술 내용을 쓰는 것이 좋다
 
→ 지금은 내용 정리만 올리더라도 나중에라도 시간이 나면 조금씩 기술 정리하듯이 나만의 문제풀이법을 정리해서 짧게나마 올려보자...

---