[JavaScript] 자바스크립트 입문

🐳벨로퍼트와 함께하는 모던 자바스크립트를 보면서 정리한 글 입니다 🐳

1. Hello JavaScript

• 크롬 개발자 도구에서 Console탭을 열고 코드 입력하기

1) Hello JavaScript 출력하기

console.log('Hello JavaScript!');
- 결과값 : Hello JavaScript!
 

2) 연산

console.log(1 + 2 + 3 + 4);
- 결과값 : 10

2. 변수와 상수

1) 변수

• 변수는 바뀔 수 있는 값
• 변수 선언 할 때에는 let 키워드 사용

let value = 1;
console.log(value);

• 결과값 : 1
   

let value = 1;
console.log(value);
value = 2;
console.log(value);

• 결과값
  1
2
   

2) 상수

• 상수의 값은 한번 선언한 뒤 바뀌지 않음.
• 상수를 선언 할 때에는 const 사용

const a = 1;

3) var

• 변수를 선언하는 또 다른 방법
• 똑같은 이름으로 여러번 선언 가능
   

4) 데이터 타입

숫자(Number) : 바로 값 대입 가능

let value = 1;

문자열(String) : 작은 따옴표 혹은 큰 따옴표로 감싸서 선언

let text = 'hello';
let name = '자바스크립트';

참/거짓 (Boolean) : 참은 true, 거짓은 false

let value = 1;

null : 값이 없을때

const friend = null;

undefined : 아직 값이 설정되지 않은 것을 의미

let criminal;
console.log(criminal);

3. 연산자

1) 산술 연산자

• 산술 연산자는 사칙연산과 같은 작업을 하는 연산자를 의미합니다.
  +: 덧셈
-: 뺼셈
*: 곱셈
/: 나눗셈
   

2) 대입 연산자

• 대입 연산자는 특정 값에 연산을 한 값을 바로 설정 할 때 사용 할 수 있는 연산자

let a = 1;
a += 3;
a -= 3;
a *= 3;
a /= 3;
console.log(a);

• 결과값 : 1
   

3) 논리 연산자

• 불리언 타입 (true 혹은 false)를 위한 연산자
  !: NOT
&&: AND
||: OR
   

4) 연산 순서

• NOT -> AND -> OR
   

5) 비교 연산자

• 두 값을 비교 할 때 사용

두 값이 일치하는지 확인

'=' 문자 3개 사용

• 일치한다면, true, 일치하지 않는다면 false 가 나타납니다. (타입 검사까지)

const a = 1;
const b = 1;
const equals = a === b;
console.log(equals);

• 결과값 : true
   

'=' 문자 2개 사용

• 일치한다면, true, 일치하지 않는다면 false 가 나타납니다.(타입 검사 X)

const a = 1;
const b = 1;
const equals = a == b;
console.log(equals);

결과: true
 

ex1) 숫자 1과 문자 '1'이 동일한 값으로 간주

const a = 1;
const b = '1';
const equals = a == b;
console.log(equals);

결과: true
 

ex2) 0 과 false 도 같은 값으로 간주

const a = 0;
const b = false;
const equals = a == b;
console.log(equals);

결과: true
 

ex3) undefined 와 null 도 같은 값으로 간주.

const a = null;
const b = undefined;
const equals = a == b;
console.log(equals);

결과: true
 

두 값이 일치하지 않는지 확인

두 값이 일치하지 않는지 확인 할 때에는 !== 를 사용

const value = 'a' !== 'b';

결과: true
 

!= 를 사용하면 타입 검사 X

console.log(1 != '1');
console.log(1 !== '1');

결과: true
 

크고 작음

두 값 비교

const a = 10;
const b = 15;
const c = 15;

console.log(a < b); // true
console.log(b > a); // true
console.log(b >= c); // true
console.log(a <= c); // true
console.log(b < c); // false;

6) 문자열 붙이기

+ 를 사용하여 문자열 붙이기

const a = '안녕';
const b = '하세요';
console.log(a + b);

결과: 안녕하세요
 

4. 조건문

1) if 문

if (조건) {
  코드;
}

let 과 const 는 다른 블록 범위에서는 똑같은 이름으로 선언 할 수 있다.

const a = 1;
if (true) {
  const a = 2;
  console.log('if문 안의 a 값은 ' + a);
}
console.log('if문 밖의 a 값은 ' + a);

• 결과

"if문의 안의 a 값은 2"
"if문 밖의 a 값은 1"

2) switch/case 문

const device = 'iphone';

switch (device) {
  case 'iphone':
    console.log('아이폰!');
    break;
  case 'ipad':
    console.log('아이패드!');
    break;
  case 'galaxy note':
    console.log('갤럭시 노트!');
    break;
  default:
    console.log('모르겠네요..');
}

