Jaddong's Lab

함수 선언문 (Function Declaration) 어디서든 함수에 접근 가능(스크립트 실행 준비단계에서 전역에 선언된 함수 선언문을 찾아 해당 함수를 생성하기 때문) 그래서 코드 구성이 더 자유로움 sum(2, 3); function sum(a, b) { return a + b; } 엄격 모드에서 함수가 선언된 코드 블록 안에서만 유효 let age = 16; if (age < 18) { welcome(); // \ (실행) // | function welcome() { // | alert("안녕!"); // | 함수 선언문은 함수가 선언된 블록 내 } // | 어디에서든 유효합니다 // | welcome(); // / (실행) } else { function welcome() { alert("안녕하..

함수의 인수로 함수를 전달하고, 이 인수로 전달한 함수를 "나중에 호출(called back)" 하는 것 말로 풀면 이해가 안 될 수 있으니, 예시를 보도록 하자. function quest(question, yes, no) { if (confirm(question)) yes()동의 else no();//미동의 } function showAgree() { alert( "동의하셨습니다." ); } function showDisagree() { alert( "미동의 버튼을 누르셨습니다." ); } // 사용법: 함수 showOk와 showCancel가 ask 함수의 인수로 전달됨 quest("동의하십니까?", showAgree, showDisagree); 함수 quest의 인수로, 함수 showAgree와 ..

* 2021.05.20 스펙에 추가된 지 얼마되지 않아 폴리필이 필요함! ' || '는 첫번째 truthy 값을 리턴한다. a가 참이면 a 리턴, 아니면 b 리턴한다. null || '1'// '1' undefined || '1'// '1' '1' || null// '1' 0 || '1'// '1' ' ?? '는 첫번재 정의된(defined) 값을 리턴한다. a가 null이나 undefined 이면 b리턴, 아니면 a 리턴 null ?? '1'// '1' undefined ?? '1'// '1' '1' ?? null// '1' 0 ?? '1'// 0 // 0은 falsy하기때문에 '1'이 리턴될 것 같지만, null도 undefined 도 아니기 때문에 0을 리턴한다. '??' 는 truthy/falsy..

1. 문자열끼리 비교 (유니코드) - 문자열 중에서 앞에서 부터 순서대로 비교하게된다.(사전순) - 소문자의 유니코드 값이 기본적으로 크다. alert( 'Z' > 'A' ); // true, 'Z'가 'A'보다 유니코드 값이 큼 alert( 'Glow' > 'Glee' ); // true, 'o'는 'e'보다 유니코드 값이 큼 alert( 'Bee' > 'Be' ); // true, 'e'는 빈 값 보다 유니코드 값이 큼 2. 다른 형을 가진 값 간의 비교 - 비교하려는 값의 자료형이 다르면, 값 들을 숫자형으로 바꿔 비교하게된다. alert( '2' > 1 ); // true, 문자열 '2'가 숫자 2로 변환된 후 비교가 진행됩니다. alert( '01' == 1 ); // true, 문자열 '01'..

useState로 object형태의 상태를 업데이트 하는 방법은 두 가지가 있다. 보기엔 문제없이 동일하게 동작하지만 차이가 있고, 1번보다는 2번은 권장한다. const [userInput, setUserInputs] = useState({ title: '', amount: '', date: '' }); const titleChangeHandler = (event) => { // 방법 (1) : not good setUserInputs({ ...userInput title: event.target.value }); // 방법 (2) : good setUserInputs((prevState) => { return { ...prevState, title: event.target.value } }; } 리액..

Object와 Array의 경우 레퍼런스 타입이어서 아래와 같이 값이 복사되는 것 같지만 그렇지 않다. // 변수 person과 person의 value는 각각 저장됨. const person = { name: 'Max' } const secondPerson = person; // 값을 그대로 복사하는 것 같지만, secondPerson이 person의 value를 가르키게 됨(포인터 값) person.name= 'Ginny'; console.log(secondPerson); // { name : 'Ginny' } // secondPerson는 동일하게 person의 value의 값을 가르키고 있으므로 영향을 받아 위와 같이 찍힘 별도의 person과 별개의 secondPerson을 만들기 위해서는 아래..

Classes are essentially blueprints for objects. Class는 Object의 필수적인 설계이다. Class는 class 이름이 있고 프로퍼티와 메소드를 둘 다 가지고 있을 수 있다. constructor 디폴트 메소드로 해당 class를 인스턴스화할 때마다 실행된다. class Human { constructor(){ this.gender = 'male'; } printGender() { console.log(this.gender) } } class Person extends Human { constructor(){ super(); // extends를 쓸 때 이것이 없으면 상의 클래스인 Human의 constructor가 실행되지 않아 에러가 발생한다. this.na..

인스타 피드에서 만든거 보고 너무 귀여워서 css 안까먹을 겸 만들어서 깃헙에만 넣어놨었는데 오랜만에 깃헙로그인했다가 찾아서 꺼내올린다. (interactive web 공부하고 싶다면서 현생이 그냥 지나갈 것 같다.... 이것도 일이었다면 재미없었겠지....) See the Pen by Jayoung Lee (@Jayoung) on CodePen.

더보기 primitives : 원시형 explicitly : 명쾌하게 exclusively : 독점으로 intuitively : 직관으로 대부분의 경우, 연산자와 함수들은 자동적으로 주어진 값을 적절한 형태로 변환한다. 예를 들면, alert은 값을 보여주기 위해 어떤 값을 문자열 형태 자동 변환한다. 수학적 연산자는 값을 숫자형으로 변환한다. 우리가 값을 기대한 형태로 명확하게 변환할 필요가 있을 때도 형변환 하는 경우이다. 아직 객체에 대해서 얘기하고 있진 않다. 이 챕터에서 우리는 객체는 다루지 않을 것이다. 지금부터 우리는 원시형에 대해서만 다룰 것이다. 객체를 원시형태로 변화하는 건, 객체에 대한 것을 배우고 이 후에 볼 것이다. 문자형으로 변환 문자형으로 형 변환은 문자형태의 값이 필요할 때 ..

alert 메시지가 있는 작은 창을 modal window라고 부른다. "modal"이란 단어는 방문자가 "OK"를 누를때까지 나머지 페이지와 인터렉션을 할 수 없고, 버튼을 못 누르는 등의 의미를 말한다. alert("Hello"); prompt prompt 함수는 두 개의 인수를 받는다. result = prompt(title, [default]); 텍스트 메세지와 입력할 수 있는 input 필드 그리고 OK/Cancel버튼이 modal 창에 보여진다. title 방문자가 보는 텍스트이다. default 두번째 파라미터로 옵션사항이고 input 필드의 초기 값을 나타낸다. 위에서 예시의 []대괄호(square brackets)는 필수 값이 아님을 나타낸다.(denote) 사용자는 prompt 인풋에 ..