시작하기전

JavaScript는 문법의 대부분을 Java, C, C++로부터 차용하고 있으며, Awk, Perl, Python의 영향도 받았다고 한다.

그리고 제목이 처음부터 다시 배우기지만 일일이 다 다시 적을수는 없으니, 이 글은 중요한 것만 다시 배우고 호이스팅이나 클로저 같은건 다음 글에서 적어보겠다.

주석

주석이란 해당 코드를 실행하지 않고 무시하라는 뜻으로 많이 쓰인다.

주석을 쓰는 이유는 여러가지가 있다.

• 혹시 몰라 코드를 남겨 놓을 때

• 다른 사람에게 코드를 넘거야 해서 코드에 설명을 적을 때

• 코드가 이해가 안되서 한글로 설명해 놓을 때

• 등등

JS에서 주석은 다른 언어와 똑같다.

// 한 줄 주석

/* 이건 더 긴,
 * 여러 줄 주석이다.
 */

/* 그러나, /* 중첩된 주석은 쓸 수 없다. */ SyntaxError */ 

변수

변수란 어떤 정보에 이름을 붙여서 사용하고 싶을 때 사용한다.

예시

name = "Yun"
age = 19

console.log(name, age);
// Yun 19

하지만 이렇게 변수를 사용하는건 상당히 위험하다. 왜나면 저 변수명이 유일하다는 보장이 없기 때문이다.

이를 방지하기 위해 JS는 3가지의 변수 선언 방법이 있다.

변수 선언 3가지 방법

var

(변수를 선언하고 추가로 동시에 값을 초기화한다.)

하지만 var로 변수를 선언하면 여러 문제가 많이 발생하기 때문에 웬만하면 잘 안 쓰인다. 이유는 아래 링크 참고
https://www.daleseo.com/js-var-issues/

let

(ES6에 추가 되었으며, 블록 범위 지역 변수를 선언하고 추가로 동시에 값을 초기화한다. )

const

(ES6에 추가 되었으며, 블록 범위 읽기 전용 상수를 선언한다)

const는 바뀌지 않는 상수 값을 변수로 선언할 때 자주 쓰이고 가급적 이 변수는 상수라는 걸 알리기 위해 대문자로 선언을 하는게 좋다.
예: 3.14, 최댓값, 생일 등

한줄 요약:
변하지 않는 값: const로 선언
변할 수 있는 값: let으로 선언

또 변수를 선언할 때 주의할 점이 몇가지 있다.

변수를 선언할 때 주의사항

1. 변수는 문자와 숫자, $와 _만 사용 가능
2. 첫글자는 숫자가 될수 없다.
3. 예약어는 사용할 수 없다.
4. 가급적 상수는 대문자로 선언
5. 변수명은 읽기 쉽고 이해할 수 있게 선언

자료형

문자열(String)

JS는 문자열(String)을 3가지 방식으로 작성할 수 있다.

예시

name1 = 'Yun'
name2 = "Yun"
name3 = `Yun`

