이동규

개발 잘하고 싶다

1. JavaScript 란?

JavaScript (줄여서 JS) 는 가벼운 객체 지향 인터프리터 언어이며 웹페이지의 스크립트 언어로 프로토타입 기반, 다중 패러다임 스크립트 언어이다.

JS는 절차지향 언어와 객체지향 언어 두가지 형태로 만들 수 있다. JS에서 객체는 실행 시간에 빈 객체를 오버라이딩하여 메소드와 프로퍼티를 연결하는 방식으로 생성된다. C++ 및 Java와 같은 컴파일 언어에서 공통적인 구문 클래스 정의와 반대되는 개념이다. 한번 객체가 생성되면, 비슷한 객체를 생성할 때 프로토타입으로 사용할 수 있다.

*다중 패러다임 이란, 하나 이상의 프로그래밍 패러다임을 의미하는데, 패러다임이란 프로그래머가 프로그램을 바라보는 관점을 의미하고 여기서 프로그래밍 패러다임의 예시로는 프로그램을 상호작용하는 객체들의 집합으로 보는 ‘객체 지향 프로그래밍’과 프로그램을 상태값이 없는 함수들의 연속으로 보는 ‘함수형 프로그래밍’이 있다.

*프로토타입 기반이란, 프로토타입 역할을 하는 기존 객체를 재사용하는 프로세스를 통해 동작 재사용(상속)이 수행되는 ‘‘객체 지향 프로그래밍 스타일’’.

출처

2. JS의 기본 타입

  1. number
  2. string
  3. boolean
  4. null
  5. undefined

3. number & 연산자

Javascript 에서는 모든 숫자형 데이터가 int, float 등을 구분할 필요없이 number로 통용된다.

산술 연산자(+, -, *, /, %)를 지원한다.

1 + 2;	// 3

5 - 2;	// 3

2 * 3;	// 6

6 / 2;	// 3

5 % 2;	// 1 

2 ** 5;	// 32

typeof 99;	// 'number'

3. NaN (Not A Number)

숫자가 아닌 값을 의미한다. 하지만, 데이터타입은 number로 분류된다.

NaN이 발생하는 경우는

  • 0 으로 나누는 경우
  • 문자나 NaN으로 연산을 수행하는 경우
0 / 0;	// NaN
'hi' / 0;	// NaN

0 + NaN;    // NaN
NaN + NaN;	// NaN

4. 변수 & let

  • let : 변수를 선언할 때 사용한다.
  • 연산자와 복합연산자로 변수를 업데이트할 수 있다.
let a = 5;
let b = 6;
let c = a + b;
c	// 11

let num = 5;
num = num + 5;	// 10
num += 5;	// 15
num -= 5;	// 10
num *= 2;	// 20
num /= 4;	// 5
num--;	// 4
num++;	// 5

5. const & var

  • const : 상수를 지정할 때 사용한다. const의 변수값은 초기화 이후에 수정하거나 업데이트할 수 없다.
const num = 99;
99 += 1;	// Uncaught SyntaxError: Invalid left-hand side in assignment
  • var : 변수를 선언할 때, 예전에 자주 사용되었으나 이제는 let과 const를 사용한다. let과 const가 더 세련된 방법이기 때문에, var는 사용하지 않도록 한다.

6. boolean

ture와 false 값을 의미하며, 파이썬과 혼옹햐여 대문자를 사용하여 저장하는 습관에 주의하자.

let isLoggedIn = false;
isLoggedIn = true;

7. 변수 명명 규칙(*중요)

JS 개발자들 대부분은 camelCase 규칙을 따른다.

지금까지 나는 대부분 snake_case 규칙으로 변수명을 선언했는데, 웹 프론트 개발자인만큼 앞으로 변수명의 규칙으로 camelCase를 사용하도록하자.

boolean 타입을 저장하는 경우, 변수명 앞에 ‘is’를 붙이면 보기에도 이해하기에도 좋다.

그리고 변수이름은 되도록 한개의 글자로 정하지 말고, 의미를 고려하여 짓도록 하자.

