JS 기초

객체

• 배열
  다양한 값을 나열.
  const fruit = ['김', '김부각', '미역']
  배열 안의 데이터에 접근하고 싶다면
  console.log(fruit[0(1,2,3,4...)])
  배열 안에는 다른 배열이나 변수를 넣을 수도 있다.

  • 배열의 요소 개수구하기.
    배열 뒤에 .length
    console.log(fruit.length)
    만약에 배열이 아래와 같다면?
    const arr = [null, undefined, NaN, false,'']
    빈값도 유효한 값이기 때문에 요소 개수를 셀 때 포함된다.
  • 배열에 요소 추가하기.

    const arr = ['h', 'i', 't', 'h', 'e', 'r'];
    arr[6] = 'e';
    console.log(arr);

    ※엄청 긴 배열의 마지막 요소에 추가하기.

    const arr = ['h', 'i', 't', 'h', 'e', 'r'];
    arr[arr.length] = 'e';
    console.log(arr);

  • 배열의 제일 앞에 요소 추가하기.

    const arr = ['i', 't', 'h', 'e', 'r', 'e'];
    arr.unshift('h'); // 여러개 추가가능
    console.log(arr);

  • 배열의 제일 뒤에 요소 추가하기.

    const arr = ['h', 'i', 't', 'h', 'e', 'r'];
    arr.push('e'); // 여러개 추가가능
    console.log(arr);

    const는 상수인데 수정가능한 이유가 뭘까?
    const는 엄밀히 상수가 아니다. 상수이긴 하지만? 객체 내부를 바꿀 수는 있지만 객체 자체를 바꿀 수는 없다.

    const arr = ['h', 'i', 't', 'h', 'e', 'r'];
    arr = ['h', 'e'];  //불가능
    arr[0] = 'H' //가능

    '=' 이라는 것을 통해서 const라고 지정된 것 자체를 바꾸는 것은 불가능하다.
    
    
  • 배열에서 마지막 요소를 제거

    const arr = ['h', 'i', 't', 'h', 'e', 'r'];
    arr.pop(); 
    console.log(arr);

  • 배열에서 첫번째 요소를 제거

    const arr = ['h', 'i', 't', 'h', 'e', 'r'];
    arr.shift();
    console.log(arr);

    인덱싱을 통해서 마지막껄 제거 할 순 없을까?
    아래와 같이 하면 null이라는 요소가 배열에 들어가게 된다.
    왜냐하면 배열은 null, undefined, false 등을 다 요소로서 받아들이기 때문.
    따라서 마지막 요소를 제거하려면 .pop()을 사용해야한다.

    arr[arr.length - 1] = null

    ※참고사항. shift와 unshift
    unshift로 숫자를 지정해서 앞에 넣지만, shift에서
    
  • 배열 안에 있는 요소 제거.

    const arr = ['h', 'i', 't', 'h', 'e', 'r'];
    arr.splice(1,1); // i가 사라짐. (1,3) 하면 i, t, h가 사라짐. (1) 하면 1 이후의 모든 것 삭제.
    console.log(arr);

  • 배열 안에 있는 요소 제거 및 데이터 추가

    const arr = ['h', 'i', 't', 'h', 'e', 'r'];
    arr.splice(1,5, 'e', 'l', 'l', 'o')
    console.log(arr);

    
    그럼 (1,'e', 'l', 'l', 'o') 처럼 1 이후의 모든 것은 지워버리고 요소를 넣을 수 있을까?
    그렇지 않아보인다. (2, 'i', 'e', 'y')의 경우, i는 생략되고 2번째에 e, y가 들어가고 밑에도 (n, 1번, 2번, 3번) 에서 1번 요소는 생략, 2번, 3번 요소만이 배열의 n번째에 들어가게 된다.
    
    splice를 통해서 데이터 삭제는 하지않고 추가만 할 수 있을까?
    .splice(넣으려는 위치, 0, 넣으려는 요소) 를 하면 추가가능.

    const arr = ['h', 'i', 't', 'h', 'e', 'r'];
    arr.splice(6,0, 'e');
    console.log(arr);

    
  • 배열에서 요소찾기.
    true, false를 반환.

    const arr = ['h', 'i', 't', 'h', 'e', 'r'];
    arr.includes('h')

  • 배열에서 요소의 위치찾기.
    몇번째 자리에 있는지를 알려준다.
    그런데 indexOf, lastIndexOf랑 같은데??
    같은 값이 2개 들어있으면 indexOf는 앞, lastindexOf는 뒤에 것의 위치를 반환

    const arr = ['h', 'i', 't', 'h', 'e', 'r'];
    arr.indexOf('i') // 앞에서부터 요소찾기.
    arr.lastIndexOf('h') // 뒤에서부터 요소찾기.
    arr.indexOf('k') // 없으면 -1 반환

    
    
  • 배열 반복하기

    const arr = ['h', 'i', 't', 'h', 'e', 'r', 'e'];
    let i = 0;
    while (i < arr.length){
      console.log(arr[i]);
      i++;
    }

    

    ---

    const arr = ['h', 'i', 't', 'h', 'e', 'r', 'e'];
    for (let i= 0; i < arr.length; i++){
    console.log(arr[i]);
    }

    
  • 원하는 문자만 다~ 빼기

    const arr = ['h', 'i', 't', 'h', 'e', 'r', 'e'];
    while(arr.indexOf('e') > -1){
    arr.splice(arr.indexOf('라'), 1)
    }
    console.log(arr)

    밑의 index= arr.indexOf('e')를 왜 붙여줘야할까?
    맨위에서 let index = arr.indexOf('e') >> index는 4가 된다. 반복문 밖에 있기때문에 index는 계속해서 4로 고정된다. 반복문 안에서 index의 값을 재설정 해주지 않으면 다음 e로 넘어가질 못한다. 그렇기 때문에 index=arr.indexOf('e') 를 반복분 내에 입력하고 e를 하나 뺀 배열에서의 index의, 즉, arr.indexOf('e')의 값을 다시 찾아줘야한다.

    let index = arr.indexOf('e')
    while (index > -1){
    arr.splice(index, 1);
    index = arr.indexOf('e');
    }