이중 백틱(키보드 탭 위, 1의 왼쪽, '~'(물결표) 쯤에 있는 '와 비슷하게 생긴 문자_)은 ES6에 추가 되었고 Template literal이라고 부르며 문자열 내부에 변수를 표현할 때 쓰인다.

예시

// Template literal 사용
const name = "윤유빈";
const age = 19;
const school = "상일미디어고등학교";

console.log(`저의 이름은 ${name}이고 나이는 ${age}살 입니다. 학교는 ${school}를 다니고 있습니다.`);


// Template literal 미사용

const name = "윤유빈";
const age = 19;
const school = "상일미디어고등학교";

console.log('저의 이름은 ' + name + '이고 나이는 ' + age + '살 입니다. 학교는 ' + school + '를 다니고 있습니다.');

숫자형(Int)

숫자형(Int)은 별다른 방식 없이 숫자만 적으면 되며 사칙연산이 가능하다.

예시

// 선언 방법
const number1 = 1;
const PI = 3.14;

// 사칙연산
console.log(1 + 1) // 더하기
console.log(3 - 1) // 빼기
console.log(2 * 0) // 곱하기
console.log(6 / 3) // 나누기
console.log(6 % 4) // 나머지

// 숫자를 0으로 나누기
const x = 1/0; // Infinity(무한)

// 문자열 나누기 숫자
const name = 'Yun';
const y = name/3

console.log(y); // NaN(Not a Number)

불리언(Boolean)

불리언(boolean)은 논리적인 요소를 나타낸다.

예시

//선언 방법
const a = true; // 참
const b = false; // 거짓

// 간단한 예제
const name = 'Yun';
const age = 19;

console.log(name == 'Yun'); // true
console.log(age > 20); // false

null, undefined

null은 존재하지 않는 값을 의미하고, undefined는 값이 할당이 안되었다는 뜻이다.

예시

// null
let name = null 
console.log(name); // 존재하지 않는 값


// nudefined
let age;
console.log(age); // 값을 할당하지 않음 
 

이것말고도 심볼형, 객체형이 있지만, 나중에 다룰 예정

typeof 연산자

typeof는 변수의 자료형을 알 수 있다.

예시

const name = 'yun';

console.log(typeof 1); // number
console.log(typeof 'kim'); // string
console.log(typeof name); // string
console.log(typeof true); // boolean
console.log(typeof null); // object
console.log(typeof undefined); // nudefine

typeof는 다른 개발자가 작성한 변수의 타입을 알아야하거나, API 통신 같은 받아온 데이터를 타입에 따라 다른 방식으로 처리해야할 때 많이 사용한다.

또, console.log(typeof null);이 objcet(객체형)가 나온 이유는 이후 객체 설명 부분에서 더 자세히 알아보겠지만, 우선 짚고 넘어가자면 null은 object(객체형)가 아니다.
바로 자바스크립트 초기버전 오류이다.
하위 호환성을 유지하기 위해 수정을 하지는 않는다고 한다.

형변환 (Type Conversion)

형변환은 원하는 자료형으로 변환해주는 코드이다.

Number()

예시

// 흔히 발생하는 실수 1
console.log(100 + '300'); // 100300
console.log(100 + Number('300')); // 400

// 흔히 발생하는 실수 2
console.log((10 + '30') / 2); // 1030 / 2 = 315
console.log((10 + Number('30')) / 2); // 10 + 30 / 2 = 20

// NaN이 나오는 경우
console.log(Number('1234')); // 1234
console.log(Number('1234abcd')); // NaN

// true, false
console.log(Number(true)); // 1
console.log(Number(false)); // 0


// 주의사항 (따로 기억해야 될 것들)
// null, nudefined
console.log(Number(null)); // 0
console.log(Number(nudefined)); // NaN

// 0, '0'
console.log(Number(0)); // flase
console.log(Number('0')); // true

// '', ' '
console.log(Number('')); // false
console.log(Number(' ')); // true

만약 Numbedr() 괄호안에 숫자가 아닌 문자가 포함되면 NaN이 됨

String()

예시

console.log(String(3), String(true), String(false), String(null), String(undefined));
// "3" "true" "false" "null" "undefined"

Boolean()

예시

console.log(
    Boolean(0),
    Boolean(''),
    Boolean(""),
    Boolean(``),
    Boolean(null),
    Boolean(undefined),
    Boolean(NaN),
) // false

console.log(
    Boolean(1),
    Boolean('Yun'),
    Boolean(9876),
) //true

연산자 (Operators)

기본적인 연산자 종류

• + 더하기

• - 빼기

• * 곱하기

• / 나누기

• % 나머지

• ** 거듭제곱

• ++ 증가 연산자 (무조건 1 증가)

  예시

let sum = 1;
let result = ++sum
console.log(result); // 2

// 자주 겪는 실수
let sum = 1;
let result = sum++
console.log(result); // 1

• -- 감소 연산자 (무조건 1 감소)

  예시

let sum = 1;
let result = --sum
console.log(result); // 0

// 자주 겪는 실수
let sum = 1;
let result = sum--
console.log(result); // 1

연산자 우선순위

*, / > +, -

비교 연산자와 조건문 (if, else), 삼항연산자

if문을 배우기전 알아야 할 것 (비교 연산자)

• == 왼쪽 피연산자와 오른쪽 피연산자의 값이 같으면 참을 반환

• === 왼쪽 피연산자와 오른쪽 피연산자의 값이 같고, 같은 타입이면 참을 반환

• != 왼쪽 피연산자와 오른쪽 피연산자의 값이 같지 않으면 참을 반환

• !== 왼쪽 피연산자와 오른쪽 피연산자의 값이 같지 않거나, 타입이 다르면 참을 반환

• > 왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 크면 참을 반환

• >= 왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 크거나 같으면 참을 반환

• < 왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 작으면 참을 반환

• <= 왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 작거나 같으면 참을 반환

if문

if문은 괄호안에 들어가는 조건을 확인해 true면 실행시킨다.

예시

if(10 < 100){
  console.log('참');
}
// 만약 10이 100보다 크면 괄호안에 있는 코드를 실행시키고 만약 거짓이라면 다음 코드로 넘어간다.

else문

else는 if의 결과가 false일 때 실행된다.

예시

const number = 101

if(number < 100){
  console.log('참');
} else {
   console.log('거짓');
}
// 만약 number의 값이 100보다 크면 참이라는 로그를 띄우고, 그게 거짓이라면 거짓이라는 로그를 띄운다.

else if문

else if는 if문의 또다른 조건을 추가하고 싶을 때 쓰인다.

예시

const number = 101

if (number < 100) {
    console.log('참');
} else if (number === 101) {
    console.log('숫자가 101 입니다.')
} else {
    console.log('거짓');
} 
/* 
만약 number의 값이 100보다 크면 참이라는 로그를 띄우고, 
number의 값이 101이고, 같은 타입이면 '숫자가 101 입니다.' 라는 로그르 띄우고, 
그게 다 아니라면 거짓이라는 로그를 띄운다.
*/

삼항연산자

삼항연산자는 if문과 기능이 비슷하다. 하지만 if문은 여러 줄로 코드를 작성하는 반면, 삼항연산자는 한 줄로 끝낼 수 있고 if else문 없이 오직 if, else로만 이루어져 있다.

간단한 예시를 보고 넘어가겠다.
더 자세한건 https://dasima.xyz/javascript-ternary-operator/ 에 가면 더 자세히 배울 수 있다.

예시

// 문법: 조건 ? true면 실행 : false면 실행

const number1 = 101;
number1 < 100 ? console.log('참') : console.log('거짓'); // 거짓

const number2 = 99;
number2 < 100 ? console.log('참') : console.log('거짓'); // 참

논리 연산자

논리 연산자 종류

JS에는 세 종류의 논리 연산자가 있다.

1. OR (||)
2. AND (&&)
3. NOT (!)

OR (||)

여러개 중 하나라도 true면 true
즉, 모든값이 false 일때만 false 반환

예시

// true
const name = 'kim';
const age = 30;

if (name === 'yun' || age > 19) {
    console.log('참')
    // 만약 name이 yun 이거나(or) age가 19보다 많으면 참을 출력
} // name이 yun이 아니지만 age가 19가 넘기 때문에 참


// true
const name = 'yun';
const age = 18;

if (name === 'kim' || age > 19) {
    console.log('참')
    // 만약 name이 kim 이거나(or) age가 19보다 많으면 참 출력 
} // name도 kim이 아니고 age도 19보다 적기 떄문에 거짓

AND (&&)

모든값이 true면 true
즉, 하나로도 false면 false 반환

예시

// true
const name = 'yun';
const age = 18;

if (name === 'yun' && age > 17) {
    console.log('참') // name이 yun이고(and) age가 17보다 많으면 참 출력
} // name도 yun이고 age도 17보다 많기 때문에 참


// false
const name = 'yun';
const age = 18;

if (name === 'yun' && age > 19) {
    console.log('참') // name이 yun이고(and) age가 19보다 많으면 참 출력
} // name은 yun이지만 age가 19보다 적기 때문에 거짓

NOT (!)

true면 false로 반환
반대로 false면 true로 반환

예시

// ture
const age = 18;
const isAdult = age > 19;

if (!isAdult) {
    console.log('19세 미만') // 만약 age가 19보다 적으면 19세 미만 출력
} // age가 19보다 적기 때문에 isAdult는 false를 반환 하지만 NOT(!)을 사용해 true로 바꿔 19세 미만을 출력

// false
const age = 20;
const isAdult = age > 19;

if (!isAdult) {
    console.log('19세 미만') // 만약 age가 19보다 적으면 19세 미만 출력
} // age가 19보다 많기 때문에 isAdult는 true를 반환 하지만 NOT(!)을 사용해 flase로 바꿔 if문을 실행 안함

우선순위

예시

// true
const name = 'kim';
const gender = 'F'
const isAdult = true;

if (gender === 'M' && name === 'park' || isAdult) {
    console.log('참') // gender가 M이고, name은 park이거나 isAdult가 ture면 참 출력 
} // gender가 M도 아니고, name도 park가 아닌데 통과가 된 이유는 AND(&&)가 OR(||)보다 우선순위가 높기 때문이다.

// 해결법
if (gender === 'M' && (name === 'park' || isAdult)) {
    console.log('참') 
}

반복문 (for, while, do while)

반복문이란? 동일한 작업을 여러번 반복하는 것

for

가장 많이 사용하는 반복문이며, for문의 종류도 여러가지지만, 이 글에선 기본적인 방법만 설명하겠다. 사용 방법은 다음과 같다.

for (let i = 0; i < 10; i++) {
   //반복할 코드
}

for문은 ;으로 구분하며, 세부분으로 나눌 수 있다.

(let i = 0; i < 10; i++) 이 코드를 더 자세히 살펴보겠다.

• let i = 0; 첫번째 부분은 초기값을 설정하는 곳이다. 변수 i라는 변수를 만들고 0이라는 초기값을 넣은 것이다.

• i < 10; 두번째 부분은 조건을 적는 곳이다. 반복문이 돌면서 조건을 확인하고, false가 되면 멈춘다. 지금 저 코드는 i가 10보다 작으면 false를 반환하겠다는 뜻이다.

• i++ 세번째 부분은 반복문이 한번 실행되고 실행되는 작업이다. 지금 저 코드는 반복이 한번 끝날 때마다i에 1을 증가 시켜준다는 뜻이다

• (let i = 0; i < 10; i++) 전체적으로 코드를 한번 보면 i는 0이고, i가 10보다 작으므로 반복문 안에있는 코드를 실행시키고, 마지막으로 i의 값을 1증가 시켜준다. 계속 반복하다가 i가 10보다 커지면 반복문은 멈춘다.
  

예시

// 반복문을 통해 1부터 10까지 출력하는 경우
//예시 1
for (let i = 0; i < 10; i++) {
    console.log(i + 1); // 1 ~ 10
}

//예시 2
for (let i = 1; i < 11; i++) {
    console.log(i); // 1 ~ 10
}

//예시 2
for (let i = 1; i <= 10; i++) {
    console.log(i); // 1 ~ 10
}


// 일반적인  for문을 통해 배열 합 구하기
const list = [15, 21, 31, 34, 51];
let sum = 0;

for (let i = 0; i < list.length; i++) {
    sum += list[i];
};
console.log(sum)

while

사용법은 for문이랑 비슷하다.
while반복문은 다음과 같이 사용할 수 있다.

예시

let i = 0;
  
while(i < 10) {
  //반복할 코드
}

주의사항: while을 쓴다음 ()안에 조건을 입력하는데, (i < 10)이라는 코드는 i가 10이 될 때까지 반복하라는 의미인데 이 상태로 코드를 실행하면 무한루프가 되어버립니다.
해결하는 법은 반복할 코드 부분에 변수를 증가시키는 코드를 입력하면 된다. (예: i++;)

do while

do while문은 while문과 비슷하다.

예시

let i = 0;

do {
   // 반복할 코드
} while(i < 10)

while문과 비슷하지만 다른점은 바로 조건문을 아래에다 적는 것이다. 무슨 뜻 이냐면
적어도 한번은 실행을 시키고, 조건을 확인한다.

반복문 빠져나오기(break, continue)

break

break는 만나는 순간 코드를 바로 멈추고, 해당 반복문을 빠져나온다.

while(true){
   let answer = confirm('계속 할까요?');
   if(!answer) {
      break;
   }
} // while문의 조건이 true이기 때문에 무한반복 되지만, 만약 answer에 false값이 들어오면 break문을 통해 반복문을 멈추고, 빠져나오게 된다. 

continue

continue는 코드를 바로 멈추고, 반복문을 벗어나는게 아닌 다음 반복문으로 건너뛴다.

for(let i = 0; i < 10; i++ {
   if(i % 2) {
      continue;
   }
   console.log(i);
} // 변수 i를 0으로 선언하고 0을 2로 나누면 나머지가 0이기 때문에 continue문을 만나지 못하고 콘솔을 찍는다. 그 다음에 i가 1로 증가하고  1을 2로 나누면 나머지가 1이기 때문에 continue문을 만나게 되고, 콘솔을 안찍고 바로 다음으로 넘어가게 된다.

for문과 while문 어떤걸 써야할까?

사람마다 다르겠지만 명확한 횟수가 정해져 있으면for문을 쓰고, 횟수가 정해져있지 않다면 while문을 쓰고, do while문은 별로 사용하지 않는다고 한다.

switch문

switch문은 if else와 비슷하다. 모든 switch문은 if else로 작성할 수 있다. 그럼에도 쓰이는 이유는 case가 다양할 경우 보다 간결하게 쓸 수 있다는 장점 때문이다.

예시

let book = prompt('어떤 책을 사고 싶나요?');

switch (book) {
    case '점프 투 파이썬':
        console.log('1000원 입니다.');
        break;
    case '리액트를 다루는 기술':
        console.log('3000원 입니다');
        break;
    case 'nodeJS로 서버 만들기':
    case '언리얼 엔진4 게임 개발':
        console.log('2000원 입니다');
        break;   
    default:
        console.log('해당 책은 존재하지 않습니다.')
} 
// 유저의 값을 받아오는 과정에서 유저가 점프 투 파이썬을 입력하면 1000원 입니다를 출력하고, 
리액트를 다루는 기술을 입력하면 3000원을 출력한다. nodeJS로 서버 만들기와 언리얼 엔진4 게임 개발은 값이 똑같기 때문에 nodeJS로 서버 만들기를 입력해도 2000원이 뜨고 언리얼 엔진4 게임 개발을 입력해도 2000원을 출력하게 해놨다. 

• 주의사항 : case는 break를 만나기 전까지 코드를 다 실행하기 때문에 그걸 원하지 않는다면 case가 끝나면 break를 넣어주는게 좋다.
  

함수 (function)

웹 페이지를 만들다보면 같거나, 비슷한 동작이 생기기 마련이다. 그런 동작들을 자주 사용하거나, 여러 곳에서 사용하면 하나로 만들거나 재활용 하는게 중복되는 코드도 줄고, 유지보수도 편해지기 때문이다. 함수는 이것들을 가능하게 해준다.

함수 작성법

(1)function (2)원하는 함수 명((3)매개변수) {
   (4)// 함수가 호출 될 때 실행될 코드
}

• 1. function은 함수를 의미한다.
• 2. 함수의 이름을 입력하는 곳이며, 자기가 원하는 대로 적을 수 있다.
• 3. 매겨변수라고도 하고 인수라고도 불리기도 한다. 완전히 동일한 의미는 아니지만 지금은 구분할 필요가 없고, 매개변수는 없을수도 있고, 여러개가 있을수도 있는데 그땐 쉼표로 구분할 수 있다.
• 4. 중괄호 안에는 함수가 호출 될 때 실행하고 싶은 코드를 적는다.

예제

// 매개변수가 없는 함수
function sayHello() {
    console.log(`안녕, Yun`);
} 

sayHello() // sayHello라는 함수를 호출해 안녕, Yun이라는 로그 출력


// 매개변수가 있는 함수 (예시1)
function sayHello(name) {
    console.log(`안녕, ${name}`);
}

sayHello('yun');
sayHello('kim');
sayHello('park'); // sayHello라는 함수에 yun, kim, park을 매개변수에 넣어서 재활용 하여 로그에 한줄씩 출력


// 매개변수가 있는 함수 (예시2 ~ 5)
// 만약 회원가입 기능을 만들려는데, 로그인을 하지 않아서 사용자에 이름을 모른다면 을 가정한 코드이다. 코드마다 약간씩 다르다. 
function sayHello(name) {
    let msg = '안녕하세요, ';
    if (name) {
        msg += name;
    }
    console.log(msg)
}

sayHello()
sayHello('yun') 
// msg라는 변수를 let으로 선언하고, 만약 name(매개변수)가 들어가 있으면(true), msg라는 변수에 name(매개변수)을 넣어, 안녕하세요, name(매개변수)가 뜨게 하고, name(매개변수)이 안 들어가 있으면 그냥 안녕하세요만 출력 


// 매개변수가 여러개 있는 함수 (예시3)
function sayHello(name, nickName) {
    let msg = `안녕하세요, `;
    if (name, nickName) {
        msg += `이름: ${name}, 닉네임: ${nickName}님`
    };
    console.log(msg)
}

sayHello('yun', 'yubiny');


// 매개변수가 여러개 있는 함수 (예시4)
// OR게이트 사용
function sayHello(name, nickName) {
    let newName = name || '(이름이 없습니다.)';
    let newNickName = nickName || '(닉네임이 없습니다)';

    let msg = `반갑습니다, 이름: ${newName}님, 닉네임: ${newNickName}님 환영합니다.`;

    console.log(msg);
}

sayHello('yun', 'yubiny');
sayHello()


// 매개변수가 여러개 있는 함수 (예시5)
// 매개변수에 default value 설정
function sayHello(name = '(이름이 없습니다.)', nickName = '(이름이 없습니다.)') {
    let msg = `반갑습니다, 이름: ${name}님, 닉네임: ${nickName}님 환영합니다.`;
    console.log(msg);
}

sayHello('yun', 'yubiny');
sayHello()

전역변수와 지역변수

• 주의사항: 예시에 msg라는 변수는 함수 밖에서는 사용할 수 없다. 즉 함수 내부에서만 사용할 수 있는 함수를 지역변수라고 한다. 만약 msg라는 변수를 함수 외부에서 사용하고 싶다면 변수를 함수 밖으로 빼주면 된다.

  예시

let msg = `안녕하세요, `;

function sayHello(name, nickName) {
    if (name, nickName) {
        msg += `이름: ${name}, 닉네임: ${nickName}님`
    };
    console.log(msg)
}

sayHello('yun', 'yubiny');

• 이렇게 어디서나 사용할 수 있는 변수를 전역변수라고 하며, 반대로 함수 내부에서만 사용할 수 있는 변수는 지역변수라고 한다.
  또한, 한번 let으로 선언한 변수는 다시 let을 이용해서 사용할 수 없다고 했지만, 전역변수와 지역변수로 구분이 되어있을 때는, let으로 동일한 이름으로 변수를 선언할 수 있고, 서로 간섭을 받지 않는다.

return으로 값 반환

어떤 값을 반환하고 싶을 때는 return을 사용하면 된다.

예시

function add(num1, num2) {
    return num1 + num2;
}

const sum = add(5, 10);
console.log(sum)

* 주의사항: return문이 있으면 그 즉시 return오른쪽에 있는 값을 반환하고, 함수를 종료시킨다.

객체 (object)

만약 이름이 user1이 있다고 하고, 그의 name은 yun이고, age는 19라고 했을때 객체형으로 쓰는 방법은 다음과 같다.

const user1 = {
  name: 'yun',
  age: 19,
}

객체는 중괄호로 구성하고, 키(name, age)와 값('yun', 19)으로 구성된 프로퍼티가 들어가며, 각 프로퍼티는 쉼표로 구분한다.

객체 접근, 추가, 삭제

객체를 접근할려면 온점을 사용하거나, 대괄호로 사용할 수 있다.
대괄호로 사용할 때는 ''을 붙여줘야 된다.

예시

const user1 = {
    name: 'yun',
    age: 19,
}

user1.name; // yun
user1.['age'];  // 19

추가또한 온점을 사용하거나, 대괄호로 사용할 수 있다.

예시

const user1 = {
    name: 'yun',
    age: 19,
}

user1.gender = 'm'; // m
user1['heirColor'] = 'black'; // black

삭제는 delete 키워드를 사용하면 된다

const user1 = {
    name: 'yun',
    age: 19,
}

delete user1.name;
delete user1.age;

객체 단축 프로퍼티

예시

// 단축 전
const name = 'yun'
const age = 19

const user1 = {
    name: name, // yun
    age: age, // 19
}

// 단축 후
const name = 'yun'
const age = 19

const user1 = {
    name, // name: name => yun
     age, // age: age => 19
}

객체 - method, this

method란 객체 프로퍼티로 할당 된 함수를 method라고 한다.

예시

const yunyubin = {
    nickName: 'yun',
    age: 19,
    
    showNickName: function () {
        console.log(yunyubin.nickName) 
    } // method
}

yunyubin.showNickName() // yun

하지만 아까 예시에서 봤던 코드는 오류를 유발할 수도 있다 아래 코드를 다시 봐보자.

const yunyubin = {
    nickName: 'yun',
    age: 19,
    
    showNickName: function () {
        console.log(yunyubin.nickName) 
    } // method
}

yunyubin.showNickName() // yun

showNickName이라는 method를 만들고, 저 method를 실행하면 yunyubin.nickName에 있는 프로퍼티 값을 받아오겠다는 뜻인데 저렇게 적으면 오류가 발생할 수도 있다.
이럴때는 this.nickName라고 바꿔주면 된다.

this를 간단히 설명 하자면, this는 호출한 함수를 가리킨다 라는 식으로 나는 이해했다.

this에 대해 더 자세한 설명은 다음 글에서 다루도록 하겠다.

배열 (Array)

배열(Array)이란 쉽게말해 순서가 있는 리스트 라고 생각하면 된다. 아래는 배열 사용법이다.

예시

let name = ['유빈', '채영', '지민', '수민']

name이란 배열을 선언해주고, 대괄호 안에 이름들을 쉼표로 구분해 적어주었다.

* 주의사항: 배열을 탐색할 때는 고유번호를 사용한다. 이를 index라고 하는데 index는 0부터 시작한다.

배열을 읽는법과 수정하는 법은 다음과 같다

예시

let name = ['유빈', '채영', '지민', '수민']

// 읽는법
console.log(name[0]) // 유빈
console.log(name[1]) // 채영
console.log(name[3]) // 수민

// 수정법
name[0] = '서준';
console.log(name[0]) // 서준

배열의 특징

배열은 문자 뿐만 아니라, 숫자, 객체, 함수 등도 포함할 수 있다.

예시

let arr = [
    3, // 숫자

    '배열', // 문자

    true, // 불린

    function () {
        console.log('함수')
    }, // 함수

    {
        name: '객체'
    }, //객체
]

length라는 함수는 배열의 길이를 확인할때 쓴다.

예시

let arr = [1, 2, 3, 4, 5, 6, 7, 8];

console.log(arr.length) // 8

배열은 몇가지 method를 가지고 있다.

몇가지 간단한 예제를 보겠다.

예시

1. push(): 배열 끝에 요소 추가

// 끝에 한개만 추가
let arr = [1, 2, 3];
arr.push('4번째 배열')
console.log(arr[3]) // 4번째 배열

// 끝에 여러개 추가
let arr = [1, 2, 3];
arr.push('4번째 배열', '5번째 배열', 6)
console.log(arr[3]) // 4번째 배열
console.log(arr[4]) // 5번째 배열
console.log(arr[5]) // 6

2. pop(): 배열 끝 요소 제거

let arr = [1, 2, 3];
arr.pop()
console.log(arr) // 1, 2  

3. unshift(): 배열 앞 요소 추가

// 앞에 한개만 추가
let arr = [1, 2, 3];
arr.unshift('1 앞에 배열 생성')
console.log(arr) //   

// 앞에 여러개 추가
let arr = [1, 2, 3];
arr.unshift('1 앞에 배열 생성', '생성된 배열 바로 앞에 생성', 100)
console.log(arr[0]) // 1 앞에 배열 생성
console.log(arr[1]) // 생성된 배열 바로 앞에 생성
console.log(arr[2]) // 100

4. shift(): 배열 앞 요소 제거

let arr = [1, 2, 3];
arr.shift()
console.log(arr) // 2, 3   

배열은 쓰는 이유중 가장 큰 이유는 for문을 사용할 수 있기 때문이다.

예시

// for문 사용
let arr = [1, 2, 3];

for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]) // 1, 2, 3
}


