TIL #0326

배열

배열은 순서(index)가 있는 값(요소 element)들의 집합이다.
index는 0부터 시작

let array = [[73, 99], [86, 61], [26, 30]];

array라는 배열의 3번째 index는 undefined이다
array[3];   // undefined
array라는 배열의 1번째 index는 [86, 61]이다
array[1];   // [86, 61]
array라는 배열의 2번째 index의 0번째 index는 26이다
array[2][0];   // 26
array라는 배열의 4번째 index에 24를 추가한다
array[4] = 24
array;
// (5)[Array(2), Array(2), Array(2), empty, 33]
array라는 배열의 3번째 index의 값을 조회
array[3];   // undefined

배열로 할 수 있는 것들

.(dot)을 이용해 관련된 method를 실행할 수 있다.

• 배열의 길이
  array.length;

• 요소element 추가, 삭제하기

배열의 맨 뒤의 값element 추가

array.push(5, 0);
array.push([23, 30]);   // 배열 속 배열 추가도 가능

배열의 맨 앞의 값element 추가

array.unshift(33);

배열의 맨 뒤의 값element 삭제

array.pop();

배열의 맨 앞의 값element 삭제

array.shift();

MDN 배열 메소드
대부분의 method를 실행할 때 함수 실행하듯 괄호를 열고 닫는 형태로 실행하면 된다.

객체

객체 선언 (객체 만들기)

let user = {
  firstName: 'Adela',
  lastName: 'K',
  email: 'abc@ab.com',
  city: 'Busan'
};

let user ={};
user['firstName'] = 'Adela';
user.lastName = 'K';
user.email = 'abc@ab.com';
user["city"] = 'Busan';

키key : 값value
key-value 쌍을 ' : 콜론 '으로 구분하고, { } curly bracket으로 감싸 객체를 만든다.

객체의 속성에 접근하는 방법

1. Dot notation
   user.firstName; //'Adela'

2. Bracket notation

user['city'];   //'Busan', key가 문자열형태로 ''안에 들어간다
user[city];   
/* referenceError: city is not defined
city는 변수로 취급된다
키 값이 동적으로 변할 때(변수일 때) >> ""없이 []에 넣어 코드를 작성하면 된다.
해당 key를 user객체에 추가할 경우 해당key를 ""로 감싸야 한다. */
let keyname = 'email';
user[keyname];   //'abc@ab.com' 

3. Dot/Bracket notation을 이용해 값을 추가하고 삭제할 수 있다.

• 추가

user.isFemale = true;
//user객체에 key와 value 추가
user;
{firstName: "Adela", lastName: "Kwon", email: "abc@ab.com", city: "Busan", isFemale: true}

• 삭제

delete user.isFemale;
//user객체에 key와 value 삭제
user;
{firstName: "Adela", lastName: "Kwon", email: "abc@ab.com", city: "Busan"}

4. in 연산자를 이용해 해당하는 키가 있는지 확인할 수 있다.

let user = {
  firstName: "Adela",
  lastName: "Kwon",
  email: "abc@ab.com",
  city: "Busan"
}

'city' in user;  //true
'address' in user;  //false

반복문

같거나 비슷한 코드를 여러번 실행시켜야 할 경우에 사용한다.
반복할 조건과 반복할 내용이 있으면 쓸 수 있다.

for loop

반복할 조건을 초기화 조건식 증감문 순으로 넣는다.

for(let n = 0; n <5; n=n+1){
  console.log('hello world');
}    //'hello world'를 콘솔창에 5번 출력

while loop

if문 처럼 안에다 반복할 조건만 적어주고 나머지는 따로.

while (이 조건을 충족할 때, 이 조건이 true일 때){
  여기 있는 코드를 반복실행
}

초기화나 증감문이 필요없을 때 쓰면 되고 for loop과 개념은 똑같다.

let n = 0;
while(n <5){
  console.log('hello world');
  n = n+1;
}

배열 + 반복문

num의 모든 element를 누적해서 더한값은?
결과를 sum이라고 하면

let num = [10, 20, 40, 10];
let sum = 0;   
for (let i=0; i< num.length; i++){
  sum = sum + num[i];
}

let sum = 0 으로 초기화 하지않고
let sum; 처럼 값 할당을 안해주면 sum의 초기값은 undefined가 된다.

⇨ undefined + 10 = NaN
따라서 변수 sum을 0으로 꼭 초기화해준다.

DATA TYPE

구분	Primitive Type	Reference Type
종류	Boolean number String null undefined	Object -array -function -object
값의 전달 형태	값이 저장된 메모리 영역에 직접 접근	값이 직접 해당 변수에 저장되지 않고 데이터의 위치 주소값만 저장
속성	immutable	자바스크립트 엔진이 변수가 갖고 있는 메모리 주소로 변수의 값에 접근

primitive type ⇨ pass by 'value'

원시 데이터 타입 또는 기본 데이터 타입 이라고 한다.
변수를 선언하고, 초기화, 할당할 때 값이 저장된 메모리영역에 직접 접근한다.

즉, 어떤 변수에 새로운 값이 할당되면, 변수가 차지하고 있는 할당 메모리 블럭에 새로 저장된 값을 바로 변경한다.

method는 데이터 type이 객체의 성격을 가질 때 붙는다.
그런데 어떻게 원시타입인 string이나 Number, Boolean도 객체인 것처럼 메서드를 가질 수 있게 되는 것일까? ex)string.length
⇨ 자바스크립트는
래퍼객체에 대해 일시적으로 객체화 되는 것을 허용한다. 따라서 객체처럼 method 사용가능해진다.

래퍼객체 3가지 : 숫자형(Number), 문자열(String), 조건형(Boolean)

❌ undefined.toString() ❌ 래퍼객체가 아닌 원시타입은 메서드 아예 사용 불가

immutable : string에 method를 사용하면 원본 string은 변함없다.

Reference Type ⇨ pass by 'reference'

변수에 값이 할당될 때, 값이 직접 해당 변수에 저장되는게 아니라 위치 주소값만 저장한다.

변수의 값이 저장된 메모리 블럭의 주소를 갖고 있고, 자바스크립트 엔진이 변수가 가지고 있는 메모리 주소를 이용해서 변수의 값에 접근한다.