프런트엔드/클린코드7 JavaScript - 함수 다루기 함수는 2개 이하가 이상적이다 매개변수의 개수를 제한 하는 것은 함수 테스팅을 쉽게 만들어 주기 때문에 중요하다. 만약 매개변수가 3개 이상일 경우엔 테스트 해야하는 경우의 수가 많아지고 각기 다른 인수들로 여러 사례들을 테스트 해야한다. 3개 이상일 경우는 객체로 매개변수를 만들어서 사용하는 방법이 있다. BAD function createMenu(title, body, buttonText, cancellable) { // ... } GOOD function createMenu({ title, body, buttonText, cancellable }) { // ... } createMenu({ title: 'Foo', body: 'Bar', buttonText: 'Baz', cancellable: tr.. 2022. 4. 18. JavaScript - 객체 다루기 Shorthand Properties 객체에 key-value을 할당 시 변수 그대로 할당을 하면 변수 이름 그대로 key가 되고 변수값 그대로 value로 값을 할당할 수 있다. 예제) BAD const name = "Tom"; const age = 20; const person = { "name" : name, "age" : age, }; console.log(person); // 결과 { age: 20, name: "Tom" } GOOD const name = "Tom"; const age = 20; // 다음과 같이 축약해서 사용 가능하다. const person = { name, age }; console.log(person); // 결과 { age: 20 name: "Tom" } Compute.. 2022. 4. 15. JavaScript - 배열 다루기 Javascript의 배열은 객체다 Javascript 배열 요소 안에 key-value 값이나 함수를 설정해도 입력이 잘되는 것을 확인할 수 있다. const arr = [1, 2, 3]; arr[4] = 'test'; arr['property'] = 'value'; arr['obj'] = {}; arr['{}'] = [1, 2, 3]; arr['func'] = function () { return 'hello'; }; 호출해보면 key-value, 함수 모두 입력되어 있으며 console.log(arr); // output [ 0: 1 1: 2 2: 3 4: "test" func: ƒ () obj: {} property: "value" {}: (3) [1, 2, 3] length: 5 [[Protot.. 2022. 4. 15. JavaScript - 분기 다루기 값,식,문 문법을 간과하는 경우가 있는데, 문법은 컴퓨터를 이해시켜야하기 때문에 중요하다. 값과 식과 문을 구분한다. // "값"이 들어가야하는 자리에 "식"이 들어감 (X) Hello World // 삼항연산자는 "값"으로 귀결되기 때문에 사용 가능 (O) Hello World () : 함수, 우선순위 {} : 값과 식만 들어가야함. 바로 리턴되는 분기문은 논리연산자를 사용해야한다. if (conditionOne) {return one;} // 간단한 연산을 활용한 방법 {conditionOne && one} 삼항 연산자 다루기 피 연산자가 조건, 참일 때, 거짓일 때 세개 인것을 잊지말자. 삼항연산자를 과도하게 중복해서 사용하는 경우를 피하자 1. if를 사용하여 조건을 나누자 2. else-if를 .. 2022. 4. 14. JavaScript - 경계 다루기 min-max 미만, 초과 또는 이하, 이상인지 둘 중 하나로 해석될 가능성이 있다. const MIN_COUNT = 1; const MAX_COUNT = 100; 명시적으로 정의하기 위하여 LIMIT를 붙여서 다음과 같이 개선할 수 있다. const MIN_COUNT_LIMIT = 1; const MAX_COUNT_LIMIT = 100; begin-end 일반적으로 begin은 경계에 포함되고 end는 경계에 포함되지 않는 암묵적인 규칙이 있다. 2022-01-01부터 2022-01-10까지 포함될 것을 예측할 수 있다. function getDate(beginDate, endDate) { // some code } // 2022-01-01부터 2022-01-10까지 포함될 것을 예측할 수 있다. ge.. 2022. 4. 14. JavaScript - 타입 다루기 타입 검사 typeof typeof는 피연산자를 검사해서 타입을 문자열로 반환하는 함수이다. Primitive value (원시적인 string, integer 등)는 typeof로 감별하기가 쉽지만 Reference value (참조되는 Object, Array 등)는 object라는 결과 값으로만 출력이 되므로 정확한 판별에 어려움이 있다. Object, Array 동일하게 object 결과를 가져오게 된다. typeof {} == 'object' // true typeof [] == 'object' // true instanceof instanceof 연산자는 생성자의 프로토타입 (prototype) 속성이 객체의 프로토타입 (prototype) 체인 어딘가 존재하는지를 판별할 때 사용한다. ins.. 2022. 4. 14. JavaScript - 변수 다루기 함수 스코프 (Function Scope) vs 블록 스코프 (Block Scope) 함수 스코프 변수가 함수 내부에서 선언되면 해당 함수 내에서만 액세스할 수 있으며 해당 함수 외부에서 사용할 수 없다. 블록 스코프 if 또는 switch 조건이나 또는 for 또는 while 루프 내부에서 선언된 변수는 해당 특정 조건 또는 루프 내에서 액세스할 수 있다. 간단히 말해서 중괄호 안에 선언된 변수는 블록 범위 내에서 호출된다. var 는 함수 범위로 호출되며 let & const 는 특정 블록 내에 엑세스를 할 수 있다. let은 프로그램을 진행하면서 변경 가능하지만 const는 프로그램이 끝날 때까지 변경되지 않고 일정하게 유지된다. function hello() { if (true) { console.. 2022. 4. 14. 이전 1 다음 728x90 반응형
