JavaScript
-
자바스크립트 배열, 배열 메서드JavaScript 2022. 11. 24. 21:09
// 배열은 문자 뿐만 아니라 숫자, 객체, 함수 등도 포함할 수 있다. let testArr = ['kkk', 3, false, {name:'aaa', age:111}, function() {console.log("testArr");}]; // 배열의 길이 console.log(testArr.length); // 배열의 메서드 testArr.push("push");// 배열 끝의 요소를 추가 testArr.pop();// 배열 끝의 요소를 제거 testArr.unshift("unshift");// 배열 앞에 요소를 추가 testArr.shift();// 배열 앞의 요소를 제거 testArr.unshift("a", "s", "d");// 한번에 여러개 추가 가능 // 배열의 반복문 for (let i =..
-
자바스크립트 NaN, null, undefinedJavaScript 2022. 11. 23. 21:11
자바스크립트를 사용하다보면 콘솔에 NaN, null, undefined가 나오는 경우가 있을 것이다. 이 3가지의 정확한 구분은 항상 숙지하고 있어야한다. NaN - Not a Number : 숫자가 아니다. const a = "aaa"; const x = a / 10; console.log(x);// NaN null, undefined - 변수 선언만 하고 아무것도 할당하지 않은 상태 const num1; const num2 = null; console.log(num1);// undefined console.log(num2);// null 추가) infinity const idx = 1/0; console.log(idx);// infinity
-
자바스크립트 동작원리JavaScript 2022. 11. 23. 20:52
호출스택 - 파일이 실행이 되면 호출 스택이 생성되고, anonymous가 아래에 깔린다. - anonymous가 맨 처음 생성되고 마지막에 사라진다. - 동기 코드만 존재하는 경우, 코드가 호출되는 순서대로 실행하면 된다. - 비동기 함수가 같이 있다면 백그라운드, 테스크 큐, 이벤트 루프도 같이 생각해야한다. * 예시 function one() { console.log("one"); } function two() { console.log("two"); } console.log("start"); setTimeout(one, 2000); setTimeout(two, 1000); console.log("end"); cf) [~~] : 쌓이는 것을 이미지로 표현 1. 호출 스택에 [Anonymous]가 먼저..
-
자바스크립트 화살표 함수JavaScript 2022. 10. 27. 20:50
기본적인 함수 표현식만 쓰다가, 갑자기 화살표함수를 읽거나 쓰려고 하니 이질감이 있는 분들이 읽으면 좋은 글입니다. 기본적인 함수의 형태 function func() { // code } // callback setTimeout(function() { // code }, 1000); 화살표 함수 형태 1. 함수의 이름을 변수명으로 잡기 (함수의 이름이 있는 경우) 2. 기본적인 구조에서 function을 =>로 치환 3. 화살표를 () 뒤에서 앞으로 이동 let func = () => { // code } // callback setTimeout(() => { // code }, 1000);
-
자바스크립트 set으로 배열 만들기JavaScript 2022. 10. 27. 20:24
* set - 고유의 배열을 만들 수 있다. - 중복없이 유일한 값을 저장할 때 사용한다. - 이미 존재하는지 확인할 때 유용하다. - 모든 타입이 저장 가능하다. let setArr = new Set(); console.log(toString.call(setArr));// 변수의 타입이 set이다. setArr.add("kkk"); setArr.add("set"); setArr.add("set"); console.log(setArr.has("kkk"));// 존재여부를 boolean으로 반환 setArr.forEach(function(e) { console.log(e);// 3개를 add했지만, 2개가 나온다. - 중복을 허용하지 않음 }); setArr.delete("set");// 요소를 삭제한다.
-
자바스크립트 Destructuring objectJavaScript 2022. 10. 26. 20:42
Destructuring object - 객체의 속성을 고유한 변수로 압축하고 해제 할 수 있다. let character = { name : "kkk", age : 20 } let {name, age} = character; console.log(name, age);// kkk , 20 * 활용 1) 배열에서 필요한 변수의 값을 사용하는 것도 가능 let arr = [ { "one" : "a", "two" : "b" }, { "one" : "c", "two" : "d" } ]; // #1 let [,aa] = arr; console.log(aa); // {one: 'c', two: 'd'} // #2 let {one, two} = aa; console.log(one, two);// c d let arr..
-
자바스크립트 spread operatorJavaScript 2022. 10. 25. 20:55
spread operator - 배열을 펼쳐서 배열안에 넣는다. let arr = ["a","b","c"]; let newArr = [...arr];// arr을 펼쳐서 배열을 만듬 console.log(arr === newArr); // false : 값은 같지만, 참조하는 부분이 다르다. * 활용 function plusVal(a, b, c) { return a+b+c; } let plusArr = [10, 11, 12]; console.log(plusVal(...plusArr));// 33
-
자바스크립트 객체 생성 방법JavaScript 2022. 10. 25. 20:47
es6에서의 객체 생성 방법 1번째 방법 const name = "kkk"; const age = "20"; const obj = { name : name, age : age } console.log(obj); 2번째 방법 function getObj() { const name = "kkk"; const getName = function() { return name; } return { getName : getName, setName : setName } } var obj2 = getObj(); console.log(obj2); console.log(obj2.getName());