[Js/Node][Codestates] JS/Node 배열, 객체

JS/Node 배열, 객체

Achievement Goals - 배열

배열 기초

• 배열에서 사용되는 다음 용어에 대해 이애할 수 있다.
  • index, element, length
  • arr[0], push, pop
• 배열에서 특정 인덱스(Index)의 요소(element)를 조회하거나, 변경할 수 있다.
• 배열의 요소가 배열인 이중 배열을 이해할 수 있다.
• 이중 배열의 요소를 조회하거나 변경할 수 있다.
• 배열의 요소를 반복적으로 불러오는 방법을 이해하고 사용할 수 있다.
• 배열의 각 요소에 대하여, 반복하는 코드를 실핼시킬 수 있다.
  • 기본적인 for 문 for (let i=0;i<5;i++) 을 웅용하여 다양한 for 문을 만들 수 있다.
  • 반복문에 조건문을 응용하여 특정 조건에서만 코드를 실핼시킬 수 있다.
  • 이중 반복문이 무엇인지 이해하고 활용할 수 있다.
• 배열과 반복문을 활용하여 실행활에서 접할 수 있는 간단한 문제를 해결할 수 있다.
• 문자열과 배열의 타입 변환을 돕는 매소드를 알고있다.
  • 띄어쓰기 (" ")로 문자열을 구분하여, 배열로 변경할 수 있다. str.split("").joinI(" ")
  • 문자열을 요소로 가지는 배열을 띄어쓰기 (" ")로 구분한 문자열로 변경할 수 있다.
  배열 기초 메소드
  • 배열 요소(element)를 조회할 수 있다. bracket notation
  • 배열을 복사, 분리하는 법을 이해할 수 있다. slice , splice
  • 변수, 데이터, 또는 측정 값이 배열인지 아닌지 판별할 수 있다. Assy, isAssy
  • 배열의 요소(elemtnt)를 추가 및 삭제할 수 있다. push, unshift, pop, shift
  • 배열의 길이를 구할 수있다. length
  • 변수, 데이터, 또는 특정 값이 배열에 포함되어 있는지 확인할 수 있다. indexOf, includes
  배열의 기초
  • 순서는 index 라고 부르고, 값은 element로 부른다.
  • 선언 방식 : lie my/num=[44,55,33] (square bracket)
    element는 문자도 가능하다.
• (1) 배열은 순서가 있는 값
  [0] [1] [2] [3] [4]
  11 12 13 45. 56
• 배열 실습

index 벗어나면 undefined 이다

배열의 반복

반복문과 함께 배열은 많이 사용됨

반복문을 이용하여 요소 출력

모든 elements 합

sum=0으로 초기화를 해주지 않으면 sum=undefined 이므로 sum+10=NaN이 나오므로 초기값 0을 꼭 넣어주자

배열 기초 매소드

(1) 배열인지 아닌지 확인하기

typeof [1,2,3] --> obj
typeof {a:1} --> obj

무엇이 object인지 판단하기 어려움 --> Array.isArray() 를 사용하여 판별한다. methode 이므로 ( ) 를 넣어준다.
Array.isArray('word') --> false
Array.isArray([1,2,3]) --> true
배열이 아닌 경우 false가 나온다.

(2) 배열 요소 추가 및 삭제하기

• console.table

console.table

배열을 넣으면 index와 value를 시각적으로 볼 수 있다.

• push : 마지막 값 element를 추가

push()

• pop() : 마지막 값 삭제
• shift() : 첫 번째 값 삭제

• unshift() : 첫 번째에 값 추가

(3) 배열 요소 포함 여부 확인하기

• indexOf()
  • 특정 단어가 있으면 index 를, 없으면 -1을 리턴한다.
  • 특정 단어가 있는지 없는지에 대한 검사는 -1을 이용하여 가능함
  • 대소문자를 구분하므로 유의하기Q. 그럼 특정 문자가 있는 인덱스를 모두 찾는 인덱스가 있남??

• 존재 유무를 확인하는 것을 utiluty 함수로 만들어 확인해보기

• words.includes() 라는 매소드도 비슷한 동작을 함
• includes()
  • 단점 : 브라우저 호환성에서 internet Explorer 에서 작동이 안된다.
  • includes 보다는 indexOf를 사용하는 것이 더 나을 수 있다. (모든 브라우저에서 호환이 가능하기 때문)
  • addTpFront
    addToBack
    removeFronFront
    removeFromBack
    보기?

Achievement Goals - 객체

• 배열과 객체의 구조를 이해하고, 언제 어떻게 사용하는지 이해할 수 있다.
  • 배열과 객체의 특징을 구분하여 사용할 수 있다. (순서를 가진다, 의미를 가진다)객체 기초
  • 배열과 객체의 특징에 따라 실행활에서 언제 쓰는지 이해할 수 있다.
• 객체 속성(protersy)의 추가, 조회, 변경, 삭제를 자유자재로 할 수 있다.
  • 객체 속성 조회법 두 가지, dot notation과 bracket notation의 차이를 이해한다.
  • 객체실습-2의 tweet.content와 tweet['content']의 차이가 무엇인지 설명할 수 있다.
  • dot notation을 이용한 객체 할당 방식을 능숙하게 다룰 수 있다. obj.a="hello"
  • 객체 속성 삭제를 위한 delete 키워드를 사용할 수 있다.
  • 객체를 위한 for...in 문을 이애하고 다룰 수 있다.
