[Java Script 개념]20 Java Script Array API이용한 퀴즈 1. Q1. make a string out of an array => apple,banana,orange :join api는 배열의 모든 요소를 하나의 문자열로 만들어주는 api이다. join()안에는 원하는 구분자를 넣어주면 된다. ============================================================== 2. Q2. make an array out of a string =>["🍎, 🥝, 🍌, 🍒"] : split메서드는 구분자를 이용하여, 하나의 string객체를 여러개의 문자열로 나눈다. split(구분자, limit) 만약 구분자를 넣지 않는다면 하나의 문자열로 정의되기 때문에 꼭 넣어주는 것이 좋다. limit은 옵션인데 배열의 원소가 limit의 개수가 .. 2021. 8. 22. 배열 array 1. 배열 선언 const arr1=new Array(); const arr1=[1,2]; 배열을 new로 선언할 수도 있고 [ ]안에 직접 넣을 수도 있다. index는 항상 0부터 시작한다. index덕분에 삽입 삭제가 유용하다. =============================================== 2. Index position const fruits=['apple','banana']; console.log(fruits); => 0: "apple" 1: "banana" 여기서 apple에게 접근하고 싶다면 console.log(fruits[0]); =>[ ]안에 해당 index를 넣으면 된다. 마지막 index에 접근하고 싶다면 console.log(fruits[fruits.legn.. 2021. 8. 19. object 1. Literals and properties -javascript의 데이터 타입 - 자바 스크립트에 있는 거의 모든 objects는 instanceOf Objcet이다. ☆★ object는 {key : value}의 집합체이다!! key : 접근할 수 있는 property value : property가 가지고 있는 값 const obj1={}; => literal syntax const obj2=new Object(); =>constructor syntax function print(person){ console.log(person.name); console.log(person.age); } const hojin={name:'hojin',age:4}; => 이렇게 클래스 없이 바로 object생성할.. 2021. 8. 18. class class person{ name;=> fields age; speak(); =methods } => class는 붕어빵의 틀 같은 것이다. -template -declare once -no data in => 정의만 했기 때문에 메모리에 올라가진 않는다. 이 class안에 데이터를 넣어서 만든 것이 object! -instance of a class -created many times -data in => 데이터를 넣었기 때문에 메모리에 올라간다. ========================================== 1. class 선언 class person{ constructor(name,age){ this.name=name; this.age=age; } //method speak(){ co.. 2021. 8. 18. Function 1. function 선언 function(param1, param2) { body... retrun ;} 이렇게 선언 함수는 반드시 하나의 작업만 할 수 있게 쓴다. 이름은 command, 혹은 동사로 쓴다. 또한 function은 object이기 때문에 변수에 할당할 수도 있고, 함수를 리턴할 수도 있다. function log(message){ console.log(message); } log('Hello'); => Hello 출력됨 ======================================================== 2. parameters premitive parameters : 값 전달 object parameters: ref 전달 hojin이 coder로 변경되서 출력됨 ==.. 2021. 8. 17. Operator 논리 연산자 || && ! const value1=false; const value2= 4 or연산자는 처음으로 true가 나오면 멈춤! (하나라도 true면 true라고 반환하기 때문) 따라서 함수가 제대로 작동하는 지 알고 싶다면 가장 마지막에 넣어주어야 한다. console.log(`or : ${value1 || value2 || check()}`); function check(){ for(let i=0; i &&는 ||와 반대로 false값이 나오면 멈추기 때문에 덩치가 큰 함수를 마지막에 넣어주어야 한다. console.log(`or : ${value1 && value2 && check()}`); function check(){ for(let i=0; i 따라서 ===을 써주는 게 좋다. ===.. 2021. 8. 17. 데이터 타입 변수 1. let (read/write) let name='apple'; console.log(name); name='banana'; console.log(name); => apple => banana 출력 application을 실행시키면 각 application마다 사용할 수 있는 메모리가 제한적으로 할당된다. 한편 let은 다시 선언이 가능하다. 2. {} 만약 위의 코드가 { } 안에 있다면, 불러도 호출할 수 없다. 3. const (only read) 한 번 할당하면 변경이 불가능하다 (immutable) 이 const 변수를 사용함으로서 얻는 장점 3가지가 있다. 1 번째는 함부로 값을 변경할 수 없기 때문에 안전하다는 것이다. 2 번째는 thread safety 이다 프로그램이 실행될때 프.. 2021. 8. 16. async와 defer 그리고 'use strict' 대부분 html파일에 script태그를 이용하여 js 파일을 사용한다. 하지만 이럴 경우의 수행 순서는 이렇게 되는 데 이때 JS파일이 클 경우 사용자는 웹사이트를 보는 데 걸리는 시간이 오래 걸린다. 따라서 이 문제를 해결하기 위해 async와 defer라는 속성 값을 이용해볼 수 있다. async 이렇게 속성 값을 추가할 수 있고 순서는 이렇게 된다. 이렇게 설정을 해놓았을 경우, 좀 더 빠르게 html을 parsing할 수 있지만 queryselector를 통해 dom요소를 조작하려고 한다면, 원하는 html요소가 정리되어 있지 않을 가능성도 있다. 또한 js를 실행할 때는 역시 멈추기 때문에 js가 클 경우 사용자가 웹사이트를 보기 까지 시간이 좀 걸릴 수 있다. 만약 밑에 처럼 다수의 scrip.. 2021. 8. 16. 이전 1 2 다음
