📝
서은 STUDY_SCRIPT
  • JAVASCRIPT 기록
  • JAVASCRIPT 문법정리
    • 데이터 저장하기
    • 데이터 불러오기
    • 데이터 실행하기
    • 데이터 제어하기
    • 면접질문 정리
  • PHP를 이용한 사이트 작업
    • PHP와 MySQL
      • 댓글쓰기
      • 회원가입
      • 로그인
      • 게시판
        • 페이지네이션 & 게시글보기
        • 수정/삭제/목록/검색
  • 생활코딩 JavaScript
    • JavaScript 입문수업
      • Basic
        • 자바스크립트 기본 세팅
        • 데이터타입
        • 변수
        • 연산자
        • 조건문
        • 반복문
        • 함수
        • 배열
        • 객체
        • 모듈
        • 정규표현식
      • 함수지향
        • 유효범위
        • 값으로서 함수
        • 값으로서 콜백
        • 클로저
        • arguments
        • 함수의 호출
      • 객체지향
        • 생성자와 new
        • 전역객체
        • this
        • 상속
        • Prototype
        • 표준내장객체의 확장
        • Object
        • 데이터 타입
        • 복제 & 참조
    • JavaScript Basic
      • 자바스크립트란?
      • 데이터타입
      • 변수와 대입연산자
      • 제어할 태그 선택
      • 비교연산자와 불리언
      • 조건문 if
      • 리팩토링
      • 배열 [ ]
      • 반복문 while
      • 배열과 반복문
        • 배열과 반복문의 활용
      • 함수
        • 함수의 활용
      • 객체 { }
        • 객체와 반복문 for~in
        • 프로퍼티와 메소드
        • 객체의 활용
      • 파일로 쪼개서 정리정돈
      • 라이브러리 & 프레임워크
      • UI & API
    • Web Browser
      • JavaScript란?
      • BOM
        • 전역객체 window
        • 사용자와 커뮤니케이션
        • Location 객체
        • Navigator 객체
        • 창 제어
      • DOM
        • 제어 대상 찾기
        • jQuery
        • HTMLElement
        • Element 객체
          • 식별자 API
          • 조회 API
          • 속성 API
        • Node 객체
          • Node 관계 API
          • Node 종류 API
          • Node 변경 API
          • jQuery 노드 변경 API
          • 문자열로 노드 제어
        • HTMLCollection
      • 이벤트
        • 이벤트 등록
        • 이벤트 전파(버블링과 캡처링)
        • 이벤트 기본 동작 취소
        • 이벤트 타입
      • 네트워크 통신
        • Ajax
        • JSON
  • NOMAD JAVASCRIPT
    • VanillaJS
      • Why JS?
      • ES5, ES6
      • Basic
        • Alert & Console
        • Variable
        • Data Types
        • Array & Object
      • Function
      • DOM
        • Event & Event handler
        • Conditional
        • Function Practice
      • Momentum App
        • Making a JS Clock
        • Saving the User Name
        • To-Do List
        • Image Background
        • Getting Weather
  • DREAM CODING
    • 자바스크립트 기초 강의 (ES5+)
      • JavaScript 역사
      • async & defer / Strict Mode
      • Variable / Hoisting / Data Type
      • Operator / if / Loop
      • Function
        • 함수의 선언
        • 함수의 표현
      • Class
      • Object
      • Array
      • Array API
      • JSON
      • Callback
      • Promise
      • Async & Await
  • WEB BOS
    • #JavaScript30
