가오리의 코딩일기

Object.keys, values, entries Object.keys, values, entries ko.javascript.info 🧩 문제 Q1. 프로퍼티 값 더하기 급여 정보가 저장되어있는 객체 salaries가 있습니다. Object.values와 for..of 반복문을 사용해 모든 급여의 합을 반환하는 함수 sumSalaries(salaries)를 만들어보세요. salaries가 빈 객체라면, 0이 반환되어야 합니다. function sumSalaries(salaries){ let sum = 0; for (let salary of Object.values(salaries)) { sum += salary; } return sum; } let salaries = { "John": 100, "Pe..

메서드와 this 메서드와 this ko.javascript.info ✏️ 메서드 단축 구문 user = { sayHi: function() { alert("Hello"); } }; user = { sayHi() { alert("Hello"); } }; 🧩 문제 Q1. 객체 리터럴에서 ‘this’ 사용하기 함수 makeUser는 객체를 반환합니다. 이 객체의 ref에 접근하면 어떤 결과가 발생하고, 그 이유는 뭘까요? function makeUser() { return { name: "John", ref: this }; }; let user = makeUser(); alert( user.ref.name ); → 에러 발생 밑의 코드처럼 수정하면 된다 function makeUser() { return {..

객체 객체 ko.javascript.info ✏️ 상수 객체는 수정할 수 있다 → 4번째 줄에서 오류를 일으키는 것처럼 보일 수 있지만 그렇지 않다 → const는 user의 값을 고정하지 그 내용을 고정하지 않는다 const nuser = { name: "John" }; user.name = "Pete"; alert(user.name); ✏️ 계산된 프로퍼티(computed property) → 객체를 만들 때 객체 리터럴 안의 프로퍼티 키가 대괄호로 둘러싸여 있는 경우 → [1+4] 혹은 [’Hello’ + ‘World’]와 같은 식 자체가 들어가는 것도 가능하다 let fruit = prompt("어떤 과일을 구매하시겠습니까?", "apple"); let bag = { [fruit]: 5 }; al..

🧩 객체란? → 자바스크립트는 객체 기반의 프로그래밍 언어이다 → 원시 값을 제외한 나머지 값(함수, 배열 등)은 모두 객체 → 원시 값은 변경 불가능한 값(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; ..