5. 함수

1) 함수

function 함수이름(매개변수) {
    코드
    return 원하는 값;
}

2) 화살표 함수

const 함수이름 = (매개변수) => {
    코드
    return 원하는 값;
}

• function 키워드 대신에 => 문자를 사용해서 함수를 구현, 화살표의 좌측에는 함수의 파라미터, 화살표의 우측에는 코드 블록이 온다.

화살표 함수와 일반 function 으로 만든 함수와의 주요 차이점은 화살표 함수에서 가르키는 this 와 function 에서 가르키는 this 가 서로 다르다.

6. 객체

• 변수 혹은 상수를 사용하게될때 하나의 이름에 여러 종류의 값을 넣을 수 있게 해준다.
   

1) 객체

• 객체를 선언 할 때에는 이렇게 { } 문자 안에 원하는 값들을 넣고, 내용은 키: 원하는값의 형태로 넣어야 한다.
• 키는 공백이 없어야하며, 있어야한다면 따옴표로 감싸기

const sample = {
  'key with space': true
};

2) 함수에서 객체를 파라미터로 받기

const ironMan = {
  name: '토니 스타크',
  actor: '로버트 다우니 주니어',
  alias: '아이언맨'
};

const captainAmerica = {
  name: '스티븐 로저스',
  actor: '크리스 에반스',
  alias: '캡틴 아메리카'
};

function print(hero) {
  const text = `{hero.alias}({hero.name}) 역할을 맡은 배우는 ${
    hero.actor
  } 입니다.`;
  console.log(text);
}

print(ironMan);
print(captainAmerica);

3) 객체 비구조화 할당

const ironMan = {
  name: '토니 스타크',
  actor: '로버트 다우니 주니어',
  alias: '아이언맨'
};

const captainAmerica = {
  name: '스티븐 로저스',
  actor: '크리스 에반스',
  alias: '캡틴 아메리카'
};

function print({ alias, name, actor }) {
  const text = `{alias}({name}) 역할을 맡은 배우는 ${actor} 입니다.`;
  console.log(text);
}

print(ironMan);
print(captainAmerica);

4) 객체 안에 함수 넣기

• 함수가 객체안에 들어가게 되면, this 는 자신이 속해있는 객체를 가르킨다.
• 객체 안에 함수를 넣을 때, 화살표 함수로 선언한다면 제대로 작동하지 않는다.

const dog = {
  name: '멍멍이',
  sound: '멍멍!',
  say: function() {
    console.log(this.sound);
  }
};

dog.say();

5) Getter 함수와 Setter 함수

• Getter 함수와 Setter 함수를 사용하게 되면 특정 값을 바꾸려고 하거나, 특정 값을 조회하려고 할 때 우리가 원하는 코드를 실행 시킬 수 있다.

onst numbers = {
  _a: 1,
  _b: 2,
  sum: 3,
  calculate() {
    console.log('calculate');
    this.sum = this._a + this._b;
  },
  get a() {
    return this._a;
  },
  get b() {
    return this._b;
  },
  set a(value) {
    console.log('a가 바뀝니다.');
    this._a = value;
    this.calculate();
  },
  set b(value) {
    console.log('b가 바뀝니다.');
    this._b = value;
    this.calculate();
  }
};

console.log(numbers.sum);
numbers.a = 5;
numbers.b = 7;
numbers.a = 9;
console.log(numbers.sum);
console.log(numbers.sum);
console.log(numbers.sum);

• 결과

3
a가 바뀝니다.
calculate
b가 바뀝니다.
calculate
a가 바뀝니다.
calculate
16
16
16

• Setter 함수를 설정 할 때에는 함수의 앞부분에 set 키워드를 붙인다. Setter 함수를 설정하고 나면, numbers.a = 5 이렇게 값을 설정했을 때 5 를 함수의 파라미터로 받아오게 된다. 위 코드에서는 객체 안에 _a, _b 라는 숫자를 선언해주고, 이 값들을 위한 Getter 와 Setter 함수를 설정했다.
   

7. 배열

• 배열은 여러개의 항목들이 들어있는 리스트
• 배열을 선언 할 때에는 [ ] 사용.
   

1) 객체 배열 선언

const objects = [{ name: '멍멍이' }, { name: '야옹이' }];

console.log(objects);
console.log(objects[0]);
console.log(objects[1]);

• 결과
  
   

2) 배열에 새 항목 추가하기

const objects = [{ name: '멍멍이' }, { name: '야옹이' }];

objects.push({
  name: '멍뭉이'
});

console.log(objects);

• 결과
  
   

3) 배열의 크기 알아내기

• length 값을 확인

