[비트캠프] 23일차(5주차3일) - Javascript(배열, 반복문, destructuring)

 

배열

 

const arr = ["aaa", "bbb", true, 100]; 로 단축문법으로 사용한다.

const arr = new Array(); 로 다음과 같이 진행된다.

① new

② Array() : Array() 호출 - 1. object() 생성자 호출. 2. Array() 실행

빈 객체에 용도에 따라서 필요한 변수나 함수 등을 채워넣는 일을 하는 아주 특별한 함수 = 생성자(constructor) = 객체가 자신의 역할을 제대로 수행할 수 있도록 필요한 값과 함수를 준비하는 일을 한다.

③ 배열에 값 추가

arr[0] = "aaa"; 등으로 값 추가된다.

 

 

 

for 반복문

 

실행 순서는 ①~④까지 위와 같다. ②에서 true이면 ③으로 가고, false면 exit한다.

 

 

반복문 - for(... in 배열)

배열의 개수 만큼 인덱스를 꺼내온다.

const arr = ["aaa", "bbb", true, 100];

for (let i in arr) { // i 변수에 저장되는 것은 배열의 인덱스이다.
    console.log(i, arr[i]);
}

 

 

반복문 - for(... in 객체)

for(x in 배열)을 지정하면 프로퍼티 이름을 꺼내온다.

객체에 저장되는 값(property)은 숫자, 문자열, 논리, 함수 주소, 객체 주소, ...

    const obj = new Object(); // 빈객체 생성 + 기본 프로퍼티 추가

    // 기본 객체에 개발자가 프로퍼티 추가
    obj.name = "홍길동";
    obj.age = 20;
    obj.tel = "1111-1111";
    obj.working = true;

    let i;
    for (i in obj) {
      // 반복문의 대상이 객체일 경우,
      // i 변수에 저장되는 것은 객체에 저장된 프로퍼티 이름이다.
      console.log(i, obj[i]);
    }

for()를 통해 프로퍼티를 꺼낼 때는 반복문으로 꺼낼 수 있도록 허가된 프로퍼티에 대해서만 꺼낼 수 있다.
객체 생성 후 추가한 프로퍼티는 반복문으로 꺼낼 수 있다.
=> Object() 생성자가 추가한 프로퍼티는 꺼낼 수 없다.

 

 

 

객체와 프로퍼티

 

obj.company = new Object(); 하면 다른 객체의 주소가 객체 안에 들어간다.

obj.company.print = function () {-}; 

OMG 표준 - 

UML

Unified (단일화된/통일된)

Modeling (생각한 바를 글과 그림으로 표현)

Language (글, 그림을 작성하는 문법)

 

 

 

반복문 - for(변수 선언 of 배열)

for(x of 배열)을 지정하면 인덱스가 아니라 값을 가져온다.

const arr = ["aaa", "bbb", true, 100];
let v;
for (v of arr) {
  // v 변수에는 인덱스가 아니라 배열에서 꺼낸 값이 저장된다.
	console.log(v);
}

 

 

반복문 - for(변수 선언 of iterable 객체)

일반 객체는 이 반복문을 사용할 수 없다. iterable 프로토콜을 구현한 객체라면 이 반복문을 사용할 수 있다.
예) Array, Map

    var obj = new Object();
    obj.name = "홍길동";
    obj.age = 20;
    obj.tel = "1111-1111";
    obj.working = true;

    // 일반 객체는 for...of 반복문을 사용할 수 없다.
    //실행 오류 발생!
    for (var v of obj) {
      console.log(v);
    }

 

아래와 같이 Map() 으로 초기화한 객체는 for 사용 가능하다.

    var obj2 = new Map(); // Map으로 초기화시킨 객체는 iterable 객체이다.
    obj2.set("name", "홍길동");
    obj2.set("age", 20);
    obj2.set("tel", "1111-1111");
    obj2.set("working", true);

    for (var x of obj2) {
      // x는 배열이다.
      // x[0]은 key, x[1]은 value이다.
      console.log(x);
      console.log(x[0], "=", x[1]);
    }

 

destructuring 문법을 사용하여 key와 value를 분해하여 받는다.

    for (var [key, value] of obj2) {
      console.log(key, "=", value);
    }

 

 

 

destructuring

 

구조 분해(destructuring) - 배열

배열은 [ ] 로 분해한다.

기존에는 왼쪽과 같이 let key = a[0], let value = a[1] 로 배열 값을 저장한다.

destructuring 하면 오른쪽과 같은 방법으로 좌변에 변수를 두 개 지정한다.

destructuring시 좌변에 변수 4개 지정하면 우변 배열의 4개 값이 다 변수에 들어간다.

좌변에 변수 2개 지정하면 우변 배열의 앞 2개 값만 들어간다.

