[개발자의품격][부트캠프][1기][7차시] JavaScript 주요 포인트 #3 | 조건문, 반복문, 함수

[ 영광의 시대!/2022 개발자의 품격 부트캠프 1기 ]

[개발자의품격][부트캠프][1기][7차시] JavaScript 주요 포인트 #3 | 조건문, 반복문, 함수 | 내장 객체 String, Number

2022년 01월 26일 11시 16분 11초에 업로드 된 글입니다.

작성자: DandyNow

728x90

JavaScript 주요 포인트 #3

여기에서는 조건문, 반복문, 함수, 내장 객체 String, Number를 다룬다. String 객체의 경우 "padStart / padEnd" 부터는 8차시에 이어서 다룬 내용을 추가하였다.

조건문

const d = new Date();
const day = d.getDay(); // getDay는 요일을 숫자 값으로 반환한다(일 ~ 토까지, 일요일은 0)

switch (day) {
    case 0:
      dayName = "일요일";
      break;
    case 1:
      dayName = "월요일";
      break;
    case 2:
      dayName = "화요일";
      break;
    case 3:
      dayName = "수요일";
      break;
    case 4:
      dayName = "목요일";
      break;
    case 5:
      dayName = "금요일";
      break;
    case 6:
      dayName = "토요일";
      break;
    default:
      dayName = "none";
      break;
}

console.log("switch : " + dayName);

switch 조건문은 어떤 경우에는 if 보다 적절하지만 코드가 길어지는 것으로 인해 실무에서 사용하는 경우가 많지 않다. if문 보다 적절한 경우는 상수 값을 비교할 때이다. if가 모든 조건을 다 검토한다면, switch는 해당하는 상수를 바로 찾아간다.

// switch 보다 더 간단히 표현 가능하며, 실무에서 다국어 표현시 활용된다.
const d = new Date();
const day = d.getDay();

const dayNamesMultilingual = {
    ko: ["일요일", "월요일", "화요일", "수요일", "목요일", "금요일", "토요일"],
    en: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
};

// const userLanguage = "ko";
// console.log("오브젝트 : " + dayNamesMultilingual[userLanguage][day]);

const userLanguage = "en";
console.log("오브젝트 : " + dayNamesMultilingual[userLanguage][day]);

요일 표현의 예는 위에서 다룬 switch 보다 배열을 사용할 때 더 간편하다. 실무에서는 다국어 표현 시 많이 활용된다.

반복문

for (let i = 0; i < brands.length; i++) {}

// 위 코드 보다 아래 코드가 성능면에서 더 유리하다.
const length = brands.length;
for (let i = 0; i < length; i++) {}

for-loop 반복문 사용 시 조건부에서 변수를 사용하는 것이 그렇지 않은 경우보다 더 유리하다. 그 이유는 length 변수는 brands의 길이 값 자체를 가지고 있어 반복문에서 brands의 길이를 매번 계산할 필요가 없기 때문이다. 이와 같이 코드의 성능을 고려한 코딩은 중요하다. 하지만 코드의 성능에 매몰되어 사용자의 편의성을 도외시하는 우를 범해서는 안된다.

// 실무에서는 for-loop보다는 for-of를 많이 사용한다. 배열을 다룰때 더 편리하기 때문이다.
let brands = ["애플", "구글", "메타", "아마존", "네이버", "카카오"];
for (const brand of brands) {}

// 문자열에서 문자를 가져올때도 사용한다.
const lang = "JavaScript";
for (const char of lang) {}

배열을 for 반복문에서 다둘때 실무에서는 for-loop보다 for-of를 더 많이 사용한다. 또한 문자열에서 문자를 가져올 때도 for-of를 사용한다. 참고로 숫자에 +""을 붙이면 문자열이 된다. 그리고 javascript에서 한글의 자음과 모음은 분리할 수 있는 방법이 존재하지 않는다.

let person = {
    name: "홍길동",
    age: 22,
    tel: "010-0000-0000",
    isAdult: true,
    siGunGu: "",
    grade: [],
    key: "",
}

