나의 개발일지

자바스크립트에서 변수는 기본 타입과 참조 타입으로 나뉩니다 기본 타입 숫자 문자열 불리언 참조 타입 객체 배열 함수 두 가지는 값을 저장하는 방식에 있어 차이를 가집니다 기본 타입 값이 변수에 직접 저장된다 참조 타입 값은 다른 곳에 저장 대신 저장된 곳을 가리키는 레퍼런스(참조) 주소가 저장된다 이 차이는 변수를 활용함에 있어 의미를 가집니다 // 레퍼런스(참조) 변수 const arr = [120, 300, 500]; const arr2 = arr; // 변경 arr2[0] = 10; // arr2를 변경하면 arr에도 영향을 준다 console.log(arr); // [10,300,500] console.log(arr2); // [10,300,500] // 일반 값(숫자,문장,참거짓) let a =..

자바스크립트에서 미리 선언하지 않아도 사용할 수 있는 함수들이 있다. 이를 내장 함수라고 한다 join 배열 내의 값들을 순서대로 연결한 문자열 값을 반환해준다 이때 join()의 함수의 인자를 통해 연결한 문자열의 구분자를 지정해줄 수 있다 인자값을 넣지 않을 경우 쉼표(,)를 구분자로 사용 const arr = [1, 2, 3, 4, 5]; console.log(arr.join() + "끝"); // "1,2,3,4,5끝" console.log(arr.join(9) + "끝"); // "192939495끝" console.log(arr.join("") + "끝"); // "12345끝" console.log(arr.join(" 번") + "끝"); // "1번 2번 3번 4번 5끝" slice 인자를..

map 자바스크립트의 map은 키와 값을 저장하는 컬렉션의 역할 뿐 아니라 (객체와는 별개) 연산자의 역할도 한다 map을 활용하면 배열 안의 값들을 함수를 호출하거나 아래와 같이 함수를 정의할 수 있다. 함수를 활용한 후의 결과값은 새로운 배열에 담을 수 있다. const arr = [1, 3, 5, 7, 9]; const resultArr = arr.map((el) => el * el); console.log("arr 배열 안의 숫자들이 모두 제곱된 버전의 새로운 배열은 : " + resultArr); // 출력값 "arr 배열 안의 숫자들이 모두 제곱된 버전의 새로운 배열은 : 1,9,25,49,81" filter 배열 내의 값들을 함수 호출을 통해 원하는 특정 조건에 맞는 값들만 따로 골라낼 수 ..

함수는 여러가지 방식으로 입력할 수 있고, 방식에 따라서 더욱 짧게 사용할 수 있다. 아래의 방식들은 모두 같은 결과값을 출력한다 첫번째 const plus1 = function(a, b) { return a + b; } console.log(`plus1 : ` + plus1(10, 20)); 두번째 function plus2(a, b) { return a + b; } console.log(`plus2 : ` + plus2(10, 20)); 세번째 const plus3 = (a, b) => { return a + b; } console.log(`plus3 : ` + plus3(10, 20)); 네번째 const plus4 = (a, b) => a + b; console.log(`plus4 : ` + pl..

방법 1 const 객체1 = {}; 객체1.키값 = 변수값; 방법 2 const 객체2 = {}; 객체2["키값"] = 변수값; 방법 3 const 객체3 = { "키값": 변수값 } 방법 4 const 객체4 = { 키값: 변수값 }; 방법 5 const 키값 = 변수값; const 객체5 = { 키값:새로운키값 }; 방법 6 const 키값 = 변수값; const 객체6 = { 키값 }; 키값의 경우 ""로 감싸고 안 감싸고에 따른 결과 변화가 없지만 변수값의 경우 ""로 감싸줄 경우 문자열이 된다. 한 객체 내에 중복되는 키값이 선언될 경우 가장 마지막에 선언된 키값의 변수값이 적용된다

삼항연산자 const adult = age >= 20 ? "성년" : "미성년"; 위의 내용 중 age >= 20 이 true 일 경우 "성년", false 일 경우 "미성년"이 adult의 값으로 주입된다 truthy 와 falsy js 에선 boolean 이 아닌 값의 경우 truthy(참으로 평가되는 값), 또는 falsy(거짓으로 평가되는 값)으로 구분한다 조건문이나 반복문 같은 제어문의 조건식에서는 boolean값으로 평가되는 문맥을 사용해야 하는데, 이 때 truthy값은 true로, falsy 값은 false로 암묵적 형 변환이 일어난다. falsy값 이외의 모든 값들은 true 기 때문에 경우의 수가 적은 falsy만 알아두면 좋다 fasly의 종류 false null undefined 0..

js 기초 console.log(x) x 라는 변수의 내용을 출력해볼 수 있다. const 와 let const 자바의 final과 같다. 한번 선언되면 변경이 불가능하다 let 한번 선언된 이후에도 변경이 가능하다 배열 선언 conts arr = [10, 20, 30, 40, 50]; 배열 내 요소 추가 arr.push(60, 70); 특정 배열 위치에 값 추가 arr[7] = 100; 특정 배열 위치에 값을 추가할 경우 중간이 비는게 가능하다 이 경우 undefined 라고 표시된다 배열 엘리먼트에 접근하는 방법 console.log(arr[0]); 객체 선언 {} 로 감싸고 : 와 , 을 구분자로 객체를 생성할 수 있다 키와 값으로 한쌍으로 묶여 내부에 여러 쌍들이 저장된다. const obj = ..

label 태그는 for 속성을 사용해서 input 태그의 id 속성에 연계해서 사용한다. label 의 for 값과 input 의 id 값을 일치시키면 된다. ​ label 태그의 for 값이 title일 경우 input 태그의 id 값도 동일하게 title로 맞춰주는 식이다 ​ 보통 checkbox 나 radio의 버튼은 너무 작아서 클릭이 힘든 경우가 있다. ​ label 태그와 연계해서 사용하면 출력된 label 의 value값을 눌러도 input 태그의 checkbox 를 on/off 하는 것이 가능하다