목록프로그래밍/JavaScript (52)
쌓고 쌓다
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cLWLwm/btrUHQXaKNB/sXBZW0lQfwxMIAShKJI2i1/img.png)
배열의 얕은 복사(참조 복사) const 물건박스1 = ['우유', '식빵'] const 물건박스2 = 물건박스1 물건박스2.push('감자') 물건박스2.push('고구마') console.log(물건박스1) console.log(물건박스2) 배열을 다른 배열의 이름으로 할당해주면 같은 공간을 가리키는 이름만 다를 뿐 독립적이지 못하다. 배열의 깊은 복사 두 배열을 전개 연산자를 통해 완전히 독립적인 상태로 만들 수 있다. 전개 연산자 : [...배열] const 물건박스1 = ['우유', '식빵'] const 물건박스2 = [...물건박스1] 물건박스2.push('감자') 물건박스2.push('고구마') console.log(물건박스1) console.log(물건박스2) + 배열 요소 추가 const..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/l97FI/btrUGprTjXI/Jwm1XkkC3CZMv11FKtigg1/img.png)
속성 존재 여부 확인 객체에 없는 속성에 접근하면 undefined 자료형이 나온다. 조건문을 통해 undefined인지 아닌지 확인하여 속성 여부를 확인한다. const object = { name: '책이름1', pirce: 777 } if(object.name !== undefined){ console.log('name 속성이 존재.') } else { console.log('name 속성이 없음.') } if(object.author !== undefined){ console.log('author 속성이 존재.') } else { console.log('author 속성이 없음.') } 이외 방법들 // 방법 if(object.name) { console.log('name 속성이 있음.') } e..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/6FKQ8/btrUCh7wJXM/14h9WkoOZIIUx3PMtIPjK0/img.png)
외부의 script 파일을 읽을 때 script 태그를 사용한다. src 속성에 읽어 들일 파일의 경로를 입력한다. 외부 script 파일 읽기 동일한 폴더에 hello.js를 만들어 코드를 입력했다. hello.js console.log('# hello.js의 script') const i = 777 test.html 실행 결과 Lodash lodash 홈페이지에서 CDN copies를 눌러 링크를 복사한다. 링크: https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js + CDN? 콘텐츠 전송 네트워크(Contents Delivery Netword)라는 뜻으로 가까운 서버에서 다운로드하게 하여 빠르게 전송받는 방법입니다. + min 버전? min 버전의..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/PgurM/btrUxqqeVKh/kt2apH7vItFrUT8Hmt8wRk/img.png)
문자열로 데이터를 주고받을 때 CSV, XML와 같은 자료 표현 방식을 사용한다. JSON(JavaScript Object Notation) 또한 배열과 객체를 활용한 자료 표현 방식 또는 형식이다. 대부분 프로그래밍 언어는 JSON 형식의 문자열을 읽어 들이는 기능이 있다. 그래서 네트워크를 통해서 각각의 프로그래밍 언어로 만든 애플리케이션이 데이터를 교환할 때 활용한다. JSON을 활용해 책을 표현하면 // 한권의 책 { "name": "종강이 좋아", "price": 7777, "publisher": "야이야" } // 여러권의 책 [{ "name": "종강이 좋아", "price": 7777, "publisher": "야이야" }, { "name": "개강 오지마", "price": 8888, "..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/oy1Dx/btrUwntNNdR/Rv978s8d9xnRhTLx33j5OK/img.png)
자바 스크립트에서 자료를 기본 자료형과 객체 자료형으로 구분한다. 기본 자료형 숫자 문자열 불 객체 자료형 함수 배열 이외 전부 객체 자료형 속성과 메소드를 가지면 객체이다. 배열도 객체이다. 배열에 속성을 지정한 후 확인 해보자. // 배열 선언 const a = [] // a에 속성 sample을 10으로 초기화 a.sample = 10 // a의 속성 sample 출력 console.log(a.sample) 함수도 객체이다. 함수에 속성을 지정한 후 확인 해보자. // 함수 f 선언 function f() { } // f에 속성 지정 f.sample = 10 // f 속성 출력 console.log(f.sample) 기본 자료형 객체가 아닌 것을 기본 자료형이라고 부른다. 객체가 아니므로 속성을 가..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bc278a/btrUAbS7Exo/J9HXWukApXzkEmPktzKwjk/img.png)
배열 또한 객체(object)이다. console.log( typeof([]) ) 객체 생성 배열은 인덱스를 이용해 요소에 접근하지만 객체는 키를 사용하여 값에 접근한다. 객체는 중괄호 { }로 생성하고, '키: 값'의 형태로 자료를 쉼표(,)로 연결해서 입력한다. const product = { 제품명: '망고', 원산지: '필리핀' } 객체의 요소 접근 (방법1) - 대괄호 [ ] 와 키 product['제품명'] product['원산지'] (방법2) - 온점 (.) product.제품명 product.원산지 + 식별자로 사용할 수 없는 단어를 키로 사용한 경우 (키를 문자열로) const test = { "hello world": 777, "im good~!": 1 } test["hello worl..
1. let numbers = [273, 25, 75, 52, 103, 32, 57, 24, 76] numbers = numbers.filter((value) => { if( value%2===1 && value { console.log(value) })
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/HEpOC/btrUqaAU5iE/GmsjsDNjjbpyA8jjkaFAv1/img.png)
특정 시간마다 또는 이후에 함수를 호출할 수 있다. 타이머 시작 함수 설명 setTimeout(함수, 시간) 특정 시간 후에 함수를 한번 호출 setInterval(함수, 시간) 특정 시간마다 함수를 호출 두 번째 매개변수에 시간은 밀리 초 단위로 1000을 넣어주면 1초랑 동일해진다. 함수 예제 // setTimeout setTimeout(() => { console.log('1초 후에 실행됩니다') }, 1*1000) // setInterval let count=0 setInterval(() => { console.log(`1초마다 실행. ${count}번째입니다.`) count++ }, 1*1000) 타이머 종료 함수 설명 clearTimeout(타이머_ID) setTimeout() 함수로 설정한 ..