// for of문 사용
let arr = [1, 2, 3];

for (const i of arr) {
    console.log(i) // 1, 2, 3
}

느낀점

프론트엔드가 꿈이라 HTML, CSS, JS를 번걸아 가면서 배우다보니, HTML, CSS에 비해 JS가 정말 많이 부족했는데, 이런 글을 쓰고나니까 웬지 JS에 자신이 붙었다.

물론 아직 기본 개념만 배운거라 '저런거 가지고 자신이 붙나?' 라고 생각할 수도 있지만, 나한테는 정말 많은걸 배우고, 다시 복습하는 시간이 되어서 정말 뿌듯했다.

나중에 DOM조작이나 ES6, 호이스팅, 클로저 같은 어려운 것들이나, 새로 추가된 것을 더 공부를 해서 꾸준히 발전하는 개발자가 되야겠다고 다시 다짐했다.

어려웠던 점

중간에 논리 연산자가 나오는 부분에서 많이 햇갈렸지만, 여러 블로그 글과, 다른 유튜브 영상을 보면서 다시 한번 개념을 잡고, 직접 활용도 해보니 이해가 되었고,

this 부분에서도 막혔지만, this에 개념을 입맛에 맞게 쉽게 생각을 하면서 개념을 다시 잡으니, 잘 이해가 된거같았다.

참고 동영상

• https://youtu.be/KF6t61yuPCY, http://www.tcpschool.com/javascript/js_operator_comparison