목록HTML+CSS+JavaScript (88)
가오리의 코딩일기
🧩 객체란? → 자바스크립트는 객체 기반의 프로그래밍 언어이다 → 원시 값을 제외한 나머지 값(함수, 배열 등)은 모두 객체 → 원시 값은 변경 불가능한 값(immutable value), 객체는 변경 가능한 값(mutable value) 추가적인 설명은 11장에서 → 객체는 0개 이상의 프로퍼티로 구성된 집합 const person = { name: 'Lee', // 프로퍼티 age:20 // 프로퍼티 키(age), 프로퍼티 값(20) }; → 프로퍼티 키: 빈 문자열을 포함하는 모든 문자열 또는 심벌 값 → 프로퍼티 값: 자바스크립트에서 사용할 수 있는 모든 값 🧩 객체 리터럴에 의한 객체 생성 → 클래스 기반 객체지향 언어(C++, 자바): 클래스를 사전에 정의, 필요 시점에 new와 함께 생성자를..
nullish 병합 연산자 '??' nullish 병합 연산자 '??' ko.javascript.info 🧩 nullish 병합 연산자 → ??를 사용하면 짧은 문법으로 여러 피연산자 중 그 값이 확정되어 있는 변수를 찾을 수 있다 // a ?? b의 평가결과와 같은 코드 x = (a !== null && a !== undefined) ? a : b; → 세 변수 중 실제 값이 있는 변수의 값을 출력하는데 세 변수 모두 값이 없다면 ‘익명의 사용자'가 출력된다 let firstName = null; let lastName = null; let nickName = "바이올렛"; // null이나 undefined가 아닌 첫 번째 피연산자 alert(firstName ?? lastName ?? nickNam..
논리 연산자 논리 연산자 ko.javascript.info 🪝 &&의 우선순위가 ||보다 높다 a && b || c && d (a && b) || (c && d) → 위의 코드는 동일하게 동작한다 🪝 if를 ||나 &&로 대체하지 말자 let x = 1; (x > 0) && alert('0보다 크다'); if (x > 0 ) alert('0보다 크다'); → &&를 사용한 코드가 더 짧긴 하지만 if문을 사용한 예시가 코드에서 무엇을 구현하고자 하는지 더 명백히 드러나고 가독성도 좋다 → if 조건문이 필요하면 if를 사용하고 AND 연산자는 연산자 목적에 맞게 사용하자 🧩 문제 Q1. 다음 OR 연산의 결과는 무엇일까요? alert( null || 2 || undefined ); → alert 창에 2..
💡 암묵적 타입 변환(implicit coercion), 타입 강제 변환(type coercion) → 자바스크립트 엔진은 표현식을 평가할 때 코드 문맥에 부합하도록 자동 변환 수행 → 재할당이 아닌 새로운 타입의 값을 만들어 단 한 번 사용하고 버린다 → 표현식을 에러 없이 평가하기 위해서 🧩 문자열 타입으로 변환 → +연산자는 피연산자 중 문자열이 존재하면 문자열 연결 연산자로 동작한다 → 템플릿 리터럴의 표현식 삽입: 표현식의 평가 결과를 문자열 타입으로 암묵적 타입 변환한다 `1 + 1 = ${1+1}` // "1 + 1 = 2" → 숫자 타입 0 + ""; // "0" -0 + ""; // "0" 1 + ""; // "1" -1 + ""; // "-1" NaN + ""; // "NaN" Infi..
🔗 코어 자바스크립트: if와 '?'를 사용한 조건 처리 → https://ko.javascript.info/ifelse if와 '?'를 사용한 조건 처리 ko.javascript.info Q1. if와 문자열 0 if ("0") { alert("Hello"); } → 비어있는 문자열을 제외한 모든 문자열은 true, "0" 안 비었음 → alert 창에 Hello 출력된다 Q2. 자바스크립트의 공식 이름 let name = prompt("자바스크립트의 '공식' 이름은 무엇일까요?", ""); if (name == "ECMAScript") { alert("정답입니다!"); } else { alert("모르셨나요? 정답은 ECMAScript입니다!"); } Q3. 입력받은 숫자의 부호 표시하기 let nu..
🔗 코어 자바스크립트: switch문 → https://ko.javascript.info/switch switch문 ko.javascript.info Q1. 'switch'문을 'if'문으로 변환하기 switch (browser) { case "Edge": alert("Edge를 사용하고 계시네요!"); break; case "Chrome": case "Firefox": case "Safari": case "Opera": alert("저희 서비스가 지원하는 브라우저를 사용하고 계시네요."); break; default: alert("현재 페이지가 괜찮아 보이길 바랍니다!"); } if (browser == "Edge") alert("Edge를 사용하고 계시네요!"); else if (browser == ..
🔗 코어 자바스크립트: while과 for 반복문 → https://ko.javascript.info/while-for while과 for 반복문 ko.javascript.info Q1. 반복문의 마지막 값 let i = 3; while (i) { alert(i--); } → alert 창에 3, 2, 1 순으로 출력된다 Q2. while 반복문의 출력값 예상하기 let j = 0; while (++j < 5) alert(j); let k = 0; while (k++ < 5) alert(k); → j의 경우 1~4까지, k의 경우 1~5까지 alert 창에 출력된다 Q3. 'for' 반복문의 출력값 예상하기 for (let i = 0; i < 5; i++) alert(i); for (let j = 0; ..
🔗 arr.forEach(callback(currentValue[, index[, array]])[, thisArg]) : 주어진 callback을 배열에 있는 각 요소에 대해 오름차순으로 한 번씩 실행한다 → 삭제했거나 초기화하지 않은 인덱스 속성에 대해서는 실행하지 않는다 → currentValue: 처리할 현재 요소 → index: 처리할 현재 요소의 인덱스 → array: forEach()를 호출한 배열 → thisArg: callback을 실행할 때 this로 사용할 값 const items = ['item1', 'item2', 'item3']; const copy = []; // for 반복문 for (let i = 0; i < items.length; i++){ copy.push(items[..
: 하나의 프로그래밍 패러다임으로 정의되는 일련의 코딩 접근 방식 → 클로저, 스칼라, 하스켈, 자바스크립트, 코틀린, 파이썬 등이 있다 🧩 순수함수(Pure function) → 동일한 입력에는 항상 같은 값을 반환해야 하는 함수 → 함수의 실행이 프로그램의 실행에 영향을 미치지 않아야 하는 함수 → 함수 내부에서 인자의 값을 변경하거나 프로그램 상태를 변경하는 side effect가 없는 것 → 프로그램의 변화 없이 입력 값에 대한 겨로가를 예상할 수 있어 테스트가 용이하다 let num = 1; function add(a){ return a + num; } // 전역으로 선언된 num을 참조하기 때문에 순수함수가 아니다 function add(a,b){ return a+b; } // add()가 프..
🔗 제어문(control flow statement) → 조건에 따라 코드 블록을 실행하거나 반복 실행할 때 사용 → 제어문을 사용하면 코드의 실행 흐름을 인위적으로 제어 → forEach, map, filter, reduce 같은 고차 함수를 사용한 함수형 프로그래밍 기법에서는 제어문의 사용을 억제하여 복잡성을 해결하려고 노력한다 💡 블록문(block/compound statement) → 0개 이상의 문을 중괄호로 묶는 것 → 자바스크립트는 블록문을 하나의 실행 단위로 취급한다 → 단독으로 사용할 수 있으나 일반적으로 제어문이나 함수를 정의 시 사용 → 자체 종결성(문의 종료)을 갖기 때문에 블록문의 끝에는 세미콜론을 붙이지 않는다 💡 조건문(conditional statement) → 조건식의 평가..