// 실무에서는 배열에서 사용하는 경우는 거의 없고, 눈에 직관적으로 보이지 않는 오브젝트의 키와 값을 다룰때 많이 사용한다.
for (const key in person) {
    // console.log(key, person.key); //이때 key는 오브젝트 안의 key를 가리키는 표현이다.
    console.log(key, person[key]); //대괄호는 동적으로 접근할 때, 정적으로 접근할 때는 .을 사용한다.
}

for-in은 배열뿐만 아니라 오브젝트에도 사용할 수 있다. 실무에서는 배열에서 사용하는 경우는 거의 없고, 눈에 직관적으로 보이지 않는(서버의 DB에서 가져오는 데이터) 오브젝트의 키와 값을 다룰 때 많이 사용한다.

// do-while은 반드시 수행하도록 함
i = 11;
do {
    console.log("number: ", i); // number:  11
    i++;
} while (i <= 10);

while 반복문은 반복 횟수를 알지 못할 때 for 반복문 보다 유리하다. 그리고 do-while 반복문은 조건에 맞지 않더라도 반드시 수행해야만 할때 사용한다.

함수

함수(function)를 다른 언어에서는 메서드(method)라고도 한다. 구글링 해보니 메서드는 클래스 내에 선언되어 있는 함수라고 한다. 함수를 사용하는 이유는 "1) 코드의 재사용, 2) 유지보수와 운영의 편의성" 때문이다. 실무에서는 리드 개발자가 공통 기능을 common.js라는 파일 형태로 만들어 배포한다. 만약 구성원이 생각할 때 더 필요한 기능이 있다면 리드 개발자에게 제안할 수 있다. 리드 개발자는 처음부터 완벽한 코드를 작성하겠다는 욕심을 버리고 빠르게 팀원이 사용할 수 있는 코드를 작성하는 게 더 유리하다. 빨리 만들어 배포한 후 계속해서 개선해 나가는 게 합리적이다.

// 부가세와 같은 것은 세법이 바뀔때 변경될 수 있는 영역이다.
function taxAmount(amount) {
    const tax = 0.1; // 부가세 10%
    return amount * tax;
}

console.log(taxAmount(1000));

부가세와 같은 것은 세법이 바뀔때 변경될 수 있는 영역이다. 만약 정부 정책에 따라 부가세가 변경되었다면 호출되는 해당 함수만 수정하면 이 함수를 사용하는 모든 코드에 변경된 내용이 자동적으로 반영된다. 유지보수와 운영의 편의성이 일어나는 지점이다.

<script>
  // 함수 표현식
  let add = function (n1, n2) {
    return n1 + n2;
  };
  console.log(add(5, 7)); // 12

  // Function 생성자 함수
  let add2 = new Function("n1", "n2", "return n1 + n2;");
  console.log(add2(5, 7)); // 12

  // Function 생성자 함수는 함수를 동적으로 선언하기 좋다.
  const operator = "+";
  let calculator = new Function("n1", "n2", "return n1 " + operator + " n2;");
  console.log(add2(5, 7)); // 12
</script>

함수 표현식은 함수를 변수에 할당하고 호출 시 변수를 호출한다. 함수 선언식의 경우에는 코드의 위치에 구애받지 않지만, 함수 표현식은 코드의 위치에 따라 에러가 발생할 수 있다. 함수 표현식은 코드의 가독성이 좋다. Function 생성자 함수는 함수를 동적으로 선언하기 좋다.

내장 객체 - String 객체

indexOf

// 실무에서는 인덱스 값 자체보다 값의 유무확인을 위해 많이 사용한다.
let tel = "010-0000-0000";
let tel2 = "01000000000";
console.log(tel2.indexOf("-")); //값이 없으면 -1
if (tel2.indexOf("-") > -1) {
	console.log("-가 있음");
} else {
	console.log("-가 없음");
}

자바스크립트 내장 객체 중 String 객체의 indexOf는 문자열에 해당 값이 없을 때 -1을 반환한다. 이러한 기능을 이용해서 실무에서는 인덱스 값 자체보다 원하는 값의 존재 유무 확인을 위해 많이 사용한다.

slice / substring

// 문자열의 끝에 있는 %를 가져오는 두가지 경우
let percentFormat = "#,###.##%";

console.log(
	percentFormat.slice(-1)
); // %

