분류 전체보기 (48) 썸네일형 리스트형 [JavaScript] 삼항 연산자 다루기 삼항 연산자 - 조건 ? 참 : 거짓 지나친 숏코딩보다 사용자가 명확하게 알아볼 수 있는 코딩을 하는 것이 좋습니다. Bad function example() { return condition1 ? value1 : condition2 ? value2 : condition3 ? value3 : value4 } Good function example() { if(condition1) return value1 else if(condition2) return value2 else if(condition3) return value3 else return value4 } if문이 3개 이상일 때에는 switch case가 더욱 명확하고 효율적입니다. 삼항 연산자는 값을 만들고 변수에 담아낼 때 가장 좋습니다. Ba.. [JavaScript] 명확한 함수 만들기 유지보수에 취약한 함수를 만들지 않는 방법 1. 함수 네이밍 시 접두사(prefix), 접미사(suffix) 활용하여 규칙을 정합니다. getFunction() setFunction() saveFunction() deleteFunction() handleFunction() - 함수 네이밍 시 접두사로 동사를 사용하게 되면 어떤 역할을 하는 함수인지 명확히 알 수 있습니다. 2. 함수의 네이밍과 인자의 순서의 연관성을 고려합니다. genRandomNumber(1, 45) getDates('2023-12-12', '2023-12-12') 3. 매개변수를 2개가 넘지 않도록 만듭니다. 4. 규칙적이지 않는 매개변수가 들어온다면 arguments, rest parameter를 고려합니다. 5. 매개변수가 많아지.. [JavaScript] 형변환 주의하기 코드를 보고 명시적으로 예측할 수 있는 형변환을 활용하는 것이 좋습니다. 암묵적 형변환 11 + ' 문자와 결합' // '11 문자와 결합' !!'문자열' // true !!'' // false 명시적 형변환 String(11 + ' 문자와 결합') // '11 문자와 결합' Boolean('문자열') // true Boolean('') // false Number('11') // 11 parseInt('9.999', 10) // 9 *parseInt()의 기본값은 10진수가 아니기 때문에 두 번째 인수에 10진수로 지정해주는 것이 오류를 방지에 좋습니다. [JavaScript] Equality(==) 줄이기 동등 연산자를 엄격하게 사용하지 않으면 검사만 했을 뿐인데 Type casting(형변환)이 일어납니다. '1' == 1 // true 1 == true // true 서로 type이 다름에도 불구하고 결과는 true가 나오게 됩니다. Strict Equality(===) '1' === 1 // false 1 === true // false 동등 연산자(==)는 어떠한 오류가 날지 예상할 수 없기 때문에 엄격한 동등 연산자(===)를 사용하여 하는 것이 좋습니다. [JavaScript] 호이스팅 주의하기 호이스팅 런타임 시 선언이 최상단으로 끌어올려지는 것입니다. 호이스팅의 문제는 코드를 작성할 때 예측하지 못한 실행 결과가 노출되는 것입니다. 함수 선언 전에 호출 시 오류가 나타나지 않고 정상적으로 호출됩니다. 함수도 호이스팅 되기 때문입니다. var sum; console.log(sum()) // 3 function sum() { return 1 + 2 } 이러한 호이스팅은 프로그래밍에 안 좋은 영향을 줍니다. 해결방안 1. var 지양하기 - let, const 지향하기. 2. 함수 표현식 - 변수에 익명 함수를 할당해주는 방법. console.log(sum()) // Error const sum = function() { return 1 + 2 } [JavaScript] 임시 변수 제거하기 임시 변수를 제거 해야하는 이유 - 명령형으로 가득한 로직. - 디버깅이 힘듭니다. - 임시 변수를 조작하고 추가적인 코드를 작성하고 싶은 유혹을 받을 수 있습니다. - 유지 보수가 힘듭니다. 해결책 - 함수 나누기 - 바로 return - 고차함수(map, filter, reduce 등) - 선언형 코드 function getElements() { const result = {}; // 임시 객체 result.title = document.querySelector('.title') result.text = document.querySelector('.text') result.value = document.querySelector('.value') return result } 임시 변수를 제거하게 되면 .. [JavaScript] 함수 스코프 & 블록 스코프 function scope var global = '전역' if(global === '전역') { var global = '지역' console.log(global) // '지역' } console.log(global) // '지역' if는 함수가 아니기 때문에 전역 공간까지 영향을 줍니다. block scope let global = '전역' if(global === '전역') { let global = '지역' console.log(global) // '지역' } console.log(global) // '전역' 블록 단위로 안전하게 지역 변수의 역할을 합니다. [JavaScript] var를 지양하자 TDZ(Temporal Dead Zone) 일시적 사각지대 - 스코프의 시작 ~ 초기화 시작 구간 JavaScript에서의 변수는 선언, 초기화, 할당이라는 3가지 단계를 거쳐 생성됩니다. var - 함수 스코프 - 선언과 초기화를 동시에 진행 - 메모리에 undefined를 할당하여 변수 선언 전에 undefined가 호출되는 호이스팅 발생 console.log(name) // undefined var name = '이름' - 재선언(중복선언) 가능 var name = '이름1' var name = '이름2' var name = '이름3' console.log(name) // 이름3 편하게 사용할 수 있지만 코드가 길어질수록 위험합니다. let, const - 블록 스코프 - 선언과 초기화 분리 - 호.. 이전 1 ··· 3 4 5 6 다음