Powered by GitBook
On this page
  • 16. 변수 : 데이터 불러오기
  • 상수 : 데이터 변경X : 데이터 추가X
  • 17. 상수 (const)
  • 19. 배열 : 2차 배열
  • 20. 배열 : 개수 구하기 (.length)
  • *21. 배열 : for문
  • *22. 배열 : forEach문 / each()
  • *23. 배열 : for in
  • *24. 배열 : for of
  • *25. 배열 : map();
  • 26. 배열 : 펼침 연산자 (...)
  • 27. 배열 : 배열 구조 분해 할당
  • 28. 객체 : 데이터 불러오기
  • *29. 객체 : 키와 값 : Object.keys/values/entries
  • 30. 객체 : 변수
  • *31. 객체 : for in
  • *32. 객체 : map();
  • *33. 객체 : hasOwnProperty()
  • 34. 객체 : 펼침 연산자 : 복사
  • *35.객체 : 펼침 연산자 : 추가
  • *36. 객체 : 펼침 연산자 : 결합
  • *37. 객체 : 객체 구조 분해 할당 (=비구조화 할당)
  • *38. 객체 : 객체 구조 분해 할당 : 별도 이름 저장

Was this helpful?

  1. JAVASCRIPT 문법정리

데이터 불러오기

변수, 상수, 배열, 객체 → 출력

16. 변수 : 데이터 불러오기

{
    let x = 100, y = 200, z = "javascript";

    document.write(x); //100
    document.write(y); //200
    document.write(z); //javascript
}

상수 : 데이터 변경X : 데이터 추가X

17. 상수 (const)

{
    const x = 100, y = 200, z = "javascript"

    document.write(x); //100
    document.write(y); //200
    document.write(z); //javascript
}

19. 배열 : 2차 배열

{
    const arr = [100, 200, ["javascript"]];

    document.write(arr[0]);    //100
    document.write(arr[1]);    //200
    document.write(arr[2][0]); //javascript
}

20. 배열 : 개수 구하기 (.length)

{
    const arr = [100, 200, "javascript"];

    document.write(arr.length); //3
}

*21. 배열 : for문

{
    const arr = [100, 200, "javascript"];

    for(let i=0; i>arr.length; i++){
        document.write(arr[i]);
    }
    //100
    //200
    //javascript
}

*22. 배열 : forEach문 / each()

{
    const arr = [100, 200, "javascript"];
    
    arr.forEach(finction(element){         //*콜백함수
        document.write(element);
    });

    arr.forEach(finction(element, index, array){
        document.write(element);        //100
                                        //200
                                        //javascript
        document.write(index);          //100
                                        //0
        document.write(array);          //100,200,javascript
                                        //200
                                        //1
                                        //100,200,javascript
                                        //javascript
                                        //2
                                        //100,200,javascript
    });
}

배열 각각의 요소를 사용해 특정 함수를 for in 반복문처럼 실행

매개변수

의미

element

배열의 요소

index

배열 요소의 인덱스

array

forEach를 호출한 배열

*23. 배열 : for in

{
    const arr = [100, 200, "javascript"];

    for(let i in arr){
        document.write(arr[i]);
    }
    //100
    //200
    //javascript
}

*24. 배열 : for of

{
    const arr = [100, 200, "javscript"];

    for(let i of arr){
        document.write(i);
    }
    //100
    //200
    //javascript
}

*25. 배열 : map();

{
    const arr = [100, 200, "javascript"];

    arr.map((el) => {
        document.write(el);
    });
    //100
    //200
    //javascript
}

map = 배열을 변형시키거나 요소를 재정렬해주는 메서드

ㄴ모든 요소에게 동일한 행동을 준 값에 대하여 모두 반환

*중요 es5,6차이점 es6이 무엇인가 (function생략하고 => 로)

26. 배열 : 펼침 연산자 (...)

{
    const arr = [100, 200, "javascript"];

    document.write(arr);                        //100,200,javascript
    document.write(arr[0], arr[1], arr[2]);     //100200javascript
    document.write(...arr);                     //100200javascript
}

27. 배열 : 배열 구조 분해 할당

{    
    let a,b,c;
    [a,b,c] = [100, 200, "javascript"];

    document.write(a); //100
    document.write(b); //200
    document.write(c); //javascript
}

28. 객체 : 데이터 불러오기

