[JS] Syntax | 16. 구조분해(Destructuring)
·
Language/JavaScript
JavaScript의 구조분해는 배열이나 객체 등 여러 값의 집합으로 존재하는 값들의 요소를 각각의 변수에 바로 할당할 수 있게 하는 기능입니다. 배열의 경우 대괄호 [ ]로 변수들을 묶어 사용할 수 있습니다.const arr = ["cat", "dog", "rabbit", "parrot", "fox"];// destructuringconst [var1, var2, var3, var4, var5] = arr;console.log(var1); // "cat"console.log(var2); // "dog"console.log(var3); // "rabbit"console.log(var4); // "parrot"console.log(var5); // "fox"객체의 경우 중괄호 { }로 변수들을 묶..
[JS] Syntax | 15. Optional chaining - 속성 존재여부 확인하기
·
Language/JavaScript
JavaScript에서 객체에 대한 조건문을 작성할 때, 특정 속성값이 있는지의 여부가 중요하게 작용할 때가 있습니다.const user1 = { 'name': 'Jhon', 'age': 20, 'membership': 'plus',}const user2 = { 'name': 'Mary', 'age': 20,}// user2는 membership을 속성값으로 가지지 않기 때문에 에러가 발생합니다if (user1.membership === 'plus' && user2.membership === 'plus'){ console.log('all of them have plus membership');}이 경우, 해당 객체에 속성값이 존재하는지 먼저 확인한 수 조건문을 작성해야 합..
[JS] Syntax | 14. 계산된 속성명 (computed property name)
·
Language/JavaScript
JavaScript의 객체에서는 속성 이름에 표현식을 사용할 수 있습니다. 이를 계산된 속성명(computed property name)이라고 합니다. 사용하고자 하는 표현식을 대괄호 [ ] 로 감싸서 사용하면, 그 표현식의 결과로 나오는 값이 속성명으로 들어가게 됩니다. 함수 또한 표현식으로 나타낼 수 있으므로, 그 반환값이 속성명으로 들어가게 됩니다.const attr1 = 'a' + 'b';const attr2 = () => "cd";const obj = { [attr1]: 1; // "ab": 1 [attr2]: 'ace'; // "cd": 'ace'}이는 객체의 속성값을 호출할 때도 동일하게 사용할 수 있습니다.console.log(obj.[attr1]); // "ab"
[JS] Syntax | 13. Spread - 배열 또는 객체 분해하기
·
Language/JavaScript
JavaScript에서 배열은 call-by-reference입니다. 따라서, 배열을 담은 변수는 배열의 값들 자체가 아닌, 배열을 가리키는 주소값을 담고 있습니다. 때문에 배열을 담은 변수를 다른 변수에 할당하면, 주소값을 할당받아 같은 배열을 공유하게 됩니다.const lst1 = [1, 2, 3];const lst2 = lst1;lst1.push(4); // lst1에 4를 추가console.log(lst1); // [1, 2, 3, 4]console.log(lst2); // [1, 2, 3, 4]따라서 주소값을 공유하지 않는 완전히 새로운 배열로 복사하려면, 동일한 요소로 구성된 리스트를 새로 선언해야 합니다. 이 때 유용한 문법이 spread입니다. Spread를 사용하면 배열의 값을 펼쳐..
[JS] Syntax | 12. Arrow function
·
Language/JavaScript
Arrow function은 ES2015부터 새로 추가된 함수 선언 방식입니다. 기존의 function 예약어를 사용해 선언하던 함수를 다음과 같이 선언할 수 있습니다.// 이 함수와const func = function(arg) { return arg * 2;}// 이 함수는 동일합니다.const func = (arg) => { return arg * 2;}만약 받는 매개변수가 하나 뿐이라면, 매개변수의 괄호( )를 생략할 수 있습니다.const func = arg => { return arg * 2;}만약 함수 부분이 return 문 하나로만 구성되어 있다면, 함수 부분의 중괄호{ }도 생략할 수 있습니다.const func = (arg) => arg * 2;단, 객체를 반환할 때는 ..
[JS] Syntax | 11. rest parameter - 가변 변수 사용하기
·
Language/JavaScript
1. argumentargument는 함수에서 가변적인 매개변수들을 받아 접근할 때 사용할 수 있습니다. argument는 유사 리스트의 형태로 반환되어 리스트와 관련된 메소드를 사용할 수는 없습니다. 단, argument.length와 argument[0] 등의 인덱스 접근은 가능합니다.const func1 = (arg1, arg2) => { console.log(arg1); console.log(arg2);}func1(1); // 1, undefinedfunc1(1, 2); // 1, 2func1(1, 2, 3); // 1, 2 (3은 출력되지 않음)const func2 = (arg1, arg2) => { for (const arg of arguments){ ..
[JS] Syntax | 10. 병합연산자(??)
·
Language/JavaScript
JavaScript에서는 and(&&)와 or(||) 연산을 할 때 첫 번째 값에 무엇이 오느냐에 따라 출력값이 달라집니다.operand 1operand 2ANDORTruthyTruthy operand 2operand 1TruthyFalsyoperand 2operand 1FalsyTruthyoperand 1operand 2FalsyFalsyoperand 1operand 2그리고 이를 이용하여 특정 변수에 기본값을 지정하는 코드를 작성할 수도 있습니다.const perhapsNull = null;// perhapsNull이 false라면 'notNull'을, true라면 perhapsNull을 반환합니다.const value = perhapsNull || 'notNull';여기서 true / false 값..
[JS] CommonJS & ES에 대해서
·
Language/JavaScript
CommonJSCommonJS는 주로 Node.js 환경에서 사용되는 모듈 시스템의 표준입니다. 모듈 시스템을 도입하여 특정 함수나 오브젝트를 외부에서 사용할 수 있도록 모듈화 하였습니다.이 덕분에 모듈을 사용하려는 파일에서는 필요한 모듈만 선택적으로 불러와 사용할 수 있게 되었습니다.ESJavaScript를 다루다보면 es6 혹은 es 접두사가 붙은 용어를 볼 수 있습니다. 이 es는 ECMA Script의 약어로, ECMA에서 명시한 문서자료를 가리킵니다.ECMA?ECMA(또는 Ecma) international은 정보와 통신 시스템을 위한 국제적 표준화 기구입니다. JavaScript는 그 역사가 오래된 만큼, 시간이 지남에 따라 많은 부분이 수정되어 왔습니다. Ecma international은 ..