const objects = [{ name: '멍멍이' }, { name: '야옹이' }];

console.log(objects.length);

objects.push({
  name: '멍뭉이'
});

console.log(objects.length);

• 결과

2
3

8. 반복문

1) for

for (초기 구문; 조건 구문; 변화 구문;) {
  코드
}

2) while

while (조건 구문) {
  코드
}

3) for...of

• for...of문은 배열에 관한 반복문을 돌리기 위해서 만들어진 반복문

let numbers = [10, 20, 30, 40, 50];
for (let number of numbers) {
  console.log(number);
}

4) 객체를 위한 반복문 for...in

• 객체의 정보를 배열 형태로 받아올 수있는 함수

Object.entries: [[키, 값], [키, 값]] 형태의 배열로 변환
Object.keys: [키, 키, 키] 형태의 배열로 변환
Object.values: [값, 값, 값] 형태의 배열로 변환

객체가 지니고 있는 값에 대하여 반복을 하고 싶다면 위 함수들을 사용 또는 for...in 구문을 사용

const doggy = {
  name: '멍멍이',
  sound: '멍멍',
  age: 2
};

for (let key in doggy) {
  console.log(`{key}:{doggy[key]}`);
}

5) 연습문제

• 숫자로 이루어진 배열이 주어졌을 때, 해당 숫자 배열안에 들어있는 숫자 중 3보다 큰 숫자로만 이루어진 배열을 새로 만들어서 반환해보세요.

function biggerThanThree(numbers) {
  const N = [];
  for(let i = 0; i <= numbers.length; i++){
    if (numbers[i] > 3) N.push(numbers[i]);
  }
  return N;
}

const numbers = [1, 2, 3, 4, 5, 6, 7];
console.log(biggerThanThree(numbers)); // 결과 값 [4, 5, 6, 7]

9. 배열 내장함수

1) forEach

function biggerThanThree(numbers) {
  const N = [];
  for(let i = 0; i <= numbers.length; i++){
    if (numbers[i] > 3) N.push(numbers[i]);
  }
  return N;
}

const numbers = [1, 2, 3, 4, 5, 6, 7];
console.log(biggerThanThree(numbers)); // 결과 값 [4, 5, 6, 7]

⬇ forEach를 사용하면

function biggerThanThree(numbers) {
  const N = [];
  numbers.forEach ( n => {
    if(n > 3) N.push(n);
  });
  return N;
}

const numbers = [1, 2, 3, 4, 5, 6, 7];
console.log(biggerThanThree(numbers)); // 결과 값 [4, 5, 6, 7]

• forEach 함수의 파라미터로는, 각 원소에 대하여 처리하고 싶은 코드를 함수로 넣어줌. 이 함수의 파라미터 hero는 각 원소를 가르킨다.
• 함수형태의 파라미터를 전달하는 것을 콜백함수 라고 부른다. 함수를 등록해주면, forEach 가 실행
   

2) map

• map 은 배열 안의 각 원소를 변환 할 때 사용

function biggerThanThree(numbers) {
  const N = [];
  numbers.forEach ( n => {
    if(n > 3) N.push(n);
  });
  return N;
}

const numbers = [1, 2, 3, 4, 5, 6, 7];
console.log(biggerThanThree(numbers)); // 결과 값 [4, 5, 6, 7]

export default biggerThanThree;

⬇ map을 사용하면

function biggerThanThree(numbers) {
  const N = numbers.map(n => {
    if(n>3) return n;
  }).filter(data => data);
  return N;
}
const numbers = [1, 2, 3, 4, 5, 6, 7];
console.log(biggerThanThree(numbers)); // 결과 값 [4, 5, 6, 7]

3) indexOf

• indexOf는 원하는 항목이 몇번째 원소인지 찾아주는 함수

const dogs = ['쿠키', '쿠망', '쿠롱', '새우'];
const index = dogs.indexOf('쿠롱');
console.log(index); // 결과 값 2

4) findIndex

• indexOf함수로는 배열 안에 있는 값이 객체이거나, 배열이라면 찾을 수 없다 -> 이럴땐 findIndex를 사용 !

const todos = [
  {
    id: 1,
    text: '자바스크립트 입문',
    done: true
  },
  {
    id: 2,
    text: '함수 배우기',
    done: true
  },
  {
    id: 3,
    text: '객체와 배열 배우기',
    done: true
  },
  {
    id: 4,
    text: '배열 내장함수 배우기',
    done: false
  }
];

const index = todos.findIndex(todo => todo.id === 3);
console.log(index); // 결과 값 2

5) find

• 찾아낸 값 자체를 반환

