[오늘 공부한 부분]

1. 항해99 입학시험 - 자바스크립트 특정 문자열 제거 함수 사용하기

1. 항해99 입학시험

  오늘은 항해99 10기 입학시험이 있던 날이다. 오늘 주어진 과제는 화성땅공동구매 화면에 가격란을 추가하고 평수에 따라 가격을 500원씩 계산한 값을 화면단에 보여주는 것이었다. 일단 가격에 대한 변수를 price라고 만들어 주었고, 그 값을 평수 * 500으로 구현하면 되는 것인데, 평수의 변수 값에 "평"이라는 문자때문에 연산에 에러가 났다. 그래서 특정 문자열 제거하는 함수를 구글링하여 문제를 해결했다. 

1. 처음 구현했던 방법은 substring()를 사용한 방법이었다. 평수가 "10평, 20평, 30평, 40평, 50평" 이렇게 정해져 있었기 때문에 앞에서부터 두번째 인덱스까지만 추출해서 곱하기 연산을 하는 방법을 사용했다. 표면적으로 과제 구현에 성공은 했지만, 훗날 만약에 3자릿수 평수 예를 들면 100평과 같은 평수를 주고 싶을때는 제대로 구현되지 않을 코드라는 점에서 개선이 필요했다.

2. 그래서 최종적으로 사용한 함수는 replace() 함수였다. 이 함수는 특정 문자열을 제거해 주기 때문에 "평"이라는 문자를 제거하고 숫자값만 추출하여 평수의 자릿수와 관계없이 가격을 추출할 수 있는 코드가 되었다.

2. 특정 문자열 제거하는 함수

① substr() : 함수는 특정 위치에서 시작하여 길이만큼 문자열을 반환한다. 

str.substr(start, length) // start위치에서 length만큼의 문자열을 추출

var str = 'abcdef';

console.log(str.substr(1)); //bcdef
console.log(str.substr(1,4)); //bcde
console.log(str.substr(-5,2)); //bc

② substring() : 특정 위치에서 시작하여 특정 인덱스 전 까지 문자열을 반환한다.

str.substring(indexStart, indexEnd) //indexStart는 추출하고자 하는 문자열의 시작 인덱스, indexEnd는 설정된 값 이전 인덱스까지

var str = 'abcdef';

console.log(str.substring(1)); //bcdef
console.log(str.substring(1, 4)); //bcd
console.log(str.substring(4, 1)); //bcd
console.log(str.substring(-1)); //abcdef

③ slice() : 함수는 인덱스 범위로 문자열을 자른다는 개념은 substring() 함수와 동일하지만 미묘한 차이가 존재한다.

str.substring(indexStart, indexEnd) // indexStart는 추출하고자 하는 문자열의 시작 인덱스, indexEnd는 설정된 값의 이전 인덱스까지 문자열을 추출

var str = 'abcdef';

console.log(str.slice(1)); // bcdef
console.log(str.slice(1, 4)); // bcd
console.log(str.slice(-1)); // f
console.log(str.slice(-4, -1)); cde

※ substring() 함수와 slice() 함수의 차이점

• substring() 함수와 slice() 함수는 매개변수의 값이 음수일 경우 동작되는 방식이 다르다.
• substring() 함수는 첫 번째 매개변수가 두 번째 매개변수보다 클 경우 값을 교환하여 동작
• slice() 함수는 첫 번째 매개변수가 두 번째 매개변수보다 클 경우 빈 값을 반환
• substring() 함수는 첫 번째 매개변수가 음수일 경우 0으로 처리
• slice() 함수는 첫 번째 매개변수가 음수일 경우 문자열의 길이 + 첫 번째 매개변수의 결괏값으로 설정

④ replace() : 특정 문자열을 빈 값('')으로 대체, 정규식을 만족하거나 특정 문자열이 존재할 경우 원하는 문자열로 대체할 수 있다.

var str = 'abcdef';

console.log(str.replace('a', '')); //bcdef
console.log(str.replace('f', '')); //abcde

출처 :https://developer-talk.tistory.com/178

자바스크립트란?

