웹 개발자 스터디

옵셔널 체이닝 - 옵셔널 체이닝(?.)을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 접근할 수 있습니다. - 옵셔널 체이닝은 ?. 앞 평가대상이 undefined나 null 이면 평가를 멈추고 undefined를 반환합니다. - 옵셔널 체이닝의 앞 평가대상이 undefined나 null이 아닌 실제 값 존재한다면 뒤의 프로퍼티는 존재해야합니다. 그러므로 프로퍼티 안의 프로퍼티를 검증할 때 주의해야합니다. let user = null; alert( user?.address ); // undefined alert( user?.address.street ); // undefined 이 경우 address가 없을 경우 에러가 발생하므로 조심해야함 - 옵셔널 체이닝은 왼쪽의 평가 대상에 값이 없을 경우 평가..

객체 생성을 생성자 함수를 이용해 생성할 수 있습니다. function User(name) { this.name = name; this.isAdmin = false; } let user = new User("보라"); 먼저 this = {}로 빈객체가 생성되며 함수 본문을 실행 해 프로퍼티를 추가합니다. 그런 다음 this를 반환하여 객체를 반환합니다. 생성자를 이용하면 프로퍼티의 내용이 다른 동일한 객체를 쉽게 생성할 수 있습니다. => 재사용 가능 모든 함수들은 new 연산자를 이용해 생성자 함수가 될 수 있으며 첫글자가 대문자인 함수는 new 연산자를 이용해 실행해야 한다는 약속이 있습니다. let user = new function() { this.name = "John"; this.isAdmin..

let user = { name: "John", age: 30 }; user.sayHi = function() { alert("안녕하세요!"); }; user.sayHi(); // 안녕하세요! // 함수 선언 function sayHi() { alert("안녕하세요!"); }; // 선언된 함수를 메서드로 등록 user.sayHi = sayHi; 객체는 메서드를 함수 만들듯이 생성할 수 있으며 . 연산자를 통해 사용할 수 있습니다. 함수를 생성 후 메서드로 등록해서 사용할 수도 있습니다. 객체 리터럴 안에 메서드를 생성할 경우 단축할 수 있으며 객체 상속에 따라 조금 차이가 존재합니다. // 아래 두 객체는 동일하게 동작 user = { sayHi: function() { alert("Hello"); }..

자바스크립트에서는 '도달 가능성(reachability)'이라는 개념을 통해 메모리를 관리하고 있습니다. 도달 가능성(reachability)은 어떻게든 접근 가능하거나 사용할 수 있는 값이며 가능성이 있으면 삭제되지 않습니다. 현재 함수의 지역 변수와 매개변수 중첩 함수의 체인에 있는 함수에서 사용되는 변수와 매개변수 전역 변수 기타 등등 다음과 같은 값들은 처음부터 도달이 가능하기 때문에 이유 없이는 삭제 되지 않으며 root라고 부릅니다. root가 참조하는 값도 도달할 수 있는 값이 됩니다. // user엔 객체 참조 값이 저장됩니다. let user = { name: "John" }; // -> 객체가 도달할 수 있는 값 user = null; 해당 코드에서 user에 null을 대입할 경우 n..

let message = "Hello!"; let phrase = message; -> 원시 값은 다음과 같이 간단하게 복사하여 저장할 수 있습니다. 그러나 객체의 경우 그대로 복사되어 저장되는 것이 아닌 객체가 저장되어져 있는 메모리 주소인 참조 값이 저장됩니다. let user = { name: "John" }; let admin = user; // 참조값을 복사함 객체의 경우 메모리 어딘가에 저장되어져 있고 다음과 같이 객체를 다른 변수에 할당할 경우 동일한 객체를 참조하고 있게 됩니다. 이렇게 되면 한쪽에서 객체를 수정할 경우 다른 한 쪽 변수에서 수정된 객체의 내용을 볼 수 있습니다. let a = {}; let b = a; // 참조에 의한 복사 alert( a == b ); // true, ..

객체는 { } 안에 키 : 값의 형태로 이루어져 있습니다. 객체 생성 방법 let obj = new Object(); //객체 생성자 let obj = { }; //객체 리터럴 객체 사용 방법 let user = { name: "John", age: 30, "likes birds": true // 복수의 단어는 따옴표로 묶어야 합니다. }; const를 사용할 때 user 전체의 내용은 변경할 수 없지만 내용은 변경이 가능합니다. 두 단어 이상의 단어로 구성된 키를 부를 경우 . 연산자를 사용해 부를 수 없고 []를 이용해 접근할 수 있습니다. user["likes birds"] = true; 변수를 이용해 유동적으로 접근할 경우 []를 사용해야하며 . 연산자는 사용할 수 없습니다. let user = ..

=> 를 활용하면 함수를 좀 더 간단하게 표현할 수 있습니다. let test = (arg1, arg2) => exp test(1,2); -> arg1,arg2를 인수로 받는 함수 test가 생성이 됩니다. 함수를 호출하면 인수를 활용해 exp를 return 하게 됩니다. 인자가 한개인 경우 ()를 생략할 수 있습니다. 인자가 없을 경우 ()를 생략할 수 없고 사용해야합니다. 여러줄 인 경우에는 {}를 사용해 블럭으로 묶어주고 return을 사용해서 표현합니다. let test = (a,b) => { body content; return body content; }; test(1,2);

함수 표현식 let test = function(){ body content; }; => 함수를 생성하고 해당 함수를 변수에 할당합니다. 이때 test를 출력하면 함수의 코드가 찍히게 됩니다. 함수를 호출하기 위해서는 ()를 사용해야 합니다. 함수는 값이기 때문에 다른 변수에 할당 해 사용이 가능합니다. fuction test(){ bodycontent; } let funcTest = test; //둘 다 같은 결과 test(); funcTest(); 변수에 넣어서 사용할 때는 값으로 분류 되기 때문에 세미콜론을 사용해야 합니다. 콜백 함수 : 함수의 인자로 함수를 사용함으로써 나중에 호출하는 것입니다. 익명 함수 : 함수의 이름 없이 선언하는 함수로써 선언부 바깥에서는 접근 할 수 없습니다. 함수선언문..

showMessage(); showMessage(); showMessage(); 함수 선언 fucntion showMessage(){ body content } 함수를 호출할 경우 매개변수 유무에 따라 넣어 주고 함수명을 사용해 호출합니다. 지역 변수 - 함수 블록 내에 선언한 변수는 함수 내에서만 접근할 수 있습니다. 전역 변수 - 함수 외부에서 선언하였으며 외부 및 내부 모두에서 접근이 가능합니다. - 함수 내부에 동일한 이름의 지역 변수가 선언되어져 있으면 전역 변수로 인식하게 됩니다. 매개변수 - 매개변수를 사용하면 함수내의 지역 변수에 복사되어 복사된 값을 사용합니다. - 복사된 값을 사용하기 때문에 함수 내에서 값을 변경하여도 외부에는 적용이 되지 않습니다. 기본값 - 주어진 매개변수에 값이 ..

여러개의 if문은 switch로 변경하여 사용할 수 있습니다. switch(x){ case 'value1': break; case 'value2': break; default : break; } x의 값에 해당하는 case가 수행이 되며 해당하는 부분이 없을 경우 default의 내용이 수행되게 됩니다. 이때 break의 문이 없을 경우 조건에 관계없이 순차적으로 아래의 내용을 쭉 실행하게 됩니다. 여러 case를 붙여서 붙인 값들일 경우 한개의 내용을 실행하게 할 수도 있습니다. ex) case '1': case '2": break; switch 문은 비교로 조건을 확인하므로 자료형을 조심해서 사용해야 합니다.