JavaScript
-
[Javascript] sort , filter 간단예제JavaScript 2022. 7. 20. 23:25
javascript를 사용하다보면 종종 array의 값을 정렬하거나, 솎아내야 하는 경우가 있는데, 이때 sort()나 filter()를 사용하면 편리하게 원하는 값을 얻을 수 있다. 예시 let array = [2, 4, 10, 9]; // 오름차순 array.sort(function(a, b){ return a - b; //앞값 - 뒷값 .. 결과가 0보다 크냐 같냐 작냐로 위치를 결정함 }); console.log("sorted arr: "+array); // sorted arr: 2,4,9,10 //내림차순 정렬 array.sort(function(a, b){ return b - a; //뒷값 - 앞값 .. 결과가 0보다 크냐 같냐 작냐로 위치를 결정함 }) console.log("desc sor..
-
[JavaScript] 오브젝트 배열 (Array of objects) 에서 원하는 값 가져오기JavaScript 2022. 5. 24. 23:52
위와 같은 객체 tweets 가 있다. tweets는 두개의 Object를 담고 있는데, 여기서 내가 찾고자 하는 이름을 가진 Object의 메세지를 찾는 function을 만들어 보고자 한다. 먼저 tweets 에서 메세지를 찾아줄 function을 하나 만들었다. 입력받은 이름을 우선 typeof로 타입체크를 해주고, string일 때만 tweets 객체에서 author 내부의 firstName과 lastName을 조회해서 결과가 있으면 "firstName lastname" 인 author 와 해당 object 의 message를 가지고 리턴한다. 결과가 없으면 "UnKnown : not found"를 리턴한다. getTweetMessage에 "sam" 과 "kim" 을 넣어보면 위와 같이 출력되는 ..
-
javascript DOM style 조작하기JavaScript 2022. 4. 21. 10:49
옵션이름에 - 포함됐을 경우 (margin-top, overflow-x 등) : carmel식으로 작성 사용 예 document.getElementById('조작할 element id').style.overflow='auto'; document.getElementById('조작할 element id').style.overflowX='hidden'; 조작할 element.style.속성 = "값"; 으로 js에서 css를 조작할 수 있다. - Cannot read property 'style' of Null in JavaScript 뜰 경우: >>해당 element가 선언되기 전에 조작을 시도했을 수 있음. 이 경우, script조작을 element선언 부 이후에 작성해주면 된다.
-
10. chainning, Nullish CoalescingJavaScript 2021. 10. 3. 21:19
//Nullish Coalescing과 chaining을 사용하면 불필요한 if문을 없애 코드를 줄일 수 있다. const getValue = user => { return user.payment?.details?.value ?? "0"; // value가 있으면 value를, 해당하는 키값이 없다면 0을 리턴. } console.log(getValue({name:"John", payment:{details:{value: 15}}})); //15 console.log(getValue({name:"John", payment:{}})); //0
-
9.Object3JavaScript 2021. 10. 3. 20:40
변수를 객체로 묶기 const id = 1; const userName = "kim"; const obj = { id, userName } //{ id: 1, name: 'kim' } //디버깅 시 객체의 key value 확인하기 const getSum = (a, b) => { console.log({a, b}); //{ a: 2, b: 3 } const sum = a + b; console.log({sum}); //{ sum: 5 } >> 중괄호로 변수를 둘러싸면 변수의 이름과 값이 동시에 출력된다. return sum; } getSum(2, 3); //객체 쪼개기, 합치기 const config = { id: 1, isAdmin: false, theme: { dark: false, accessibi..
-
8.Object2JavaScript 2021. 10. 1. 16:01
const user = { id: 1, name: "kim", job: "programmer" } user.id; //1 const key = "id"; //속성 "id"에 대한 이름 key 선언 user[key]; //1 //응용 const getValue = (user, keyToRead) => { return user[keyToRead]; } getValue({id: 2, name: "Lee"}, "name"); //Lee. => 객체의 name속성 불러오기 getValue({id: 2, name: "Lee"}, "id"); //2. => 객체의 name속성 불러오기 //read keys, values const keys = Object.keys(user); //[ 'id', 'name', 'job..
-
7.Array 2JavaScript 2021. 10. 1. 15:09
Array 쪼개기, 합치기 //배열 쪼개기 const arr = [20, 5]; const [a, b] = arr; console.log(a, "and",b ); //20 and 5 //배열 합치기 const arr2 = ["abc", "def"]; const arr3 = [...arr, ...arr2]; // ...은 배열을 펼치는 문법이다. ---------------------------------------------------------------------- ... 는 seperate operator라고 불린다. ...arr >> 20, 5 와 같이 배열을 펼쳐 내용물만 나열하게 된다. 이걸 다시 []로 감싸고 내용을 추가하면 기존 내용물을 포함한 새로운 배열로 만들 수 있다. --------..
-
6.ObjectsJavaScript 2021. 9. 27. 13:20
const user = { id: 1, firstName: "Sam", lastName: "Kim", age: 20 } //value 읽기 user.id; // 1 user.firstName; // "Sam" user.isAdmin; // undefined //value 변경 user.lastName = "Lee"; //Lee user.age = user.age + 1; //21 console.log(user); //{ id: 1, firstName: 'Sam', lastName: 'Lee', age: 21 } object는 여러 변수들을 key: value 구조로 하나로 합친 데이터 타입이다.