• 프로그래밍이란 - 프로그래머들이 "어떤 도구"를 이용해 코딩
• 이 때 이용하는 도구가 바로 프로그래밍 언어. 인간이 쓰는 언어와 마찬가지로 프로그래밍 언어도 정해진 문법이 있다.
• 이 문법에 따라 코딩을 하면 컴퓨터는 이를 해석해 우리가 원하는대로 데이터를 입력받아 처리하고 출력해줄 수 있다.
• 프로그래밍 언어도 인간이 쓰는 언어처럼 매우 다양하고 계속 발전하고,
• 언어 고유의 특성과 장단점이 있지만 좀 더 많이 쓰이는 언어들이 존재
• 자바스크립트는 이러한 언어들 중에서 몇 손가락 안에 들만큼 많이 쓰이는 언어이고, 많은 프로그래머들로부터 사랑받고 있는 언어

Node.js 란 ? "Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser"

조금 더 쉬운 말로 얘기하자면 Node.js 는 우리가 자바스크립트 언어의 문법에 맞게 코딩을 했을 때 컴퓨터가 이를 해석해서 처리할 수 있도록 해주는 일종의 전용번역기

① var vs let vs const

• 우선, var는 변수 선언 방식에 있어서 큰 단점을 가지고 있다.
• 변수를 한 번 더 선언했음에도 불구하고, 에러가 나오지 않고 각기 다른 값이 출력되는 것을 볼 수 있다.
• 이는 유연한 변수 선언으로 간단한 테스트에는 편리 할 수 있겠으나, 코드량이 많아 진다면 어디에서 어떻게 사용 될지도 파악하기 힘들뿐더러 값이 바뀔 우려가 있다.
• 그래서 ES6 이후, 이를 보완하기 위해 추가 된 변수 선언 방식이 let 과 const 이다.

그렇다면 let 과 const 의 차이점은 무엇일까?

• 이 둘의 차이점은 immutable 여부이다.
• let 은 변수에 재할당이 가능하다. 그렇지만, const는 변수 재선언, 변수 재할당 모두 불가능하다.

//var
var name = 'bathingape'
console.log(name) // bathingape

var name = 'javascript'
console.log(name) // javascript
    
    
//let
let name = 'bathingape'
console.log(name) // bathingape

let name = 'javascript'
console.log(name) 
// Uncaught SyntaxError: Identifier 'name' has already been declared

name = 'react'
console.log(name) //react


//const
const name = 'bathingape'
console.log(name) // bathingape

const name = 'javascript'
console.log(name) 
// Uncaught SyntaxError: Identifier 'name' has already been declared

name = 'react'
console.log(name) 
//Uncaught TypeError: Assignment to constant variable.

② 클래스 vs 메소드

클래스는 여러 함수와 변수들을 한 번에 묶어서 관리하기 위해 사용한다. 이때 클래스에 포함되는 변수를 속성(attribute)이라고 부르며, 클래스에 포함되는 함수를 메소드(method)라고 한다.

• 클래스 : 자바에서 모든 코드는 반드시 클래스 안에 존재해야 하며
              서로 관련된 코드들을 그룹으로 나누어 별도의 클래스 구성
              클래스들이 모여 하나의 Java 애플리케이션 구성
• 매소드 : 클래스의 기능(동작)에 해당하는 구현 부분으로
               해당 메소드 호출 시 메소드의 블럭( { } )에 해당하는 부분 실행

public class 클래스명 {
	public void 메소드명() {
		// 실행될 문장
	}
}

③ while vs for

• for문을 사용하는 경우 → 반복횟수가 정해진 경우, 주로 배열과 함께 많이 사용
• while문을 사용하는 경우 → 무한루프나 특정 조건에 만족할 때까지 반복해야 하는 경우, 주로 파일을 읽고 쓰기에 많이 사용

//for문
let sum=0;
for(let i=0; i<10; i++){
  sum +=i;
}
console.log(sum);

//while문
let sum=0;
i=1;
while(i<=10){
  sum +=i;
  i++
}
console.log(sum);

일반적으로는 반복 횟수를 아는 경우 for, 모르는 경우 while을 쓰라고 말하는데, 반복 횟수를 아는 경우는 무조건 for을 쓰는 게 좋은가?