// 값을 분해하여 여러 변수에 받을 수 있다.
var arr = ["홍길동", "1111-2222", true, 20];
console.log(arr);

// 보통 한 개의 변수에 한 개의 값을 받는다.
var n = arr[0];
var t = arr[1];
var w = arr[2];
var a = arr[3];
console.log(n, t, w, a);
console.log("----------------");

// 배열의 값을 분해해서 받을 수 있다.
var [name, tel, working, age] = arr;
console.log(name, tel, working, age);
console.log("----------------");

// 배열 개수 보다 적은 변수를 선언하면 그 변수 개수만큼만 분해해서 받는다.
var [name2, tel2] = arr;
console.log(name2, tel2);

 

 

구조 분해(destructuring) - 객체

객체는 { } 로 분해한다.

객체의 destructuring은 좌변에 우변과 동일한 변수 이름을 지정하면 우변의 객체에서 동일한 변수 이름을 가진 key의 value가 들어간다. 좌변에 우변과 다른 이름이 있으면 undefined가 된다.

document 기본 객체인 body는 위 문법으로 변수에 넣을 수 있다.

 

var obj = new Object();
obj.name = "홍길동";
obj.age = 20;
obj.tel = "1111-1111";
obj.working = true;

// 객체에서 값을 여러 변수에 분리하여 담을 때는 
// 객체의 프로퍼티 이름과 같은 이름으로 변수를 선언한다.
// => 분해 변수의 이름과 일치하는 프로퍼티 값을 넣어준다.
var {tel, name, age, gender} = obj;
console.log(name);
console.log(age);
console.log(tel);
console.log(gender); // 객체에 지정된 이름의 프로퍼티가 없다면 undefined 이다.

 

 

구조 분해(destructuring) - 객체 II

나머지 값을 별도 객체에 담는 방법이다. Object 타입을 갖는다.

var obj = new Object();
obj.name = "홍길동";
obj.age = 20;
obj.tel = "1111-1111";
obj.working = true;

// 객체에서 특정 프로퍼티 값을 분리하여 받은 후에
// 나머지 값을 별도의 객체에 담아서 받고 싶다면
// {변수1, 변수2, ...나머지값받을변수}
var {age, tel, ...other} = obj;
console.log(age);
console.log(tel);
console.log(other);
console.log(other.name);
console.log(other.working);

 

 

구조 분해(destructuring) - 함수 리턴 값

배열을 destructuring 할 때 배열의 중간을 건너 뛰고 변수에 받을 수 있다.

    function f1() {
      return ["홍길동", 100, 90, 80, 270, 90];
    }

    // 함수의 리턴 값이 배열이기 때문에
    // 배열을 값을 destructuring 하는 문법은 같다.
    var [name, kor, eng, math] = f1();
    console.log(name, kor, eng, math);
    console.log("-----------------------");

    // 배열의 중간 값을 건너 뛰고 변수에 받을 수 있다.
    var [name, , , , sum, aver] = f1();
    console.log(name, sum, aver);

 

 

구조 분해(destructuring) - 함수 리턴 값 II

객체를 받을때 프로퍼티와 일치하는 이름의 변수만 받는다.

function f2() {
  var obj = new Object(); 
  obj.name = "홍길동"; 
  obj.age = 20;
  obj.tel = "1111-1111";
  obj.working = true;
  return obj;
} 

// 보통 다음과 같이 함수가 리턴한 객체를 통째로 받는다.
// 실제 객체 주소를 받는다.
var r2 = f2();
console.log(r2);
console.log("------------------------");

// 리턴 받은 객체에서 값을 꺼낼 때 
// 프로퍼티와 일치하는 이름의 변수를 선언하면 된다.
var {tel, age} = f2();
console.log(tel, age);

 

 

변수 - const 객체

const 변수에 객체를 할당한다면,
=> 실제로 객체의 주소가 할당되는 것이다.
변수를 다른 객체의 주소로 변경할 수 없지만,
=> 그 변수가 가리키는 객체에 대해서는 변경할 수 있다.
즉 const 로 선언한 변수는 변수의 값만 못 바꾼다는 것이다. 그러나 const 변수가 가리키는 객체의 프로퍼티는 바꿀 수 있다.

 

 

변수 - let

let으로 선언한 변수는 사용 범위가 블록으로 한정(block-scoped)된다.
let 으로 선언한 변수는 window 객체에 보관되지 않는다.

 

 

변수 - let II

if, for 등의 블록에서 var로 선언한 변수는 글로벌 변수이다.

for (var i = 0; i < 5; i++) {
      console.log(i);
    }

 

 

 

---

 

조언

 

*

 

 

---

 

과제

 

tictactoe 현재 클릭시 O인지 X인지 마우스 포인터에 나타내는 것 연구