8. 문자열: 개요

문자열 저장 시, 큰 따옴표(“)나 작은 따옴표(‘)를 모두 사용할 수 있지만 하나의 기호를 정하여 사용하는 것이 좋다.

하지만, 나는 문자열 저장할 때 작은 따옴표를 사용하는 것을 습관화하도록 하자.

let greeting1 = "hi";
let greeting2 = "hello";

greeting1;	// 'hi'
greeting2;	// 'hello'

9. 문자열: index & length

문자열은 ‘리스트’ 자료구조이다. 따라서 인덱스로 양의 정수, 음의 정수 모두로 문자를 호출할 수 있다.

  • .length : 문자열의 길이를 반환하는 속성
let alphabet = 'abcd efgh';

alphabet[0];	// 'a'
alphabet[4];	// ' '
alphabet.length    // 9
alphabet[10];	// undefined 오류 출력
  • 문자열끼리의 연산도 가능
let firstName = 'Dong Kyoo';
let lastName = 'Lee';
let fullName = firstName + lastName;

fullName;	// 'Dong KyooLee'
  • 만약 서로 다른 데이터 타입(숫자, 문자)을 연산하는 경우, 연산이 가능한 타입(이 경우에는 숫자를 문자열로 변경하여 연산)으로 강제하는 특징이 있다.
let a = 1;
let b = 'hi';
let c = a + b;
typeof c;	// 'string'

10. 문자열: 메서드

참조 링크

JS가 문자열에 제공하는 메서드를 사용할 수 있는데, 이 때 구분해야 하는 것은 메서드와 특성을 구분할 수 있어야 한다.

let msg = "hello my dear";

// .length 는 특성
msg.length	// 13

// .toUpperCase() 는 메서드
msg.toUpperCase()	// 'HELLO MY DEAR'
  • .trim() : 좌우 공백문자를 지운다. 이 때, 문자열 안에 있는 공백문자는 지우지 않는다.
let alphabet = '    abcd efgh    ';
alphabet.trim();	// 'abcd efgh'

11. 문자열: 인수가 없는 메서드

필요한 메서드가 있다면, MDN 문서를 참고하도록 하자.

const word = "skateboard";

let facialHair = word.indexOf("board")
facialHair = word.slice(word.indexOf("board")).replace('o', 'e');	// 'beard'

12. 문자열: 유용한 문자열 템플릿(Template Literals)

Template Literals 는 작성한 표현식을 JS가 평가 후 접합하여 임베드시킨 문자열이다. 여기서 평가는 중괄호(${ }) 안에서 발생한다.