반드시 그렇지는 않다. 

1) for문의 구조를 보면 시작 조건을 입력할 때 반드시 변수를 초기화시킨다. 즉 for 문 안에서 변수의 초기화가 이루어지는 것이다. 따라서 루프를 시작하기 전에 이미 변수가 초기화되어있다면 while을 쓰는 것이 더 직관적이다. 반복 횟수가 정해져있다고 하더라도, 굳이 다시 초기화를 하면서 for문을 사용할 필요는 없다. 

2) 또, 가독성 측면에서 while문이 더 나은 측면도 있다. for (int i=0; i<num; i++) 보다는 while (i<num) 이 더 간단하고 직관적이다. 변수 이름이나 코드의 길이가 길어질수록 더욱 그렇다. 한 줄에 내용을 집약해서 넣느냐, 여러 줄에 나눠 넣느냐의 차이이다.

3) 이 외에도 무한 루프를 구현하고 싶은 경우 while (true) 로 쉽게 작성 가능하므로 while을 쓴다. 

다만 파이썬에서는 for문 더 편한 경우가 많다. 프로그래밍을 할 때는 다양한 곳에서 변수를 끌어오고 복잡한 요소를 고려하게 되기 때문에, 언제 써야할 지 명확하게 구분하려고 하고 정답을 정해놓는 것 보다는 둘 다 어떻게 쓰는지를 잘 알고 있고, 두 구문 간에 자유롭게 변환할 수 있도록 연습하는 것이 더 중요하다고 생각한다.

④ 증감연산자 (Increment and Decrement operators) 

++i (전위증가) : i의 값이 1 증가된 후 증가된 값을 리턴한다

let count = 1
const preIncrement = ++count
// 증감연산자를 앞에 놓게 되면 아래 주석으로 처리한 두 줄의 코드와 같은 내용입니다.
// 먼저 자기 자신에게 1을 더해서 재할당 한 후, 이를 preIncrement 에 할당했다는 의미입니다.
// count = count + 1
// const preIncrement = count
console.log(`count: ${count}, preIncrement: ${preIncrement}`) // count: 2, preIncrement: 2

vs

i++ (후위증가) : 먼저 해당 연산을 수행하고 나서, i 의 값을 1 증가시킴.

let count = 1
const postIncrement = count++
// 증감연산자를 뒤에 놓게 되면 아래 주석으로 처리한 두 줄의 코드와 같은 내용입니다.
// postIncrement에 자기 자신의 값을 먼저 할당하고, 이후에 1을 더해서 재할당합니다. 
// const postIncrement = count
// count = count + 1
console.log(`count: ${count}, postIncrement: ${postIncrement}`) // count: 2, postIncrement: 1

⑤ null vs undefinedundefined

• null은 텅텅 비어 있는 값을 의미
• undefined은 변수를 선언만 하고 값이 할당되어 있지 않은 것

let name1 = null
console.log(name) // null을 출력

let name2
console.log(name2) // undefined를 출력

⑥ 일치연산자 (Equality operators) == vs ===

• 자바스크립트에는 두 가지의 일치연산자가 있다.
•  === 는 엄밀한 (strict) 일치연산자여서 비교하는 두 값의 데이터타입과 값 자체가 정확히 일치해야만 true를 리턴
• 반면 == 는 비교하는 두 값의 데이터타입이 일치하지 않을 때 해당 값의 데이터타입을 자동으로 변환해주는 자바스크립트만의 특성이 있다.
• 이 특성이 자칫 개발자의 실수를 유발할 가능성이 크기 때문에 실무에서는 거의 쓰지 않고 있다. 

console.log(1 === "1") // false를 출력
console.log(1 == "1" // true를 출력

[출처]

https://velog.io/@bathingape/JavaScript-var-let-const-%EC%B0%A8%EC%9D%B4%EC%A0%90

https://velog.io/@letthere/2.-%ED%81%B4%EB%9E%98%EC%8A%A4class-%EB%A9%94%EC%86%8C%EB%93%9Cmethod

https://chloe-ki.tistory.com/entry/java-for-while-loop