const todos = [
  {
    id: 1,
    text: '자바스크립트 입문',
    done: true
  },
  {
    id: 2,
    text: '함수 배우기',
    done: true
  },
  {
    id: 3,
    text: '객체와 배열 배우기',
    done: true
  },
  {
    id: 4,
    text: '배열 내장함수 배우기',
    done: false
  }
];

const todo = todos.find(todo => todo.id === 3);
console.log(todo);

• 결과 : {id: 3, text: "객체와 배열 배우기", done: true}

6) filter

• 배열에서 특정 조건을 만족하는 값들만 따로 추출하여 새로운 배열을 만든다.
• todos 배열에서 done 값이 false 인 항목들만 따로 추출해서 새로운 배열 생성

const todos = [
  {
    id: 1,
    text: '자바스크립트 입문',
    done: true
  },
  {
    id: 2,
    text: '함수 배우기',
    done: true
  },
  {
    id: 3,
    text: '객체와 배열 배우기',
    done: true
  },
  {
    id: 4,
    text: '배열 내장함수 배우기',
    done: false
  }
];

const tasksNotDone = todos.filter(todo => todo.done === false);
console.log(tasksNotDone);

• 결과

[
  {
    id: 4,
    text: '배열 내장 함수 배우기',
    done: false
  }
];

⬇ 아래처럼도 사용가능

const tasksNotDone = todos.filter(todo => !todo.done);

7) splice

• 배열에서 특정 항목을 제거할 때 사용
• splice 를 사용 할 때 첫번째 파라미터는 어떤 인덱스부터 지울지를 의미하고 두번째 파라미터는 그 인덱스부터 몇개를 지울지를 의미한다.

const numbers = [10, 20, 30, 40];
const index = numbers.indexOf(30);
numbers.splice(index, 1);
console.log(numbers);

• 결과 : [10, 20, 40]
   

8) slice

• 배열을 잘라낼 때 사용, 기존의 배열은 건들이지 않는다.
• slice 에는 두개의 파라미터를 넣게 되는데 첫번째 파라미터는 어디서부터 자를지, 두번째 파라미터는 어디까지 자를지를 의미한다.

const numbers = [10, 20, 30, 40];
const sliced = numbers.slice(0, 2); // 0부터 시작해서 2전까지

console.log(sliced); // [10, 20]
console.log(numbers); // [10, 20, 30, 40]

9) shift 와 pop

• shift : 첫번째 원소를 배열에서 추출해준다. (추출하는 과정에서 배열에서 해당 원소는 사라진다.)

const numbers = [10, 20, 30, 40];
const value = numbers.shift();
console.log(value);
console.log(numbers);

• 결과

10
[20, 30, 40]

• pop : push의 반대, push는 배열의 맨 마지막에 새 항목을 추가, pop은 맨 마지막 항목을 추출

const numbers = [10, 20, 30, 40];
const value = numbers.pop();
console.log(value);
console.log(numbers);

• 결과

40
[10, 20, 30]

10) unshift

• shift의 반대, 배열의 맨 앞에 새 원소 추가

const numbers = [10, 20, 30, 40];
numbers.unshift(5);
console.log(numbers);

• 결과 : [5, 10, 20, 30, 40]
   

11) concat

• 여러개의 배열을 하나의 배열로 합쳐줌
• 기존함수에 영항을 주지 않음.

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const concated = arr1.concat(arr2);

console.log(concated);

• 결과 : [1, 2, 3, 4, 5, 6];
   

12) join

• 배열 안의 값들을 문자열 형태로 합쳐줌.

const array = [1, 2, 3, 4, 5];
console.log(array.join()); // 1,2,3,4,5
console.log(array.join(' ')); // 1 2 3 4 5
console.log(array.join(', ')); // 1, 2, 3, 4, 5

13) reduce

• 첫번째 파라미터는 accumulator 와 current 를 파라미터로 가져와서 결과를 반환하는 콜백함수, 두번째 파라미터는 reduce 함수에서 사용 할 초깃값
• 배열의 총 합 구하기

const numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce((accumulator, current) => accumulator + current, 0);

console.log(sum); // 결과 값 : 15

• 배열의 평균 구하기

const numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce((accumulator, current, index, array) => {
  if (index === array.length - 1) {
    return (accumulator + current) / array.length;
  }
  return accumulator + current;
}, 0);

console.log(sum); // 결과 값 : 3

14) 퀴즈

• 숫자 배열이 주어졌을 때 10보다 큰 숫자의 갯수를 반환하는 함수를 만들기

function countBiggerThanTen(numbers) {
  let count = 0;
  for(let number of numbers){
    if(number>10) count++;
  }
  return count;
}

const count = countBiggerThanTen([1, 2, 3, 5, 10, 20, 30, 40, 50, 60]);
console.log(count); // 5