JavaScript 08 week 1 Study Keywords

1. 변수가 필요한 이유, 선언하는 방법, 차이점
2. 자바스크립트 데이터 타입의 종류
3. number와 string의 메서드 각각 3개와 사용 방법
4. 함수가 필요한 이유, 정의 & 호출의 차이점
5. 조건문이 필요한 이유, 사용 방법

1

변수가 필요한 이유(사용 목적)

결국 효율성 때문이라고 생각한다. 예를 들어서,

console.log("이걸 언제 다 고쳐1^^");  
console.log("이걸 언제 다 고쳐2^^");
console.log("이걸 언제 다 고쳐3^^");
console.log("이걸 언제 다 고쳐4^^");
console.log("이걸 언제 다 고쳐5^^");
console.log("이걸 언제 다 고쳐6^^");
console.log("이걸 언제 다 고쳐7^^");
console.log("이걸 언제 다 고쳐8^^");
console.log("이걸 언제 다 고쳐9^^");
console.log("이걸 언제 다 고쳐10^^");
console.log("이걸 언제 다 고쳐11^^");
console.log("이걸 언제 다 고쳐12^^");
console.log("이걸 언제 다 고쳐13^^");
console.log("이걸 언제 다 고쳐13^^");
//...
console.log("이걸 언제 다 고쳐100^^");

이런 코드가 100개 있다고 했을 때,
일단 코드가 많고 지저분해보인다.
또한 "고쳐"를 "고치냐"라고 바꿔야 한다거나 똑같은 코드를 10,000개정도 더 만들어야 하는 상황이 온다면 토할지도 모른다.

for (let i = 1; i < 101; i++) {
  let a = "이걸 언제 다 고쳐"
console.log(a + i + "^^")
}

이럴 때 이렇게 변수를 사용하면 (더 나아가서 반복문을 사용하면) 가독성도 좋아지고 유지보수도 쉬워지므로 즉 효율성이 좋아진다.
그리고 무엇보다 내 정신건강이 좋아질 것 같다.

변수 선언하는 방법과 차이점

3가지 키워드를 통해 변수를 선언할 수 있다.
let : 가장 많이 사용, 중복 선언 불가능. 재할당 가능
var : 오래된 방식, 중복 선언 가능, 재할당 가능
const : 변하지 않는 변수(=상수)를 선언할 때 사용. 재할당 불가능

2

자바스크립트 데이터 타입의 종류

자바스크립트 데이터 타입은 크게 기본타입(primitive type)과 참조타입(reference type)으로 나뉜다.

기본타입(primitive type)

• 숫자(Number)
• 문자열(String)
• 불린값(Boolean)
• null
• undefined
• Symbol

참조타입(reference type) = 객체(object)

• 배열(Array)
• 함수(Function)
• 정규표현식(RegExp)
• Date
• Map
• Set

3

number와 string의 메서드 각각 3개와 사용 방법

number

①Number.isInteger() 메소드
Number.isInteger() 메소드는 전달된 값이 정수인지 아닌지를 검사.
전달된 값이 정수이면 true를 반환하며, 정수가 아니거나 NaN, Infinity와 같은 값은 모두 false를 반환

Number.isInteger(0);        // true

Number.isInteger(-100);     // true

Number.isInteger(0.1);      // false

Number.isInteger("문자열"); // false

Number.isInteger(Infinity); // false

Number.isInteger(true);     // false

②Number.parseInt() 메소드
Number.parseInt() 메소드는 문자열을 파싱하여, 문자열에 포함된 숫자 부분을 정수 형태로 반환.
문자열에 여러 개의 숫자가 존재하면, 그중에서 첫 번째 숫자만을 정수 형태로 반환.
이 메소드는 전역 함수인 parseInt() 함수와 완전히 같은 동작을 수행.

Number.parseInt("12");         // 12

Number.parseInt("12.34");      // 12

Number.parseInt("12문자열");   // 12

Number.parseInt("12 34 56");   // 12

Number.parseInt("문자열 56")); // NaN

③Number.isNaN() 메소드
Number.isNaN() 메소드는 전달된 값이 NaN인지 아닌지를 검사.
이 메소드는 전역 함수인 isNaN() 함수가 가지고 있던 숫자로의 강제 변환에 따라 발생하는 문제를 더는 겪지 않게 해줌.
이 메소드는 오직 숫자인 값에서만 동작하며, 그 값이 NaN인 경우에만 true를 반환

Number.isNaN(NaN);       // true

Number.isNaN(0 / 0);     // true

// 다음은 전역 함수인 isNaN()에서 잘못된 결과를 반환하는 예제임.

isNaN("NaN");            // true

isNaN(undefined);        // true

isNaN("문자열");         // true

// Number.isNaN() 메소드에서 맞는 결과를 반환하고 있음.

Number.isNaN("NaN");     // false

Number.isNaN(undefined); // false

Number.isNaN("문자열");  // false

string

①repeat() 메소드
주어진 문자열을 반복하는 메소드
인자 - count

const str = 'abc'; 
str.repeat(2); // 'abcabc'

②replace() 메소드
패턴에 일치하는 일부 또는 모든 부분이 교체된 새로운 문자열을 반환
정규식 또는 문자열로 패턴을 설정할 수 있다.
인자 - pattern, replacement or function

const str = 'abcdabcd'; 
str.replace('ab', 'kkk'); // 'kkkcdabcd'

pattern에 문자열을 넣는다면 가장먼저 탐색되는 한개만 변경

const str = 'abcdabcd'; str.replace(/ab/gi, 'kkk'); // 'kkkcdkkkcd'

정규식을 활용해 전체검색을 하면 해당 문자열 전체에서 탐색 후 변경

③toUpperCase(), toLowerCase() 메소드
대문자, 소문자로 변형시 사용
인자 - X

let str = 'abcd'; 
str = str.toUpperCase(); console.log(str) // 'ABCD' 
str = str.toLowerCase(); console.log(str) // 'abcd'

4

함수가 필요한 이유

• 효율성 : 반복되는 코드를 한 번만 정의해놓고 필요할 때마다 호출하므로 반복작업을 피할 수 있다.
• 가독성 : 긴 프로그램을 기능별로 구분해서 여러 함수로 나누어 작성하면 모듈화로 전체 코드의 가독성이 좋아진다.
• 유지보수 : 기능별(함수별)로 수정이 가능하므로 유지보수가 쉽다.

정의 & 호출의 차이점

• 정의 : 함수를 만들어만 둔 것

//함수선언식

function 함수명( ) {
기능;
}

• 호출 : 만들어놓은 함수를 원하는 곳에 불러서 실행시키는 것. 정의된 함수의 { } 사이의 실행문은 호출이 되어야만 동작한다

함수명 ( );

5

조건문이 필요한 이유 (내 생각)

조건에 따라 범위를 나누거나, 순서를 다르게 하거나 하는 등 상황을 제어해야 하는 경우가 많다. 하지만 현실적으로 그런 모든 경우의 수를 하나하나 가정해서 만들 수가 없기 때문에 조건을 설정해서 좀 더 효율적으로 상황을 제어하기 위함이 아닐까....?

사용방법

if (불린값) {
    // 기능;
} else if {
    // 기능; 
    // else if 는 여러 개 가능
} else {
    // 기능;
}