JavaScript
2024.07.14
배열 조작 메소드 6가지push, pop, shift, unshift, slice, concat// 배열 메소드1// 6가지의 요소 조작 메소드// 1. push// 배열의 맨 뒤에 새로운 요소를 추가하는 메서드let arr1 = [1, 2, 3];// push는 최종적으로 배열의 길이를 반환한다.const newLength = arr1.push(4, 5, 6, 7);console.log(arr1); // [1, 2, 3, 4, 5, 6, 7]console.log(newLength); // 7// 2. pop// 배열의 맨 뒤에 있는 요소를 제거하고, 반환let arr2 = [1, 2, 3];const poppedItem = arr2.pop();console.log(poppedItem); // 3cons..
JavaScript
2024.06.30
for of => 배열 순회에 쓰임for in => 객체 순회에 쓰임 1. 배열 순회// 1 배열 순회let arr = [1, 2, 3];// 1.1 배열 인덱스for (let i = 0; i 2. 객체 순회// 2. 객체 순회let person = { name: "DY", age: 32, hobby: "PS5",};// 2.1 Object.keys사용// -> 객체에서 key 값들만 뽑아서 새로운 배열로 변환let keys = Object.keys(person);console.log(keys); // ['name', 'age', 'hobby']// for of는 배열에서만 사용하는 연산자for (let key of keys) { const value = person[key]; console...
JavaScript
2024.06.30
Object Type은 Primitive Type과 달리 참조에 의해(by reference) 저장되고 복사 된다.따라서 객체를 복사하고 싶을때에는 깊은 복사를 해줘야 한다. // 객체 얕은 복사let so1 = { name: "DY" };let so2 = so1;// 객체 깊은 복사let do1 = { name: "DY" };let do2 = { ...do1 };// 객체간의 비교는 기본적으로 참조값을 기준으로 한다.let o1 = { name: "DY" };let o2 = o1;let o3 = { ...o1 };// 얕은 비교console.log(o1 === o2); // trueconsole.log(o1 === o3); // false// 깊은 비교console.log(JSON.stringify(o..
JavaScript
2024.06.30
1. Spread는 객체나 배열에 저장 된 값을 개별적으로 만들기 위함(Spread : 흩뿌리다, 펼치다.)// 1. Spread 연산자// -> Spread : 흩뿌리다. 펼치다// -> 객체나 배열에 저장된 여러개의 값을 개별로 흩뿌려주는 역할// 배열 spreadlet arr1 = [1, 2, 3];// 4, 1, 2, 3, 5, 6 를 만들고 싶을 때let arr2 = [4, ...arr1, 5, 6];console.log(arr2); // [4, 1, 2, 3, 5, 6]// 객체 spreadlet obj1 = { a: 1, b: 2,};let obj2 = { ...obj1, // obj1의 속성을 그대로 사용할 수 있다. c: 3, d: 4,};console.log(obj2); // ..
JavaScript
2024.06.30
구조 분해 할당의 목적은배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하기 위함 // 1. 배열의 구조 분해 할당let arr = [1, 2, 3];let testOne = arr[0];let testTwo = arr[1];let testThree = arr[2];// => 매우 불편// 구조 분해 할당을 통해 한 번에 값을 할당let [one, two, three] = arr;console.log(one, two, three); // 1 2 3let [one1, two2] = arr;console.log(one1, two2); // 1 2// 2. 객체의 구조 분해 할당let person = { name: "DY", age: 99, hobby: "Coding",};// [ke..
JavaScript
2024.06.23
Truthy & Falsy Boolean 타입이 아니더라도, 조건문 내에서 참 거짓으로 평가되는 것을 말하며Truthy, Falsy를 사용하면 조건문을 간결하게 만들 수 있다.// 1. Falsy한 값let falsy1 = undefined;let falsy2 = null;let falsy3 = 0;let falsy4 = -0;let falsy5 = NaN; // Not a Numberlet falsy6 = "";let falsy7 = 0n; // BigInteger// => 조건문에서 거짓으로 평가 됨if (!falsy1) { console.log(falsy1, "is false");}// 2. Truthy한 값let truthy1 = "hello";let truthy2 = 123;let truthy..
JavaScript
2024.06.23
객체는 { } 를 이용하여 생성하고 class 처럼 변수와 메소드를 넣어줄 수 있다.// 1. 객체 생성let obj1 = new Object(); // 객체 생성자let obj2 = {}; // 객체 리터럴// 2. 객체 프로퍼티 (속성)let person = { name: "DY", // key : value age: 33, hobby: "soccer", extra: function () { console.log("print extra"); }, "like cat": false,};// 3. 객체 프로퍼티를 다루는 방법// 3.1 특정 프로퍼티에 접근하는 방법 (점 표기법, 괄호 표기법)let name = person.name;console.log("obj name is ", name..
JavaScript
2024.06.23
A함수를 B함수의 매개변수로 전달하여 B함수에서 A함수를 호출(콜백)// 1. callback functionfunction main(value) { value();}function sub() { console.log("I am sub");}main(sub); // I am sub// 2. callback 활용function repeat(count, callback) { for (let idx = 1; idx { console.log("callback", idx, "called");});// 1// 2// 3// 4// 5repeat(5, (idx) => { console.log("callback", idx * 2, "called");});// 2// 4// 6// 8// 10
JavaScript
2024.06.16
자바스크립트에서 함수를 선언하는 방법 // 1. 명명 함수function funcA() { console.log("funcA");}let varA = funcA;varA();// 2. 익명 함수// 함수 표현식 (값으로 취급 되기 때문에 호이스팅 대상이 아님)let varB = function () { console.log("funcB");};// 3. 화살표 함수let varC = /*function*/ () => { // function키워드를 생략할 수 있다. return 1;};// 즉시 반환 시 중괄호, return 생략 가능let varC_return = (value) => value + 1;
JavaScript
2024.06.16
// 1. null병합 연산자// -> 존재하는 값을 추려내는 기능// -> null, undefined가 아닌 값을찾아내는 연산자let var1;let var2 = 10;let var3 = 20;let var4 = var1 ?? var2;console.log(var4); // => 10let var6 = var3 ?? var2;console.log(var6); // => 20 let var7 = var2 ?? var3;console.log(var7); // => 10// 둘다 null, undefined가 아닌 경우 앞에 값 사용// 이렇게 응용도 가능let userName = "DY";const defaultName = "None";let displayName = userName ?? defaultN..
