1. 코드 작성 규칙

---

1) 세미콜론

• 여러줄의 코드를 작성한다면 세미콜론으로 그 다음 명령코드와 구분해야한다.

2) 주석

• 다른 사람이 작성한 코드를 볼 때 이해하기 어려운 경우가 많다. 이럴 때 사람만 알아볼 수 있도록 설명을 작성한 부분을 주석이라고 한다.
  • 한줄 주석 : // 설명
  • 여러 줄 주석 : /* 설명 */

3) 들여쓰기

• 2칸, 4칸, 탭으로 자유롭게 지정해도 되며, 코드의 가독성을 향상시켜준다.

2. 자료형

---

1) 문자열

• 프로그래밍에서 하나의 글자를 문자라고 하는데, 문자들이 하나 이상 나열되어 있다고 해서 문자열이라고 한다.
• 문자열은 작은따옴표, 큰따옴표 둘 다 사용가능하다. 다만, 시작과 끝이 서로 같아야한다.
• 현재 문자열의 타입이 정말 문자열이 맞는지 확인하려면 typeof 연산자를 사용하면 된다.

  문자열 안에서 문자열 사용하기

  1. 다른 종류의 따옴표로 감싸준다.
     "문자열 안에 작은따옴표가(') 있다네"
  2. 이스케이핑 : 문자열 내부에 \'이나 \"로 사용하면 된다.

