웨일의 블로그 웨일의 블로그

체크박스 하나를 체크한 상태에서 쉬프트를 누른 채로 체크박스를 체크하면 그 사이의 모든 체크박스가 체크되게 하는 코드를 작성해보았다. 결과물 작업 과정 1. 윈도우에서 키입력을 감지한다. - 쉬프트키가 keydown 되었을 때 isHoldingShift 값을 true로 하고 shift함수를 호출한다. - 쉬프트키가 keyup 되었을 때 isHoldingShift 값을 false로 한다. 2. shift 함수에서는 각각의 체크박스의 클릭을 감지해서 클릭이 일어나면 doChecking 함수를 실행한다. 3. doChecking 함수에서는 isHoldingShift값이 false면 리턴하고, 아닌 경우에 체크되지 않은 체크박스를 checkedBox 배열에 저장한 후 4. checkedBox에 사용자가 shif..

객체 리터럴 {}을 사용하면 객체를 쉽게 만들 수 있지만 유사한 객체를 여러 개 만들어야 할 때가 생기곤 한다. 이럴때 new 연산자와 생성자 함수를 사용하면 유사한 객체 여러 개를 쉽게 만들 수 있다. 생성자 함수는 1. 함수 이름의 첫 글자를 대문자로 한다. 2. 반드시 new 연산자를 붙여 실행한다. 예시: function User(name) { // this = {}; 빈 객체가 암시적으로 만들어진다. this.name = name; this.isAdmin = false; // return this; this가 암시적으로 반환된다. } let user = new User("보라"); alert(user.name); // 보라 alert(user.isAdmin); // false new User()..

객체 프로퍼티에 할당된 함수를 메서드라고 부르고 메서드 내부에서 this 키워드를 사용하면 객체에 접근할 수 있다. 이때 점 앞의 this는 메서드를 호출할 때 사용된 객체를 나타낸다. let user = { name: "John", age: 30, sayHi: function() { // 'this'는 '현재 객체'를 나타냅니다. alert(this.name); } }; user.sayHi(); // John 여기서 sayHi는 user에 할당된 메서드이다. this값은 런타임에 결정된다. 자바스크립트에서는 모든 함수에 this를 사용할 수 있다. 동일한 함수라도 다른 객체에서 호출됐다면 'this'가 참조하는 값이 달라진다. let user = { name: "John" }; let admin = {..

객체와 원시 타입의 근본적인 차이 객체를 변수에 저장하면 1. 객체는 메모리 내 어딘가에 저장되고 2. 변수에는 객체가 메모리 내 어디에 위치하는지 알려주는 참조값이 저장된다. 따라서 객체가 할당된 변수를 복사할 때는 객체의 참조값이 복사되고 객체는 복사되지 않는다. 따라서 하나의 객체에 접근하거나 조작할 땐 여러 변수를 사용할 수 있다. let user = { name: 'John'}; let admin = user; // 변수 admin에 user에 저장된 객체의 참조 값을 복사함 admin.age: 30; // 'admin' 참조 값에 의해 변경됨 alert(user.age); // 30이 출력됨, 'user' 참조 값을 이용해 변경사항을 확인함 참조에 의한 비교 두 변수가 같은 객체를 참조하는 경..

자바스크립트에는 8가지 자료형이 있는데 이 중에 7개는 원시타입 이라고 부르고 단 한가지의 데이터만(문자열, 숫자 등) 담을 수 있는 자료형이다. 나머지 하나는 객체형이고 객체형은 다양한 데이터를 담을 수 있다. 객체는 중괄호{}를 이용해 만들 수 있고 중괄호 안에는 키(key):값(value) 쌍으로 구성된 프로퍼티 여러 개가 들어 있고, 키에는 문자형, 값에는 모든 자료형이 가능하다. let user = { // 객체 name: "John", // 키: "name", 값: "John" age: 30 // 키: "age", 값: 30 }; 대괄호 표기법 여러 단어를 조합해 프로퍼티를 만들 경우에 띄어쓰기가 포함된 키는 따옴표를 붙여서 사용한다. const 객체일지라도 객체의 내용을 변경할 수 있다. 변..

우리는 콘솔 창을 이용해 실제 실행 결과와 예상 결과가 같은지를 계속 비교해가며 코드를 테스트 하게 되는데 예를 들어 함수f를 구현하고 있다고 치면 f(1)과 f(2)를 테스트할 때 f(1)이 예상대로 되서 f(2)를 테스트했는데 제대로 동작하지 않는다. 그래서 코드 수정 후 f(2)를 테스트해서 통과했는데 f(1)을 다시 테스트 하지 않는 경우가 있다. 이럴때 f(1)이 다시 동작하지 않아서 에러가 발생할 수 있다. 그래서 BDD(Behavior Driven Development)라는 테스트 자동화 방법론을 이용한다. BDD로 만들어진 산출물을 명세서 또는 스펙이라고 부른다. 스펙의 세 가지 주요 구성 요소 1. describe("기능에 대한 설명", function() {...} it블록을 한데 모아..

한 줄짜리 주석: // 여러 줄: /* ... */ 주석은 어떻게 코드가 동작하는지, 왜 동작하는지를 설명하는 데 쓰임. 좋지 않은 주석 // 이 코드는 (...)과 (...)을 수행합니다. // A 개발자가 이 기능에 대해 알고 있으며... 좋은 코드엔 설명이 담긴 주석이 많으면 안된다. 좋은 주석 왜 이런 방법으로 문제를 해결했는지를 설명하는 주석. 이 주석이 없으면, 1. 시간이 꽤 흐른 뒤 코드를 열어본 후 그 코드가 가장 좋은 방식이 아니란 걸 알게 된다. 2. 이전보단 더 명확하고 올바른 방법으로 코드를 개선한다. 3. 리팩토링 과정에서 더 명확하다고 생각했던 방법을 적용하면 문제가 발생한다는 걸 알아낸다. 이미 시도해봤던 방법이기 때문에 왜 이 방법이 먹히지 않는지 희미하게 기억이 떠오른다...

복잡한 문제를 간결하고 사람이 읽기 쉬운 코드로 작성해야 한다. 가로 길이 가로로 길게 늘어진 코드는 여러 줄로 나눠 작성하는게 좋다. 이때 백틱(`)을 사용하면 문자열을 여러 줄로 쉽게 나눌 수 있다. let str = ` ECMA International's TC39 is a group of JavaScript developers, implementers, academics, and more, collaborating with the community to maintain and evolve the definition of JavaScript. `; if ( id === 123 && moonPhase === 'Waning Gibbous' && zodiacSign === 'Libra' ) { alert..