자바스크립트 기본 문법 - 객체 / 배열 / 반복문

verdantgreeny·2025년 1월 2일

본캠프

목록 보기
10/56

객체

  • key - value pair

1. 객체 생성 방법

1-1. 기본적인 객체 생성 방법

    let person = {
        name: "홍길동",
        age: 30,
        gender: "남자"
    }

1-2. 생성자 함수를 이용한 객체 생성 방법

    function Person(name, age, gender) {
        this.name = name;
        this.age = age;
        this.gender = gender;
    }

    let person1 = Person("홍길동", 30, "남자");
    let person2 = Person("홍길순", 20, "여자");

2. 접근하는 방법

    console.log("1", person.name); //1 홍길동
    console.log("2", person.age); //2 30
    console.log("3", person.gender); //3 남자

3. 객체 메소드(객체가 가진 여러가지 기능 : Object.~~)

3-1. Object.key() : key를 가져오는 메소드

    let keys = Object.keys(person);
    console.log("keys =>", keys);

3-2. values

    let values = Object.values(person);
    console.log("values =>", values);

3-3. entries

key, value를 묶어서 배열로 만든 배열! (2차원 배열)

    let entries = Object.entries(person);
    console.log("entries =>", entries);

3-4. assign

  • 객체 복사
      let newPerson = {};
      Object.assign(newPerson, person);
      console.log("newPerson =>", newPerson);
      //newPerson => { name: '홍길동', age: 30, gender: '남자' }

      let newPerson2 = {};
      Object.assign(newPerson2, person, {age: 31});
      console.log("newPerson =>", newPerson2);
      //newPerson => { name: '홍길동', age: 31, gender: '남자' }

3-5. 객체 배열

  • 크기가 상당히 커 => 메모리에 저장할 때 별도의 공간에 저장
    • person1 별도 공간에 대한 주소
    • person2도 별도 공간에 대한 주소
    • str1과 str2는 직접 저장
          let person3 = {
              name: "홍길동",
              age: 30,
              gender: "남자" 
          };

          let person4 = {
              name: "홍길동",
              age: 30,
              gender: "남자" 
          };

          let str1 = "aaa";
          let str2 = "aaa";

          console.log("answer =>", person3 === person4); //false
          console.log("answer =>", str1 === str2);// true

          console.log(JSON.stringify(person1) === JSON.stringify(person2)); //문자열화 시킨 것들 끼리 비교 : true

3-6 객체 병합

    let person5 = {
        name: "홍길동",
        age: 30,
    };

    let person6 = {
        gender: "남자",
    };

    let perfectMan = {...person5, ...person6};
    console.log(perfectMan);

배열

1. 생성

1-1. 기본 생성

    let fruits = ["사과", "바나나", "오렌지"];

1-2. 크기 지정

    let number = new Array(5);
    console.log(fruits.length); //3
    console.log(number.length); //5

2. 요소 접근

    console.log(fruits[0]); //사과
    console.log(fruits[1]); //바나나
    console.log(fruits[2]); //오렌지

3. 배열 메소드

    let fruits2 = ["사과", "바나나"];
    console.log("1:", fruits2);//1: [ '사과', '바나나' ]

3-1. push

    fruits2.push("오렌지");
    console.log("2:", fruits2)//2: [ '사과', '바나나', '오렌지' ]

3-2. pop

      fruits2.pop();
      console.log("3:", fruits2)//3: [ '사과', '바나나' ]

3-3. shift

      fruits2.shift();
      console.log("4:", fruits2)//4: [ '바나나', '오렌지' ]

3-4. unshift

      fruits2.unshift("포도");
      console.log("5:", fruits2)//5: [ '포도', '사과', '바나나', '오렌지' ]

3-5. splice

      fruits2.splice(1, 1, "포도"); //1번째 요소에서 1번째 요소까지 삭제하고 "포도"로 갈아끼워줘
      console.log("6:", fruits2)//6: [ '사과', '포도', '오렌지' ]

3-6. slice

참고 : https://www.daleseo.com/js-array-slice-splice/

    let slicedFruits = fruits2.slice(1,2); // 1요소부터 2번째에 있는 걸 반환해줘?
    console.log(slicedFruits); //[ '바나나' ]

forEach, map, filter, find

(1)forEach

    let numbers = [4, 1, 5, 4, 5];
    //매개변수 자리에 함수를 넣는 것 : 콜백 함수
    numbers.forEach(function(item){
        console.log("item입니다 => " + item)
    });

(2)map : 항상 원본 배열의 길이만큼이 return 된다.

    let newNumbers = numbers.map(function(item){
        return item * 2;
    });

    console.log(newNumbers);

(3)filter

    let filteredNumbers = numbers.filter(function(item){
        return item !== 5;
    });
    console.log(filteredNumbers);

(4)find : 조건에 맞는 것 중에 첫번째만 반환

    let result = numbers.find(function(item){
        return item > 3;
    });
    console.log(result); //4

for, while => ~동안 : 반복문

1. for문

    for (let i = 0; i < 10; i++ ) {
        console.log(i); // 0 1 2 3 4 5 6 7 8 9
    }

배열과 for문은 짝꿍이다.

    const arr = ["one", "two", "three", "four", "five"];
    for (let i = 0; i < arr.length; i++) {
        console.log(i);
        console.log(arr[i]);
    }
  • ex : 0부터 10까지의 . 수중에서 2의 배수만 console.log로 출력하는 예시

//나의 답

    for (let i = 0; i <= 10; i++) {
        if (i !== 0 && i%2 === 0) {
            console.log(i + "는 짝수");
        }
    }

//튜터님

    for (let i = 0; i < 11; i++) {
        if (i >= 2) {
            if (i % 2 === 0) {
                console.log(i + "는 2의 배수입니다.");
            }
        }   
    }

2. for ~ in문

  • 객체의 속성을 출력하는 문법
        let person = {
            name: "John",
            age: 30,
            gender: "male",
        };

3. person[key]

    for (let key in person) {
        console.log(key + ": " + person[key]);
    }

4. while

      let i = 0;

      while (i < 10) {
          console.log(i);
          i++;
      }
  • while문을 활용해서, 3초과 100 미만의 숫자 5의 배수인 것만 출력하는 예
        let i = 3;

        while (i<100) {
             if ( i % 5 === 0 && i >= 5) {
                console.log(i + "는 5의 배수입니다!!");
            };
            i++;
        };

5. do ~ while

    let i = 0;
    do {
        console.log(i);
        i++;
    } while (i > 10);

6. break, continue

    for (i = 0; i < 10; i++) {
        if(i === 5) {
            break; //for문을 break를 만나면 stop한다.
        }
        console.log(i);
    }

    for (i = 0; i < 10; i++) {
        if(i === 5) {
           continue; //for문이 continue를 만나면 해당 사항에는 건너띄고 그 다음 순서로 넘어간다.
        }
        console.log(i);
    }

0개의 댓글