문자열 합치기 (연산자)

에디터에서 실행을 안하고 줄바꿈으로 엔터를 넣고 싶으면
Shift + enter

숫자 기본(parseInt, NaN)

parseInt('3월`)
3

Number('3월')
NaN

parseInt는 본인이 바꿀수 있는대로 최대한 바꿔준다.

연산자 우선 순위, 소수 계산 주의점

자바스크립트에서는 저웃와 실수가 구분해서 나누어져 있지 않고 그냥 number다.

0.1+0.2
0.30000000000000004

실수 연산할때 소수점 문제가 있다. 그래서

(0.1 * 10 + 0.2 * 10 ) / 10
0.3

이렇게 정수로 만들어준 다음 다시 소수로 만들어주면 된다.

불 값 (boolean, 값들의 비교)

NaN == NaN

NaN끼리 비교할 때 false가 나온다. 이는 숫자, 문자열, 불 값을 통틀어 false가 나오는 유일한 값이다.

'3' < 5;
true

숫자랑 비교하면 숫자로 형 변환 후 비교한다.

'abc' < 5;
false

문자열 abc를 숫자로 바꾸면 NaN이 된다. NaN과의 비교는 false가 나온다.

==와 ===비교하기

==는 자료형이 다른 경우에도 형 변환후 비교한다. ===은 자료형까지 비교하는 것이다.

논리 연산자

Boolean('a')
true

false, ''(빈 문자열), 0, NaN은 불 값으로 false가 된다. undefined와 null도 형 변환시 false가 된다. (나중에는 document.all 도 false)이다.

undefined와 null

console.log('hello, undefined!');
Hello, undefined!
<undefined

undefined는 보통 반환할 결과값이 없을 때 나온다. console.log 명령어는 콘솔에 무언가를 출력하지만, 그 자체로는 결과값이 없기 때문에 undefined가 반환된다.

undefined == null;
true

빈 값이라는 점에서 같지만 자료형까지 비교해보면 다르다

undefined === null;
false

typeof null;

결과값이 "null"이 아니라 "object"이다. 이는 자바스크립트에서 유명한 버그다. 따라서 null인지 확인하려면 ===를 써야 한다.

변수 선언하기

자바스크립트에서는 변수 선언 방법이 let, var, const가 있다.

let으로 시작하는 명령을 선언문이라 한다. 변수 선언은 항상 결과값이 undefined로 출력된다.

변수 이름짓기

값을 대입하지 않은 변수를 입력하면 undefined가 출력된다.

변수 수정하기

let change = '바꿨다';
change = '바꿨다';

상수(const)와 var

const

const는 상수의 줄임말 입니다.

다른 값을 대입하면 에러가 나지만 값을 바꿀 수 없다는 뜻은 아니다. 나중에 객체를 배울 때 값을 바꾸는 방법을 살펴보자.

var 알아보기

var는 변수의 준말로, 예전에는 많이 사용했지만 어려운 특성 때문에 const와 let을 이용해 변수를 선언하는 방식으로 옮겨가고 있습니다.

var variable = '다시 선언할 수 있습니다';
undefined
variable;
"다시 선언할 수 있습니다"

var 변수는 다시 var를 달고 선언할 수 있다. (let과 달리). 그래서 실수로 변수를 다시 선언하는 문제가 발생할 수 있다. 또한 예약어나 다름없는 이름도 변수명으로 사용할 수 있다.

조건문(if)

let condition = true;
if (condition) {
  consolge.log("Hello, if!');
}

중괄호가 없어도 파이썬처럼 들여쓰기가 있으면 블록으로 인식을 한다.

else, else if, switch

조건부 연산자(삼항 연산자)

5 > 0 ? '참입니다' : '거짓입니다';

반복문(while)

반복문(for)

for (let i  = 0; i < 100; i++) {
  console.log('Hello, for!');
}

break와 continue

배열 기본

객체

객체는 자료형의 일종으로 다양한 값을 모아둔 또다른 값입니다. 객체의 종류는 크게 배열, 함수, 배열이나 함수가 아닌 객체로 나눌 수 있습니다.

const fruits = ['사과', '오렌지', '배', '딸기'];
console.log(frutis[0]);

배열안의 값 자료형이 모두 같아야할 일표는 없다.

const arrayOfArray = [[1,2,3],[4,5]];
const variableArray = [a, b, 30];

배열의 요소 개수 구하기

console.log(arrayofArray.length);

배열 제일 앞에 추가하기 - unshift

const target = ['나, '다'];
target.unshift('가');
console.log(target);

배열 제일 뒤에 추가하기 - push

const target = ['가', '나', '다'];
target.push('라');

const는 상수여서 못바꾸는거 아니였나? const는 엄밀히 상수가 아니다. const에 새로운 값 대입은 불가능하지만 객체일 경우 객체 내부의 속성이나 배열의 요소는 수정할 수 있다.

배열 메서드 (수정, 조회)

배열에서 pop을 사용하면 마지막 요소가 제거된다.

const target = ['가', '나', '다'];
target.pop();

첫 번째 요소를 제거하는 것은 shift이다.

const target = [1,2,3];
target.shift();

중간요소를 제거하기

const target = [1,2,3,4,5];
target.splice(1,1);
console.log(target);
VM470:1 (4) [1, 3, 4, 5]

splice에 들어가는 첫번째 인자는 제거하고 싶은 요소 인덱스, 두번째 인자는 인덱스부터 몇개를 제거하고 싶은지. 만약 두번째 인자가 없으면 뒤에것을 다 지워 버린다.

const target2 = [1,2,3,4,5];
target2.splice(1,3, '가', '나');
console.log(target2);
VM550:3 (4) [1, "가", "나", 5]

지우고 뒤에 인자들을 넣은 것이다. 이것을 이용하면, arr.splice(1, 0, '바') 이럴 경우 첫 번째 인덱스에 '바'를 집어넣는 것이다.

배열에서 요소 찾기

const target =  [1,2,3,4,5];
const result = target.includes(1); // true, false
const result = target.indexOf(3);
const result = target.lastIndexOf(4);

배열 메서드 응용하기

배열에서 '라'를 모두 제거하는 것이다.

while (arr.indexOf('라') > -1) {
	arr.splice(arr.indexOf('라'),1);
}

함수 기본

함수를 만들 때는 보통 function 예약어를 사용하거나 => 기호를 사용합니다.

function a() {} // 함수 선언문. 함수를 상수에 대입하는 대신 function 키워드 뒤에 이름을 넣어줌
const b = function() {}; // 함수 표현식. 
const c = () => {};

함수 선언문 뒤에는 세미콜론을 안붙인다.

함수에 반환값을 적지 않으면 자동으로 return undefined가 들어간 셈이다.

매개변수와 인수

function a(w, x, y, z) {
  console.log(w, x, y, z);
  console.log(arguments);
}
a('Hello', 'Parameter', 'Argument');
>Hello Parameter Argument undefined
>VM624:3 Arguments(3) ["Hello", "Parameter", "Argument", callee: ƒ, Symbol(Symbol.iterator): ƒ]

function 함수 안에서는 선언을 안해도 arguments를 쓸 수 있다.

매개변수의 개수를 인수보다 적게 만들면 그냥 개수가 맞는것끼리만 짝지어진다.

const f = (x, y, z) => {
  return x * y * z;
}

객체 리터럴 기본

배열도 객체고 함수도 객체인데, 배열도 함수도 아닌데 객체인 것을 알아보자.

const zerocho = {
  name : '조현영',
  year : 1994,
  month: 8,
  date: 12,
  gender: 'M',
};

마지막에 쉼표를 붙여도되고 안붙여도 되는데, 붙이면 다음에 추가할 때 실수를 방지한다. 이름에는 원래 따옴표를 안적어줘도되는데 숫자가 맨앞에 있거나 띄어쓰기나 특수문자가 있으면 적어줘야한다.

console.log(zerocho['name']);
console.log(zerocho.name);

특수문자나 띄어쓰기가 들어간 이름은 []괄호를 이용해서 접근해야 한다. 대괄호에서 따옴표를 안쓰면 변수가 들어가므로 완전히 다르다. 그래서 zerocho.name을 쓰는 것이 실수를 방지한다.

배열과 함수가 객체인 이유

배열과 함수가 객체인 이유는 객체의 성질을 모두 다 사용할 수 있기 때문이다. 배열과 함수에도 속성들을 추가할 수도 있고 수정 및 제거할 수도 있다. 객체는 함수의 배열을 포함하는 개념이라서 {}를 사용해 만든 객체를 객체 리터럴이라고 따로 부르는 것이다.

function hello() {}
hello.a = 'really?';
const array = [];
array.b = 'wow';
console.log(hello.a);
console.log(array.b);

메서드

객체의 속성 값으로 함수를 넣었을 때 이 속성을 메서드라고 한다.

const debug = {
  log : function(value {
    console.log(value);
   },
};

객체의 비교(원시값과의 차이점)

객체끼리는 비교하면 항상 false가 나온다. 즉 함수와 배열도 마찬가지다.
따라서 같은 객체인지 비교하고 싶다면 기존 객체를 변수에 저장해두어야 한다.

const a = {name: 'zerocho'};
const array = [1,2,a];
console.log(a === array[2]);

객체는 매번 새로 만들어진다.

const array = [1,2,a];
array === [1,2,a];
>false

참조

const a = {name : 'zerhocho'};
const b = a;
a.name = 'hero';
console.log(b.name);

변수 a의 name 속성을 변경해도 b도 같이 변경된다. a와 b가 같은 객체를 참조하고 있기 때문이다. 다만 객체가 아닌 값 (문자열, 숫자, 불, 값, null, undefined)의 경우는 조금 다르다.

let a = 'zerocho';
let b = a;
a = 'hero';
console.log(b); //'zerocho'