console.log(
	percentFormat.substring(percentFormat.length - 1, percentFormat.length)
); // %

실무에서 숫자를 화면상에 출력할 때 특정 포맷으로 보여줘야 한다. 쉼표(,), 소수점(.), 달러($), 원화(\), 퍼센트(%) 등을 섞어서 표시하는 것이다. 이렇게 표시하게 되면 더 이상 숫자가 아니라 문자열이 된다. 이러한 객체를 다룰 때 slice, substring을 사용한다. 위 코드를 보면 slice가 substring 보다 더 간단하다. 하지만 실무에서 만난 대다수의 개발자가 전자보다 후자를 더 많이 사용하는 경우를 보았다고 한다. 타성에 젖지 않는 자세가 필요하다.

substr

let date = "20220125"; // 실무에서 년, 월, 일을 잘라 내야할 때가 많다.
let year = date.slice(0, 4);
let month = date.slice(4, 6);
let day = date.slice(6, 8);

// substr로 위 코드와 동일한 결과를 만들 수 있다.
// 파라미터는 시작인덱스, 잘라낼 길이(잘라낼 길이를 정확히 알고 있을 때 굉장히 편리하다.)
year = date.substr(0, 4);
month = date.substr(4, 2);
day = date.substr(6, 2);

잘라낼 길이를 정확히 알고 있을 때 substr이 slice보다 더 편리하다.

toUpperCase / toLowerCase

// 서버의 DB에서 실제 값을 검색할 때 이 문법을 사용한다.
// toUpperCase()
console.log(str.toUpperCase());

// toUpperCase()
console.log(str.toLowerCase());