{
    const obj = {
        a: 100,
        b: 200,
        c: "javascript"
    }
    
    document.write(obj.a);    //100
    document.write(obj.b);    //200
    document.write(obj.c);    //javascript
    //죽은문법
    document.write(obj['a']); //100
    document.write(obj['b']); //200
    document.write(obj['c']); //javascript
}

*29. 객체 : 키와 값 : Object.keys/values/entries

{
    const obj = {
        a: 100,
        b: 200,
        c: "javascript"
    }
    
    document.write(Object.keys(obj));    //a,b,c
    document.write(Object.values(obj));  //100,200,javascript
    document.write(Object.entries(obj)); //a,100,b,200,c,javascript
}

호출문

의미

Object.keys

객체의 키만 담은 배열을 반환

Object.values

객체의 값만 담은 배열을 반환

Object.entries

[키, 값] 쌍을 담은 배열을 반환

30. 객체 : 변수

{
    const obj = {
        a: 100,
        b: 200,
        c: "javascript"
    }
    const name1 = obj.a;
    const name1 = obj.b;
    const name1 = obj.c;
    
    document.write(name1); //100
    document.write(name2); //200
    document.write(name3); //javascript
}

*31. 객체 : for in

{
    const obj = {
        a: 100,
        b: 200,
        c: "javascript"
    }

    for(let i in obj){
        document.write(obj[i]);
    }
    //100
    //200
    //javascript
}

*32. 객체 : map();

{    
    const obj = [
        {a: 100},
        {a: 200},
        {a: "javascript"}
    ];

    obj.map(el => {
        document.write(el.a);
    })
    //100
    //200
    //javascript
}

*33. 객체 : hasOwnProperty()

has 검색기능

{
    const obj = {
        a: 100,
        b: 200,
        c: "javascript"
    }

    document.write(obj.hasOwnProperty("a"));        //true
    document.write(obj.hasOwnProperty("b"));        //true
    document.write(obj.hasOwnProperty("c"));        //true
    document.write(obj.hasOwnProperty("100"));      //false
    document.write("a" in obj);                     //true
    document.write("b" in obj);                     //true
    document.write("c" in obj);                     //true
    document.write("100" in obj);                   //false
}

34. 객체 : 펼침 연산자 : 복사

{
    const obj = {
        a: 100,
        b: 200,
        c: "javascript"
    }
    const spread = {...obj}
    
    document.write(spread.a); //100
    document.write(spread.b); //200
    document.write(spread.c); //javascript
}

*35.객체 : 펼침 연산자 : 추가

{
    const obj = {
        a: 100,
        b: 200,
        c: "javascript"
    }
    const spread = {...obj, d: "jquery"}

    document.write(spread.a); //100
    document.write(spread.b); //200
    document.write(spread.c); //javascript
    document.write(spread.d); //jquery
}

*36. 객체 : 펼침 연산자 : 결합

{
    const objA = {
        a: 100,
        b: 200
    }
    const objB = {
        c: "javascript",
        d: "jquery"
    }
    const spread = {...objA, ...objB}

    document.write(spread.a); //100
    document.write(spread.b); //200
    document.write(spread.c); //javascript
    document.write(spread.d); //jquery
}

*37. 객체 : 객체 구조 분해 할당 (=비구조화 할당)

{
    const obj = {
        a: 100,
        b: 200,
        c: "javascript"
    }
    const {a,b,c} = obj;

    document.write(a); //100
    document.write(b); //200
    document.write(c); //javascript
}

*38. 객체 : 객체 구조 분해 할당 : 별도 이름 저장

{
    const obj = {
        a: 100,
        b: 200,
        c: "javascript"
    }
    const {a:name1, b:name2, c:name3} = obj;

    document.write(name1); //100
    document.write(name2); //200
    document.write(name3); //javascript
}
Previous데이터 저장하기Next데이터 실행하기

Last updated 3 years ago

Was this helpful?