• 배열과 객체, 반복문을 능숙하게 대량의 정보를 다룰 수 있다.

객체 기초

(1) 객체 (Object)

• 공통적으로 속성을 갖는 경우 객체를 사용해야 한다. (ex 입력 항목은 같지만, 입력하는 정보는 사용자마다 다른 경우)
• 공통 속성을 갖는 경우 객체를 쓰지 않았을때, 매변 변수를 선언해 주어야 하며 변수를 많이 선언해야 하고 공통적인 속성을 갖는 변수들의 이름으로만 추측을 할 수밖에 없음. 또한 변수는 이름으로 구분할 수 있을 뿐 어떠한 관계도 없다.
• 배열로 사용 할 경우 각 값이 하나의 변수로 묶여있지만, 각 indexrk 어떤 정보를 갖고 있는지 미리 알고 있어야 하며 index로 접은할 경우 가도성도 떨어진다.
• 객체는 하나의 변수 안에 여러가지의 정보가 들어가 있을 때 사용하기 적합한 자료구조 이다.
  • 객체의 선언

  let user={ firstName:'Sora', // 키(Key) : 값(value) 
  lastName:'Kang', 
  email:'ssssss@gmail.com',
  city:'Seoul' };

  • 객체는 키와 값 쌍으로 이루어져 있다 (Key-Value pair)
  • curly bracket을 이용하여 객체를 만든다.
  • 키-값 쌍은 쉼표로 구분해준다.
  • 객체의 값을 사용하는 방법 (2 가지)
  (1) Dot notation(2) Bracket notation
  • 대괄호 내용이 '' (문자열) 로 입력이 된다.
• user ['fitstName'];
  user ['city'];
• user.firstName; //'Sora'
  user.city; //'Soul'

• Bracket notation을 사용할 때 흔히 하는 실수
• tweet['content'] // 키를 문자열 혈태로 할당 --> '프리코스 재밌어요!' tweet[content] // --> Uncaugth ReferenceError: content is not defined at <anonoymous>:1:7 애러가 뜬다
• Error를 보면 왜 나왔는지를 발견하고 대처를 해보는 것이 프로그래밍 실력 향상에 도움이 된다.
  Reference 즉 참조애러이고, content아 정의된 적이 없다는 메세지.
  정의되지 않은 변수를 사용 할 경우 나오는 Error 이다.
• dot notation 과 Bracket notation을 사용해야 할 경우는?
  • [] : Key 값이 변수일 경우 (동적으로 변할 떄) 사용한다.
  • dot notation은 동적으로 사용하지 못한다. --> 정해진 키가 있어야 한다.
  • Bracket notation을 사용하는 경우

위와같이 함수에 객체가 매개변수로 들어 갈 경우는 동적으로 입력이 되어야 하기때문에, Bracket notation을 사용한다.

• dot,bracket notation을 이용하여 값을 추가.삭제도 할 수도 있다.
• 
• in 연산자를 이용하여 키가 있는지 확인 할 수도 있다.
• 

배열, 객체에 적용되는 매소드

(1) 빈 배열을 확인하는 가장 쉽고 직관적인 방법
: arr.length==0 // arr===[] 은 주소가 다른 두 개의 빈 배열을 비교한느 것이므로 false 이다

(2) 문자열을 배열로 바꾸는 방법

let soracoding="010-1234-5677"
let codingArr=soracoding.split("-")
--> ["010","1234","5678"]

• split은 전달인자로 들어가는 string을 기준으로 끊어 배열에 담아주고 그 배열을 리턴하는 매소드이다.
• splice는 원본 배열을 변경하는 mutator method (or mutable method 라고도 불림)이다.
  배열을 특정 인덱스 부분부터 일정 구간 만큼 제거하고, 원하면 요소를 그 자리에 더 추가할 수 있다. 기존 배열을 변경하므로 조심히 사용해야 함.
• [https://doesitmutate.xyz/](https://doesitmutate.xyz/)

[

Does it mutate?

The lastIndexOf() method returns the last index at which a given element can be found in the array, or -1 if it is not present. The array is searched backwards, starting at fromIndex.Array.prototype.lastIndexOf ( searchElement [ , fromIndex ] )

doesitmutate.xyz

](https://doesitmutate.xyz/)

매소드 사용 시 위의 사이트를 참고하자

(3) 배열의 맨 앞에 원소 추가

• unshift는 배열의 첫 번때에 원소를 추가하고 리턴하는 값은 배열의 길이이며 원본 배열을 변화시킨다.
• shift는 배열의 첫 번째 원소를 삭제하고 전달인자를 필요로 하지 않는다. 또한 리턴값은 맨 첫 번째 element 이며 원본 배열을 변화시킨다.
• pop은 배열의 마지막 element를 삭제하고 리턴하 원본 배열을 변화시킨다.

(4) 새로운 배열을 리턴

slice는 원본 배열을 변경하지 않고 새로운 배열을 복사 또는 지정 범위만큼 잡아서 원하는 만큼 집어서 사용이 가능하다.

(5) 모든 키의 값을 출력하기