백틱(`)을 사용하며, 콘솔 출력 뿐만 아니라 변수와 문자열이 혼합된 문자열 데이터를 생성하는데 유익하기에 반드시 기억하자.

let price = 1200;
let qty = 5;
let product = 'computer';
`You bought ${qty} ${product}. Total is: ${price * qty}`; 

// 'You bought 5 computer. Total is: 6000'

13. null & undefined

  • null : 명시적으로 값이 없음을 의미한다.
  • undefined : 변수에 정의된 값이 없는 상태. 쉽게 말해서 “정의된 값이 없다. 또는 값을 모르겠다.”는 의미.

14. Math 객체 & 난수

Math 객체는 콘솔에 ‘Math’ 를 입력 후 실행하면, Math에서 제공하는 상수와 메서드 등을 확인할 수 있다.

let num = Math.PI;	// 3.141592653589793

Math.floor(3.6);    // 3
Math.ceil(3.1);    // 4

Math.random();	// 0~1 사이의 실수형 난수
Math.random() * 10 + 1;    // 1~10 사이의 실수형 난수
Math.floor(.random() * 10) + 1;    // 1~10 사이의 정수형 난수

Math.pow(3, 2);    // 9

15. 비교 연산자

비교 연산자로 number 뿐만 아니라, string도 비교할 수 있다.

string은 크기 비교 시, 유니코드의 숫자 코드를 기준으로 비교한다.

10 > 1;    // true
0.2 > 0.3;    // false
-10 < 0;    // true
50.5 < 5;    // false
0.5 <= 0.5;     //true
99 >= 4;     // true
99 >= 99;     // true
'a' < 'b';     // true
'A' > 'a';     // false

16. 이중등호(==)와 삼중 등호(===)

개발 TIP) 삼중등호를 사용하도록 하자.

  • 이중등호(==, !=) : 데이터타입을 비교하지 않고 동일한 데이터타입이라는 가정하에 값을 비교한다. (정확한 값의 비교를 하는데, 한계가 있음)
1 == '1';     // true
null == undefined;     // true
0 == false;     // true
  • 삼중등호(===, !==) : 데이터타입과 값 모두 동일한지 엄격히 비교할 수 있다.
1 === '1'     // false
0 === false;     // false
1 != '1';     // false
1 !== '1';     // true

17. console, alert, prompt

  • console.log() : 크롬 개발자 탭의 콘솔에 메시지를 출력할 수 있다.
  • alert(‘msg’) : 팝업창으로 경고 메시지를 출력할 수 있다.
  • prompt(‘msg’) : 팝업창으로 메시지와 입력창이 출력되고, 입력창을 통해 값을 전달받을 수 있다.

18. .js 파일 실행하기

HTML 페이지에서 body 안의 최하단에 script 태그로 .js 파일과 HTML 페이지를 서로 연결할 수 있다.

브라우저에 요소가 로드될 때, casecade 방식으로 위에서 아래로 진행이 되는데 상단에 위치한 head 태그에 script 를 위치시키면 body 태그 안의 요소가 로드되어있지 않아 DOM을 찾을 수 없게 된다.

단, 나중에 프레임워크를 사용할 때는 상관없다고 한다.

...
<body>
    ... 
    <script src="app.js"></script>
</body>

19. if

*설명 생략.

let num = Math.random();

if (num > 0.5) {
    console.log(`Your number: ${num} is bigger than 0.5!`);
}

if (num <= 0.5) {
    console.log(`Your number: ${num} is smaller than 0.5!`);
}

20. else if & else

*설명 생략

let age = parseInt(prompt("Age :"));

if (age < 5) {
    console.log("You are a baby. You get in for free!");
} else if (age < 10) {
    console.log("You are a child. You pay $10");
} else if (age < 65) {
    console.log("You are an adult. You pay $20");
} else {
    console.log("You are a senior. You pay $10");
}

21. nesting

nesting 은 조건문을 중첩하여 사용하는 방식을 의미하는데, 이번 내용과 별개로 아래 예시 코드처럼 ‘공백이 있는지 파악하는 방법’을 기억하여 사용하도록 하자.

  • string.indexof(‘ ‘) == -1
const password = prompt('please enter a new password');

// Password must be 6+ characterse
if (password.length >= 6) {
    // Password cannot include space
    if (password.indexOf(' ') === -1) {
        console.log('Complete!');
    }
    else {
        console.log('Your password contains empty space.')
    }
}
else {
    console.log('It is too short!');
}

22. truthy & falsy

Javascript의 모든 값에는 고유 trutyness 와 falsyness 가 있다. Falsy 값들은 아래와 같다.

  1. false
  2. 0
  3. empty string (‘’)
  4. null
  5. undefined
  6. Nan

23. 논리 함수: &&

*설명 생략

const password = prompt('Enter your password');

// Password must be 6+ characterse and Password cannot include space
if (password.length >= 6 && password.indexOf(' ') === -1) {
    console.log("VALID PASSWORD");
} else {
    console.log("INCORRECT FORMAT FOR PASSWORD!");
}

24. 논리 함수: ||

*설명 생략

// 0-5 free
// 6-10 $10
// 11-65 $20
// 65+ free

const age = parseInt(prompt('Age?'));

if (age >= 0 && age < 6 || age >= 66) {
    console.log('free');
} else if (age >= 6 && age < 11) {
    console.log('10$');
} else if (age >= 11 && age < 66) {
    console.log('20$');
} else {
    console.log('INVALID');
}

25. 논리 함수: not

위에서 null은 falsy 값을 갖는 것을 알 수 있었다.

그러한 특징으로 null의 부정인 ‘!(null)’ 은 true 값을 갖게 되는데, 이러한 특징을 조건문과 함께 활용하면 사용자가 입력한 값이 비어있는 값인지 아닌지를 간단히 판별할 수 있다.

const password = parseInt(prompt('Input password'));

// 입력한 값이 비어있는지 판별
if (!(password)) {
    console.log('Do not make password empty!');
    password = parseInt(prompt('Input your password again!'));
}

또는 아래와 같이 두 개의 조건문 모두에 속하는지 아닌지도 쉽게 판별할 수 있다.

const age = parseInt(prompt('Age?'));

if (!(age >= 0 && age < 6 || age > 65)) {
    console.log('You are not a baby or a senior!');
}

26. 배열: 개요

JS에서 배열은 C의 배열과 동일하다.

하지만, JS 배열의 장점은 C와 다르게 ‘어떠한 데이터 타입’과 관계없이 배열에 grouping 할 수 있다는 점이다.

그리고 JS에서 배열은 리스트가 아님을 기억해두자.

// JS의 배열은 데이터타입과 관계없이 grouping 가능
let arr1 = [1, 'korea', true, NaN, undefined, null];

// JS의 배열은 리스트가 아님
console.log(arr1[-1]); // undefined 에러 출력

27. 배열: 인덱스

번외로 문자열의 인덱스로는 문자열에 속한 문자를 수정할 수 없다.

const leaderboard = ['Harry', 'Lua', 'Hermione', 'Bellatrix']; 

leaderboard[1] = 'Luna';
leaderboard[leaderboard.length - 1] = 'Draco';

console.log(leaderboard);     // 'Harry', 'Luna', 'Hermione', 'Draco'

28. 배열: 메서드1 (.push(), .pop(), .shift(), .unshift())

  • 배열.push(요소) : 스택구조. 배열의 가장 마지막 자리의 요소를 추가.
  • 배열.pop() : 스택구조. 배열의 가장 마지막 자리의 요소를 제거.
  • 배열.shift() : 큐 구조. 배열의 가장 첫번째 자리의 요소를 제거.
  • 배열.unshift(요소) : 큐 구조. 배열의 가장 첫번째 자리에 요소를 추가.
fruit = [];

fruit.push('apple');
fruit.push('orange');
fruit.push('pineapple');
fruit.push('melon');

fruit.pop();
fruit.pop();

console.log(fruit);     // ['apple', 'orange']

fruit.unshift('mango');
fruit.unshift('strawberry');

console.log(fruit);     // ['strawberry', 'mango', 'apple', 'orange']

fruit.shift();

console.log(fruit);     // ['mango', 'apple', 'orange']

29. 배열: 메서드2 (.concat(), .includes(), .indexOf(), .reverse())

  • 배열1.concat(배열2) : 배열1 에 배열2를 결합하지만, 배열1의 요소들이 바뀌지는 않으니 주의하자.
  • 배열.includes(요소) : 배열에 요소가 포함되어있는지 boolean으로 반환.
  • 배열.indexOf(요소) : 배열에 요소의 인덱스를 반환.
  • 배열.reverse() : 배열에 있는 요소를 역순으로 수정.
let cat = ['black', 'white', 'brown'];
let dog = ['big', 'middle', 'small'];

let comboParty = cat.concat(dog);
// ['black', 'white', 'brown']
console.log(cat);

// ['black', 'white', 'brown', 'big', 'middle', 'small']
console.log(comboParty);     

// 4
console.log(comboParty.indexOf('middle'));

comboParty.reverse();
// ['small', 'middle', 'big', 'brown', 'white', 'black']
console.log(comboParty);

30. 배열: 메서드3 (.slice(), .splice(), .sort())

  • 배열.slice(startIndex, endIndex) : 배열에서 startIndex부터 endIndex - 1 까지 요소를 호출. 인수에 음수를 입력하면, 절대값의 크기를 배열의 길이로하여 뒤에서부터 슬라이싱하여 호출. (단, 슬라이싱하여도 배열의 요소가 삭제되는건 아님. .splice()와 헛갈리지 말자.)
let colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];

// ['red', 'orange']
console.log(colors.slice(0, 2));

// ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']
console.log(colors);

// ['violet']
console.log(colors.slice(-1));

// ['blue', 'indigo', 'violet']
console.log(colors.slice(-3));
  • 배열.splice(startIndex, deleteCount, 요소1, 요소2, …) : 배열의 startIndex 요소부터 deleteCount 값의 길이만큼 요소를 제거.
let colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
let days = ['Monday', 'Wednesday'];

// 1번째 인덱스부터 2개의 요소 제거
colors.splice(1, 2);
// 'red', 'green', 'blue', 'indigo', 'violet']
console.log(colors);

// 0번째 인덱스부터 3개의 요소 제거
colors.splice(0, 3);
// ['indigo', 'violet']
console.log(colors);

// 1번째 인덱스부터 0개의 요소 제거. 즉 제거하지 않음.
days.splice(1, 0);
console.log(days);

// 1번째 인덱스부터 Tuesday 요소 추가
days.splice(1, 0, 'Tuesday');
console.log(days);

// 1번째 인덱스부터 2개의 요소 제거하고 Sunday 요소 추가
days.splice(1, 2, 'Thursday', 'Sunday');
console.log(days);
  • 배열.sort() : 배열의 모든 요소를 문자열로 변환하고, UTF 16코드 유닛값을 비교하여 오름차순으로 정렬한다. 정렬 순서는 첫번째 음수, 0, 양수부터 비교하여 정렬하고, 두번째 요소가 양수인 경우 각 요소의 가장 앞자리 수(.sort() 후에는 모든 요소가 문자열로 변환되기 때문에)를 비교하여 오름차순으로 정렬하기 때문에 예상한 결과와 다른 결과가 나올 수 있음에 주의하자.
const numbers = [-12, 0, 1, 1000, 24, 355, 41];

numbers.sort();

// [-12, 0, 1, 1000, 24, 355, 41]
console.log(numbers);

31. 배열: 참조 타입과 동일성 테스트

JS의 배열은 참조 타입으로서 데이터의 주소값이 저장되는 참조 타입이다. 따라서, 배열끼리 콘텐츠를 비교하기 위해 이중, 삼중 등호를 사용하는 경우 주의해야한다.

// false
// 두 개의 콘텐츠를 비교하는 것이 아니라, 두 개의 주소값을 비교하기 때문
[1, 2, 3, 4] === [1, 2, 3, 4];

// false
nums1 = [1, 2, 3, 4];
nums2 = [1, 2, 3, 4];
nums1 === nums2;

// true
// nums의 주소값이 numsCopy에도 저장되었기 때문에 같은 참조를 따름
let nums = [1, 2, 3, 4];
let numsCopy = nums;
nums === numsCopy;

32. 배열: const 배열

배열은 const 로 선언해도 변수와는 다르게 배열의 컨테이너가 유지되는 선에서 배열의 데이터를 수정하거나 삭제할 수 있다.

const nums = [1, 2, 3];

// 컨테이너를 유지하는 선에서 데이터를 추가, 수정, 삭제할 수 있음
nums.push(4);
nums.pop();
console.log(nums);

하지만, const 배열에 아래와 같이 새로운 참조를 할당하면, 오류가 발생한다.

const nums = [1, 2, 3];

// 단, 새로운 참조를 할당할 수는 없음
nums = [];
nums = [5, 6, 7, 8];

33. 배열: 다차원 배열

다차원 배열의 선언과 호출 방법은 C, python과 비슷하다.

const gameBoard = [['A', 'O', 'X'], ['O', 'null', 'X'], ['O', 'O', 'B']];

// A null B
console.log(gameBoard[0][0], gameBoard[1][1], gameBoard[2][2]);

댓글남기기

참고