CSS에서 화면상 출력을 대문자로 표시하는 경우가 있었다. 컴퓨터는 대소문자를 분명히 구분하고 A와 a는 전혀 다른 값이다. 따라서 화면상 출력이 대문자인데 실제 값이 소문자이면 문제가 될 수 있다. 검색 기능 구현 시 특히 문제가 될 수 있다. toUpperCase(또는 toLowerCase를 활용하여 이러한 문제를 해결할 수 있다.

trim / replace

// trim()
str = "    길동";
console.log(str);
console.log(str.trim()); // 앞뒤 공백을 모두 없애 주나, 중간의 공백은 처리하지 못한다. 

let name = "홍 길 동";
console.log(name.replace(" ", "")); // 홍길 동
console.log(name.replace(/\s/g, "")); // 홍길동

공백 없이 입력해야하는 경우가 있다. 하지만 사용자는 불필요한 공백을 추가하는 실수를 할 수도 있다. 사용자는 언제든지 실수할 수 있고, 다양한 예외 케이스를 감안하여 처리할 수 있어야 좋은 개발자이다. trim은 불필요한 앞뒤 공백을 제거해 준다. 하지만 문자열 중간에 공백이 있다면? 이 부분은 정규식으로만 해결할 수 있다. 정규식은 외계어 같지만 매우 중요하다!

padStart / padEnd

<script>
  str = "5";
  console.log(str.padStart(4, "0")); //0005
  console.log(str.padEnd(4, "0")); //5000
</script>

8차시에 이어서 다룬 String 객체이다. 일정한 규칙에 따라 학번 등을 구성할때 유용하다. 예를 들어 "년도 2자리 + 학과번호 2자리 + 입학순서(이름 가나다순) 4자리 = 총 8자리"에 맞춰 22031256를 만들어야 한다면 이 함수로 쉽게 구현할 수 있다.

charAt / charCodeAt

<script>
  // charAt 캐릭터앳, 실무에서 ID나 제품코드를 만들때 사용하였다.
  str = "A0001";
  console.log(str.charAt(0)); // A
  
  // 동일한 결과를 보여주는 String 객체
  str.substring(0, 1); // A
  str.substr(0, 1); // A
  str.slice(0, 1); // A

  // charCodeAt, 아스키코드를 가져온다.
  console.log(str.charCodeAt(0)); // 65
</script>

charAt은 딱 한문자만 가져오는 특성을 이용해 실무에서 사용했다. 예를 들어 실무에서 ID를 만들때 첫 문자는 권한을 의미했다. 관리자는 A, 매니저는 M 과 같이 표기했다. 제조업에서는 제품코드를 만들때 프로덕트 타입을 첫 문자에 표기했다. 이점을 이용해 ID나 제품코드를 다룰 때 charAt을 사용했다. charCodeAt은 실무에서 사용해 본 적이 없다고 한다.

split

<script>
  // 파라미터의 값을 기준으로 분리하여 배열을 만든다.
  let tags = "#개발자의품격#웹개발#부트캠프#자바스크립트";
  let email = "a@gmail.com,b@magil.com";
  let emails = email.split(",");
  console.log(emails); // ['a@gmail.com', 'b@magil.com']
  console.log(tags.split("#")); // ['', '개발자의품격', '웹개발', '부트캠프', '자바스크립트']
  
  // 연월일 분리할 때 매우 유용하다.
  date = "2022-01-26";
  dates = date.split("-");
  year = date[0];
  month = date[1];
  day = date[2];
  console.log(dates); // ['2022', '01', '26']
</script>

split은 실무에서 매우 많이 사용한다. 파라미터의 값을 기준으로 분리하여 배열을 만들어 준다. 특히 연월일 분리할 때 매우 유용하다. 그런데 실무에서는 의외로 모르는 경우가 많다.

startsWith / endsWith

<script>
  // startsWith
  let url = "http://website.com";
  console.log(url.startsWith("http://")); // true
  
  // endsWith
  let file = "abc.pdf";
  console.log(file.endsWith(".pdf")); // true
</script>

startsWith, endsWith는 실무에서 많이 사용한다. startsWith는 파라미터의 값으로 시작하는지, endsWith는 파라미터의 값으로 끝나는지 확인하여 부울 값으로 반환한다.

내장 객체 - Number객체

toString, toExponential, toFixed, toPrecision, parseInt, parseFloat, 프로퍼티

// Number 객체
<body>
  <label for="">수량</label>
  // 숫자만 입력 가능
  <input type="number" name="" id="" />
  3500
  <script>
    let num = 323;
    // toString 문자열 반환
    console.log(num.toString()); // 323x
    console.log(typeof num.toString()); // string

    // toExponential 지수형 반환한다. 실무에서는 잘 사용하지 않는다.
    let x = 10.656;
    console.log(x.toExponential(2)); // 1.07e+1
    console.log(x.toExponential(4)); // 1.0656e+1

    // toFixed 파라미터는 소수점 자리수를 의미하고 소수점을 반올림한다. 실무에서 많이 사용하며, 외국 프로젝트에서 소수점 금액을 요구사항에 맞게 맞출때 사용하였다.
    console.log(x.toFixed(0)); // 11
    console.log(x.toFixed(1)); // 10.7
    console.log(x.toFixed(2)); // 10.66
    console.log(x.toFixed(4)); // 10.6560

    // toPrecision 소수점을 포함한 모든 자리수 의미하고 반올림한다.
    console.log(x.toPrecision(2)); //11
    console.log(x.toPrecision(3)); //10.7

    // parseInt 문자열을 정수로 바꾼다. 실무에서는 사용자가 입력한 숫자가 문자일 가능성을 가정하여 무조건 이 처리를 해준다.
    console.log(parseInt("3")); // 3
    console.log(typeof parseInt("3")); // number
    console.log(parseInt("12.33")); // 12
    console.log(parseInt("10 20 30")); // 10(숫자로 연결되어 있지 않으면 처음에 나오는 숫자만 반환한다.)
    
    // parseFloat()
    console.log(parseFloat("12.33")); // 12.33

    // Number 객체의 프로퍼티
    console.log(Number.MAX_VALUE); // 1.7976931348623157e+308(자바스크립트에서 다룰 수 있는 최대 수)
    console.log(Number.MIN_VALUE); // 5e-324(자바스크립트에서 다룰 수 있는 최소 수)
    console.log(Number.MIN_SAFE_INTEGER); // -9007199254740991(자바스크립트에서 다룰 수 있는 최대 수)
    console.log(Number.MAX_SAFE_INTEGER); // 9007199254740991(자바스크립트에서 다룰 수 있는 최소 수)
  </script>
</body>