함수

• 이름 붙여주는 방법

  function a() {} // 함수선언문
  const b = function() {}; // 함수표현식
  const c = () => {}; // 화살표함수

  ※참고사항.
  위에 const b, c 에는 ; 를 붙였는데 function은 왜 안 붙이나? 그냥 오래된 관습 같은 거.
  if, for, while, 함수선언문에는 ;를 안 붙인다.

• 함수 선언과 호출
  함수 선언을 했다고 값이 출력되는 것이 아니라 호출을 해줘야지 출력이 된다.

  function a(){} // 함수 선언
  a(); // 호출 

  return은 값을 출력하는 동시에 함수를 종료한다.
  따라서 whats up은 나오지 않는다.
  
  return은 하나의 값만 출력하기 때문에 여러 개를 출력하고 싶으면 배열을 사용.
  

• 매개변수와 인수
  함수 선언할 땐 파라미터-매개변수, 함수를 실행할 땐 argument-인수

  function a(parameter){
    console.log(parameter);
  }
  a('argument');

  인수가 3개이면 인수가 없는 파라미터는 undefined을 반환.
  console.log에 Arguments를 찍어주면 a의 인수에 뭐가 들어갔는지를 배열 형태로 알려준다.
  
  인수가 3개이고 매개변수가 2개이면?
  인수 2개만 나온다.
  
  ※화살표함수는 {} 생략해서도 사용할 수 있다.

  const f= (x,y,z) => {
    return x*y*z;
  }
  f(2, 3, 4)
  
  const f = (x, y, z) => x*y*z; // {} 생략 

• 객체 리터럴
  배열, 함수가 아닌 것들 중에 특정 모양을 갖춘 것들.
  값(value)에 이름(key)가 붙어있다.

  const your_info ={
   name: 'peter',
   age: 21,
   gender: 'M',
  }

  객체 리터럴에서 원하는 값을 꺼내려면 .keyname / [key_name] 을 붙여주면 된다.
  
  .key_name / [key_name] 의 차이
  .key_name은 숫자가 섞인 문자, 빈 칸이 섞인 문자에서는 값을 출력을 못한다.(gender은 잘 출력됨.)
  

• 객체 속성 수정.

  const your_info ={
   name: 'peter',
   age: 21,
   gender: 'M',
  }
  
  your_info.gender = 'F' // 수정

  

• 객체 속성 삭제.

  const your_info ={
   name: 'peter',
   age: 21,
   gender: 'M',
  }
  
  delete your_info.gender // 삭제

  
  ※배열과 함수가 객체인 이유.
  

• 메서드
  객체의 속성값으로 함수를 넣었을 때, 이 속성을 메서드라고 한다.
  밑의 코드에서 log는 debug 객체의 메서드.
  

• 객체 간의 비교
  객체 간의 비교를 하면 항상 false.
  숫자, 문자열, 불값, null, undefined는 모두 true
  {}==={}
  
  아래처럼 또다른 변수를 만들고 거기에 참조를 할 수 있게 해주면 true를 반환 받을 수 있다. 여기서 알 수 있는 것은 b 와 c[1]가 [1,2,3,4] 라는 것을 참조하고 있다는 것이다.
  

• 참조와 복사
  변수 c에 b를 대입. b 변수의 name 값을 변경 했는데, c 변수도 같이 변경. 객체를 저장한 변수를 다른 변수에 대입하면 두 변수 모두 같은 객체를 저장. 이러한 상황일 때 'b와 c가 같은 객체를 참조하고 있다고 한다', 'b와 c를 객체 간에 참조 관계에 있다'고 표현.
  

  ---

  ++추가사항++
  delete를 배열에서도 사용할 수는 있다. 하지만 empty라는 값이 지워진 부분에 남게 된다. 따라서.. 굳이 delete를 배열에서 사용할 필요는 없어보인다.