javascript 기초 문법

자바스크립트란?

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

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