• \n을 사용하면 문자열을 여러줄로 나타낼 수 있다.
• 템플릿 리터럴(`)으로도 문자열을 표현할 수 있다. \n을 사용하지 않아도 줄바꿈이 된다.
• 두 개의 문자열 사이에 +연산자를 두면 양쪽의 문자열이 하나로 합쳐진다.

2) 숫자

• 매우 큰 숫자나 소수점 아래 자릿수가 많을 때 e를 사용하는 지수표기법을 사용할 수 있다.
• parseInt로 문자열을 숫자로, parsefFloat로 문자열을 실수로 변환할 수 있다.
• parseInt(숫자, 진법)으로 10진법이 아닌 다른 진법으로 숫자를 변환할 수 있다.
• NaN : not a number이라는 말로, 타입은 숫자이다.
• Infinity: 숫자를 0으로 나누면 무한이라는 의미의 Infinity가 출력된다. 음수를 0으로 나누면 -Infinity로 출력된다.
• Infinity - Infinity, 0 / 0은 NaN으로 출력된다.
• 문자열 + 숫자 = 문자열, 문자열 - 숫자 = 숫자형으로 출력된다.
• 부동소수점 문제 : 0.3 - 0.1을 계산하면 정확하게 0.2라는 숫자가 출력되지 않는다. 해결하려면 실수를 정수로 바꿔서 계산한 후 다시 실수로 바꾸면 된다.

3) 불값

• true나 false를 나타내는 자료형이다.
• 비교 연산자의 결과값으로 불 값이 나온다.
• NaN == NaN의 결괏값은 false이다.
• true를 숫자로 변환하면 1이고, false를 숫자로 변환하면 0이다. 따라서 true > false의 결괏값은 true이다.
• 문자의 번호는 charCodeAt을 사용한다.
  'a'.charCodeAt(); //97
• 문자열과 숫자를 비교하면 빼기 연산자와 마찬가지로 숫자고 형 변환된 후 비교한다. 불값도 마찬가지이다.
• == vs === : ==는 자료형이 다르면 같아지도록 형 변환한 후 비교하지만, ===는 자료형이 같은지까지 비교한다.

  논리연산자

  • &&는 그리고, ||는 또는 역할을 한다.
  • !는 참을 거짓으로, 거짓을 참으로 만든다. !을 연달아 두번 사용하면 다른 자료형을 불값으로 형 변환할 수 있다.
  • false, ''(빈문자열), 0, NaN, undefined, null, document.all을 제외한 값들은 모두 true이다.

4) 빈 값 사용하기

• undefined, null이 사용된다.
• undefined는 보통 반환할 결괏값이 없을 때 출력된다.
• undefined (or null) == false의 결괏값은 false이다. 0, ''와 비교해도 마찬가지이다.
• null은 빈값을 의미하지만 undefined와 같지는 않다.
• undefined == null의 결괏값은 true, undefined === null의 결괏값은 false이다.
• typeof null의 결괏값은 object이다. 따라서 어떤 값이 null인지 확인하기 위해서는 ===null을 사용해야한다.

3. 변수

---

1) let

• let으로 변수를 선언하면 대입연산자를 사용하여 변수의 값을 바꿀 수 있다.
• 값을 비우려면 undefined나 null을 대입하면 된다. 이때, null을 대입해 값을 의도적으로 지웠다는 의미를 부여할 수 있다.

2) const

• const로 선언하면 숫자, 문자열, 불값의 값을 변화시킬 수 없다. 객체의 경우는 객체 내부요소 변화는 가능하다.
• 선언 시 초기화를 하지 않으면 에러가 뜬다.

3) var

• 요새는 잘 사용하지 않는 추세이다.
• var로 변수를 선언하면 변수문이라고 한다.
• let과 마찬가지로 선언할 때 초기화하지 않으면 undefined가 대입된다.
• 기존에 선언했던 변수를 다시 선언해도 에러가 발생하지 않는다
• 예약어를 변수 이름으로 사용할 수 도 있다.

4. 조건문

---

1) if문

• 형식

if (조건문) {
  실행문;
else if(조건문) {
  실행문;
else {
  실행문;
}

• else는 조건이 여러개일 때 추가하여 여러 조건을 고려할 수 있다. else는 생략 가능하다.
• 조건문이 참이면 실행되고 거짓이면 다음 조건문의 참, 거짓 여부를 판단하며, 모두 거짓일 경우 else문이 실행된다.
• if문 안에 if문을 넣을 수 있지만, 코드의 가독성이 떨어지기 때문에 되도록 풀어쓰는 것을 권장한다.

2) switch문

• 형식

switch(조건식) {
  case 비교 조건식:
    실행문;
  case 비교조건식:
    실행문;
  default:
    실행문;
}

• switch 옆의 조건식과 case의 비교 조건식이 서로 같은지(===) 판단하고 참일 경우 해당 case의 실행문 실행, 아닐경우 다음 case로 넘어간다. 모두 거짓일 경우 default문이 실행된다.
• 특정 case문만 실행하고 싶다면 그 case 내부에 break를 넣어주면 된다.

3) 조건부 연산자 or 삼항 연산자

• 형식

조건식 ? 참일 때 실행되는 식 : 거짓일 때 실행되는 식

• 참일 때 / 거짓일 때 실행되는 식에 조건부 연산자를 중첩으로 사용할 수 있다.

5. 반복문

---

1) while문

• 형식

while(조건식1) {
  if (조건식2) {
    break;
  }
  if (조건식3) {
    continue;
  }
  실행문;
}

• while의 조건식 1이 true일 경우 실행문이 실행된다. 조건식이 계속 true라면 실행문은 무한 반복된다.
• 무한 반복을 막으려면 조건식 1에 일정횟수 이상이 되면 거짓이 되게 하거나 if문에 break를 넣어 조건식 2이 true가 되면 멈추게 할 수 있다.
• 조건식 3이 true일 경우 while의 실행문은 실행되지 않고 다시 조건식 1의 참 거짓여부를 판단한다.

2) for문

• 형식

for (시작; 조건식; 종료식;) {
  실행문;
}
// 아래와 같이 사용할 수 있다.
for (let i = 0; i < 100; i++) {
  console.log('hello');
}

• for문이 실행되면 시작부분이 먼저 실행되고 조건식, 실행문, 종료식에 도달한 후 조건식, 실행문, 종료식이 반복된다.

6. 객체

---

• 객체의 종류는 크게 배열, 함수, 배열이나 함수가 아닌 객체로 이루어져 있다.

1) 배열

• 형식

const 변수명 = ['요소', '요소', 요소, 요소];

// 요소 호출 방법
변수명[요소인덱스];

• 배열을 만들려면 대괄호로 값을 감싸면 된다. 값은 쉽표로 구분한다.
• 요소는 문자열, 다른 배열 등 다양한 자료형을 넣을 수 있다. 요소들 간에 자료형이 달라도 된다.
• 첫번째 요소의 인덱스는 0이고 마지막 요소의 인덱스는 (변수명.length - 1)이다.
• .length는 배열 요소의 개수를 구할 수 있다.

(1) 배열에 요소 추가

• 원하는 배열의 인덱스에 값을 대입하면 된다.

const target = [1, 2, 3, 4, 5];
target[5] = 6;
// target = [1, 2, 3, 4, 5, 6]

• 배열의 맨 앞에 값을 추가하려면 unshift를 사용하면 된다.
• push를 사용하면 맨 뒤에 값이 추가된다.
• const로 선언하면 배열을 통째로 바꿀 수는 없지만, 요소들은 변경 가능하다.

(2) 배열 요소 수정

• 추가할 때처럼 원하는 인덱스에 값을 대입하면 된다.

(3) 배열에서 요소 제거

• pop을 사용하면 마지막 요소를 제거할 수 있다.
• 배열의 첫번째 요소를 제거하려면 unshift를 사용하면 된다.
• 배열의 중간 요소를 제거하려면 splice를 사용하면 된다.

const target = ['a', 'b', 'c', 'd', 'e'];
target.splice(1, 2); // target.splice(시작 인덱스, 제거할 요소,  추가할 값)
// target = ['a', 'd', 'e']
target.splice(0, 0, 'j', 'k');
// target = ['j', 'k', 'd', 'e']

(4) 배열에서 요소 찾기

• 단순하게 배열에 특정요소가 존재하는지만 확인하려면 includes를 사용하면 된다.
• 검색하고 싶은 값의 인덱스를 알고싶다면 indexOf 나 lastIndexOf를 사용하면 된다. lastIndexOf는 뒤에서부터 인덱스 카운팅을 한다.

2) 함수

• 프로그래밍에서 함수란 특정한 작업을 수행하는 코드를 의미한다.
• 함수 선언 방법

function a() {} // 함수 선언문
const b = function() {}; // 함수 표현식
const c = () => {};

• 재사용성이 높아진다.
• 함수를 호출하면 항상 결괏값이 반환된다. 기본값은 undefined이며, return 반환하려는 값; 형태로 결괏값을 지정할 수 있다.
• 또한 return은 함수의 실행을 중간에 멈추는 역할을 한다.

(1) 매개변수와 인자

function a(x, y) {
  console.log(x, y);
  console.log(parameter);
}
a(1, 2) // 1,2 두번 출력

• x, y를 매개변수(parameter)라고 하고, 1, 2를 인수(argument)라고 한다.
• 매개변수와 인수의 개수는 서로 달라도 된다.
• 화살표 함수에서는 argument를 사용할 수 없다.

(2) 객체 리터럴

• 이름, 나이, 성별 등의 정보를 사람이라는 객체에 묶어 저장하면 가독성이 높아진다.
• 형식

const 객체 = {
  속성1이름: 속성1값, // 프로퍼티
  속성2이름: function(value) { // 메소드
    실행문;
  },
}

• 프로퍼티 접근방법 : 변수.속성명 또는 변수['속성명']
• 변수.속성 = 값;을 하면 속성값이 바뀐다.
• delete 변수.속성;을 하면 해당 속성 값이 undefined가 된다.
• 메소드 접근방법 : 변수.메소드명(인자);

(3) 객체간 비교

• {} === {}의 결괏값은 false이다.
• 객체는 모양이 같아도 생성할때마다 새로운 객체가 생성되기 때문이다. 따라서 기존 객체를 변수에 저장해놓고 변수간에 비교를 해야한다.

(4) 참조와 복사

• 참조 : 변수 b에 a를 대입한 후 a 변수의 속성값을 변경하면 b 변수도 같이 변경된다. 객체 간에 참조관계에 있기 때문이다.

const a = {name: 'JunYoung'}
const b = a;
a.name = 'me';
// b.name = 'me'가 된다.

• 복사 : 객체가 아닌 값을 변수에 저장하면 이러한 상황이 발생하지 않는다. 이를 복사라고한다.