[Codecademy] Learn JavaScript 1. Introduction

INDEX

1. Introduction

● Introduction to JavaScript

● Variables

---

1. Introduction

● Introduction to JavaScript

1. What is JavaScript?

 자바스크립트는 대부분의 웹 사이트에서 동적 동작을 수행하도록 하는 언어이다. 자바스크립트는 가장 최신의 웹브라우저 언어로 가장 잘 알려져있다. 초기에는 다소 조잡한 면이 있어 미흡한 평가를 받았으나 점차 업그레이드를 거듭하며 강력하고, 유연하고, 빠른 프로그래밍 언어로 등극했다. 

 다음의 학습을 통해 필수적으로 알아둬야 할 자료형과 내장 객체에 대해 알아보자.

 

---

2. Console 콘솔

 콘솔은 메시지를 출력하는 패널이다. 프로그래머는 화면에 내용을 출력하기 위해 콘솔에 직접적으로 print 또는 log할 수 있다.

자바스크립트의 console 예약어는 코드에서 사용할 수 있는 객체, 데이터 및 동작의 모음을 나타낸다.

* 예약어(keyword): 자바스크립트 언어에 이미 등록되어, 의미가 약속되어 있는 단어

 

console 객체에 내장된 행동인 .log() 메소드

console.log(5); // Output: 5

 

 세미콜론(;)은 한 문장의 끝을 알리는 부호이므로 빠뜨리지 않게 주의한다.

 

Instruction

1. console.log() 로 콘솔창에 숫자 출력

console.log(3); // Output: 3

 

2. console.log() 로 콘솔창에 다른 숫자 출력

console.log(0); // Output: 0

 

---

3. Comments 주석

 코드를 설명하기 위해 작성하는 메모. 프로그램이 동작하는 동안에는 무시된다.

- 라인 주석: 한 줄 짜리 주석으로, // 이후의 문장을 주석 처리한다.

- 블록 주석: 여러 줄의 주석을 /* 와 */ 로 감싸서 표현한다.

Instruction

1. 라인 주석을 추가하기

console.log('It was love at first sight.'); //Opening line

 

2. 여러 줄의 코드들을 블록 주석으로 감싸기

console.log('It was love at first sight.'); //Opening line
/*
console.log('The first time Yossarian saw the chaplain he fell madly in love with him.');
console.log('Yossarian was in the hospital with a pain in his liver that fell just short of being jaundice.');
console.log('The doctors were puzzled by the fact that it wasn\'t quite jaundice.');
console.log('If it became jaundice they could treat it.');
console.log('If it didn\'t become jaundice and went away they could discharge him.');
console.log('But this just being short of jaundice all the time confused them.');
*/

---

4. Data Types 자료형

 자료형은 프로그래밍에서 사용하는 다양한 종류의 데이터에 대한 분류이다. 자바스크립트에는 다음과 같은 7가지 자료형이 있다.

• Number : 10진법으로 표현되는 모든 수 ex) 4, 8, 1516, 23.42
• String : 문자열을 작은따옴표(' . . . ') 또는 큰따옴표(" . . . ")로 감싼 형태로 표현된다. 자바스크립트에서는 두 기호의 용례를 구분하지 않는다. ex) "Hello World" , 'green' , '12.34'
• Boolean : true 또는 false 의 값을 갖는 자료형.
• Null : 아무 것도 없음을 나타내는 값. 따옴표 없이 null 로 표현된다.
• Undefined : 따옴표 없이 undefined 로 표현되는 자료형. null과는 다른 용도를 가지지만 값이 없음을 나타내기도 한다.
• Symbol : 보다 복잡한 코딩에 유용한 고유 식별자. 현재 수준에서는 다루지 않는다.
• Object : 관련된 데이터의 묶음.

Instruction

1. 1행에서 문자열 'Javascript'을 콘솔에 기록

2. 2행에서 수 2011을 콘솔에 기록

3. 3행에서 문자열 'Woohoo! I love to code! #codecademy'을 콘솔에 기록

4. 4행에서 수 20.49을 콘솔에 기록

console.log('JavaScript');
console.log(2011);
console.log('Woohoo! I love to code! #codecademy');
console.log(20.49);

---

5. Arthmetic Operators 산술연산자

자바스크립트에는 수를 이용한 수학적 계산을 위한 몇몇 산술연산자가 내장되어 있다.

* 연산자: 코드에서 작업을 수행하는 문자

1. Add (덧셈) : +
2. Subtract (뺄셈) : -
3. Multiply (곱셈) : *
4. Divide (나눗셈) : /
5. Remainder (나머지) : % 

console.log(3 + 4); // Prints 7
console.log(5 - 1); // Prints 4
console.log(4 * 2); // Prints 8
console.log(9 / 3); // Prints 3
console.log(11 % 3); // Prints 2
console.log(12 % 3); // Prints 0

---

6. String Concatenation 문자열 병합

+ 연산자는 두 문자열을 연결하는 기능도 수행한다.

console.log('wo' + 'ah'); // Prints 'woah'
console.log('I love to ' + 'code.') // Prints 'I love to code.'

console.log('front ' + 'space'); // Prints 'front space'
console.log('back' + ' space'); // Prints 'back space'
console.log('no' + 'space'); // Prints 'nospace'
console.log('middle' + ' ' + 'space'); // Prints 'middle space'

Instruction

1. 'Hello' 와 'World'을 연결

2. 'Hello' 와 'World' 사이에 ' '(공백 한 칸)를 포함하도록 연결

console.log('Hello'+'World');
console.log('Hello'+' '+'World');

---

7. Properties 속성

자바스크립트는 새로운 데이터를 해당 자료형의 인스턴스로 저장한다. 모든 문자열 인스턴스에는 문자열을 구성하는 문자의 수를 저장하는 length(길이)라는 속성이 있다. 점 연산자(.)를 통해 속성을 참조할 수 있다.

console.log('Hello'.length); // Prints 5

Instruction

1. 'Teaching the world how to code' 의 길이를 알기 위해 .length 를 이용

console.log('Teaching the world how to code'.length);

---

8. Methods 메소드

 메소드는 수행할 수 있는 작업이다. 메서드는 instanceName.methodName() 의 형태로 호출할 수 있다. 우리는 이미 console.log() 명령으로 console 객체의 .log() 메소드를 호출해보았다.

console.log('hello'.toUpperCase()); // Prints 'HELLO'
console.log('Hey'.startsWith('H')); // Prints true

- 1행의 .toUpperCase() 메소드는 모든 문자를 대문자로 변환한 후 반환한다.

- 2행의 .startsWith(x) 메소드는 문자열이 x(문자열)를 포함하고 있다면 true를 반환한다.

Instruction

1. .toUpperCase() 메소드를 이용해 'Codecademy' 를 구성하는 문자를 대문자로 바꿔 반환하도록 한다.

2. '    Remove whitespace    ' 문자열 앞뒤의 공백 제거

// Use .toUpperCase() to log 'Codecademy' in all uppercase letters
console.log('Codecademy'.toUpperCase());
// Use a string method to log the following string without whitespace at the beginning and end of it.
console.log('    Remove whitespace   '.trim());

---

9. Built-in Objects 자바스크립트 내장 객체

 자바스크립트에 내장되어 있는 객체는 console 외에도 많이 있다. 사용자가 객체를 직접 만들 수도 있지만, 유용한 기능으로 가득한 내장 객체를 활용하는 방법도 있다.

▼ 자바스크립트 표준 내장 객체 - 더 살펴보기 ▼

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects

 

 자바스크립트는 보다 복잡한 수학 연산을 할 수 있도록 Math 객체를 제공하고 있다.

▼ Math 객체의 속성과 메소드 - 더 살펴보기 ▼

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math

 

Math.random() 메소드 : 0 이상 1 미만의 랜덤 소수를 반환한다.

 

 0과 50 사이의 랜덤 수를 얻으려면 이에 50을 곱하면 된다.

Math.random() * 50;

 

Math.floor(x) 메소드 : 십진수를 인자로 받아 소수점 아래를 버린 후 정수값을 반환한다.

Math.floor(Math.random() * 50); // Prints a random whole number between 0 and 50

위의 경우,

1) Math.random() 메소드가 0과 1 사이의 랜덤 수를 생성한다.

2) 이에 50이 곱해진 수, 즉 0과 50 사이의 랜덤 수가 나온다.

3) Math.floor() 메소드가 괄호 안의 인자를 정수 값으로 내림한 수를 반환한다.

결과적으로, 0 이상 50 미만의 랜덤 정수를 얻게 된다.

 

Instruction

1. console.log() 안에 Math.random() 을 이용한 랜덤 수를 생성하고, 이에 100을 곱하라.

console.log(Math.random()*100);

2. Math.floor() 를 이용하여 정수를 반환하도록 한다. 위에서 작성한 console.log() 의 괄호 안에서, Math.random()*100 을 Math.floor() 의 괄호 안에 넣는다.

console.log(Math.floor(Math.random()*100));

 

3. 아래 링크에서 메소드를 찾아, 해당 수보다 크거나 같은 정수 중 최솟값을 반환하도록 한다.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math

console.log(Math.ceil(43.8)); // Output : 44

 

4. 아래 링크에서 Number 객체가 가진, 해당 수가 정수값인지 판별하는 메소드를 찾는다.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number

console.log(Number.isInteger(2017)); // Output : true
console.log(Number.isInteger(20.17)); // Output : false

---

 

● Variables 

1. Variables  변수

 변수는 값을 저장할 수 있는 공간이다. 변수에 이름을 붙일 수 있는 기능을 제공하는데, 이는 프로그래머가 변수를 구별하는 데 이해하기 쉬우며 값에 접근할 때 변수 이름을 사용한다.

var apple = 'delicious!';
console.log(apple); // Output: 'delicious!'

apple 변수에 'delicious!' 문자열을 저장하고 consloe.log()를 통해 apple에 들어있는 값을 출력한다.  

 

 

변수를 선언할 때 지켜야 할 규칙

1. 변수의 이름은 숫자로 시작할 수 없다.
2. 대소문자 구분을 한다. 즉 Apple와 apple는 서로 다른 변수이다.
3. 변수 이름은 예약어로 선언할 수 없다.

>> js에서 사용하는 예약어 리스트

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#keywords

 

 

변수를 선언할 때 사용하는 예약어는 var, let, const 3가지가 있다.

var은 ES6 버전 이전에 있었던 예약어이고, ES6 버전부터 let, const 예약어가 추가되었다.

 *ES6: ECMA라는 국제 기구에서 만든 표준문서인 ECMAScript(=ES)의 6번째 개정판 문서에 있는 표준 스펙

var n1 = 3;
const n2 = 8;
let n3 = 10;

변수를 선언하는 방법은 var, const, let 모두 변수 앞에 써주어 선언한다.

 

---

2. Creative a Variable : var  예약어

var은 새로운 변수를 선언할 때 사용하는 예약어이다.

var comment = 'hello';
console.log(comment);
// Output: hello

var 예약어를 사용하여 comment 변수를 선언하였고 동시에 문자열 'hello'를 변수에 할당하였다.

console.log()로 변수를 출력하면 변수의 값은 'hello'가 출력된다.

 

var 예약어의 문제점?

1. 변수 재선언 가능: 같은 이름의 변수를 남용하여 사용할 수 있는 문제점이 발생한다.

var comment = 'hello';
console.log(comment); // Output: hello
var comment = 'bye~';
console.log(comment); // Output: bye~

1행에서 var 예약어로 comment를 선언한 후, 3행에서 재선언 하였지만 오류가 발생하지 않고 출력된다.

 

2. 반복문에서의 문제점

for (var i = 0; i < 10; i++) {
  console.log(i);  //0 ~ 10까지 출력
}

console.log('last:', i); // Output: 10

for 반복문 내에서 선언된 i는 반복문이 끝난 후 사라지는 것이 맞다. 즉, 반복문 밖에서는 i가 선언되어있지 않았기 때문에 오류가 발생하는 것이 맞지만 실제로 i를 출력하면 i에 저장되어 있던 값인 10이 출력된다.

 

그래서 이를 보완하는 방법으로 ES6 버전 이후 let 예약어가 추가되었다.

 

 

Instruction

1. var로 선언한 변수를 출력한다.

var favoriteFood = 'pizza';
var numOfSlices = 8;
console.log(numOfSlices, favoriteFood) // 8 'pizza'

1. 1행: var 예약어를 사용하여 favoriteFood 변수를 선언하였고, 동시에 'pizza' 문자열을 변수에 할당하였다.
2. 2행: var 예약어를 사용하여 numOfSlices 변수를 선언하였고, 동시에 8을 변수에 할당하였다.
3. console.log()로 favoriteFood와 numOfSlices의 값을 출력하였다.

---

3. Create a Variable: let 예약어

let 예약어는 ES6 버전 이후로 나온 예약어로, var 변수의 문제점을 보완하여 나온 예약어이다.

변수를 선언할 때 사용하며, let 예약어를 사용한 변수는 선언 후에 다른 값으로 재할당할 수 있다.  

let fruit = 'apple';
console.log(fruit); // Output: apple
fruit = 'orange';
console.log(fruit); // Output: orange

fruit를 let 예약어로 변수 선언과 동시에 'apple' 문자열을 변수에 할당, 다시 'orange' 문자열을 재할당하였다.

 

 

변수를 선언한 뒤, 값을 할당하지 않고 console.log()로 출력하면 undefined가 출력된다.

이는 var 예약어를 사용하여 선언했을 때도 동일한 결과가 나온다.

const 예약어를 사용하여 선언한 경우에는 오류가 발생한다.

let money;
console.log(money); // Output: undefined
money = 2000;
console.log(money); // Output: 2000

1. 1행에서 let 예약어로 money를 선언하고 값을 할당하지 않아 console.log()로 출력하였을 때 undefined가 출력된다.
2. 3행에서 money 변수에 2000을 할당하고, console.log()로 출력하였을 때 2000이 출력된다.

 

Instruction

1. let 예약어로 선언한 변수를 출력한다.

let mouse = false;
mouse = true;
console.log(mouse);  // Output: true

1. 1행: let 예약어를 사용하여 mouse 변수를 선언하고 동시에 false(boolean)를 할당하였다.
2. 2행에서 mouse 변수에 true 값을 재할당하였다.
3. 3행에서 console.log()로 mouse에 저장된 값인 true를 출력한다.

---

4. Create a Variable: const 예약어

const 예약어는 let 변수와 같이 ES6 버전 이후로 나온 예약어로 변수를 선언할 때 사용한다.

var, let와 다르게 변수를 선언한 후 재할당을 할 수 없다.

const fruit = 'apple';
console.log(fruit); // Output: apple
fruit = 'orange'; // Output: TypeError: Assignment to constant variable.

1. 1행: const 예약어를 사용하여 fruit 변수를 선언하고 동시에 문자열 'apple'을 할당하였다.
2. 3행: const로 선언된 변수는 재할당이 불가능하기 때문에 fruit에 값을 넣으면 오류가 발생한다.

 

즉, 변수를 선언할 때 재할당이 필요없으면 const 예약어를, 재할당이 필요하면 let 예약어를 사용한다. 

 

 

정리: var, let, const의 차이점

1. var : 변수 재선언 가능, 재선언을 하여도 오류가 발생하지 않는다.
2. let : 변수 재선언 불가능, 변수 재할당 가능
3. const : 변수 재선언 불가능, 변수 재할당 불가능

 

Instruction

1. const로 선언한 변수를 출력한다.

const animal = 'dog';
console.log(mouse); // Output: dog

1. 1행: const 예약어를 사용하여 변수 선언과 동시에 'dog' 문자열을 할당한다.
2. 2행: console.log()로 mouse의 값을 출력한다.

 

2. const로 선언한 변수의 재할당 오류

const animal = 'dog';
console.log(mouse); // Output: dog
animal = 'cat'; // Output: TypeError: Assignment to constant variable.

const로 선언한 변수에 값을 재할당하면 오류가 발생한다.

 

---

5. Mathematical Assignment Operators: 할당연산자

할당 연산자 = 는 변수에 값을 저장하기 위해 사용한다.

할당연산자는 (피연산자) (할당연산자) (피연산자) 형식인데, 이때 왼쪽 피연산자는 값을 저장할 수 있는 변수여야 한다.

let w = 4;
w = w + 1;
 
console.log(w); // Output: 5

변수 w에 4의 값을 할당 후, w = w + 1 할당 연산을 통해 변수의 값을 1 증가시킨다.

 

또한 위의 예시에서 +연산자와 =연산자를 결합한 += 를 사용하여 덧셈 연산과 할당 연산을 수행하는 방법도 있다.

let w = 4;
w += 1;
 
console.log(w); // Output: 5

+= 할당 연산자를 사용하여 변수 w에 들어있는 값을 재할당한다. 먼저 우변에 있는 숫자를 사용하여 +연산을 수행한 후, =를 통해 변수 w 재할당한다. 

 

또 다른 할당 연산자는 -=, *=, /= 등이 있다.

 

정리: 할당 연산자

• = : 오른쪽 피연산자의 값을 왼쪽 피연산자에 저장, 단순 할당 연산자라고도 한다.
• += : 오른쪽 피연산자의 값을 왼쪽 피연산자와 더해서 왼쪽 피연산자에 저장
• -= : 오른쪽 피연산자의 값을 왼쪽 피연산자와 빼서 왼쪽 피연산자에 저장
• *= : 오른쪽 피연산자의 값을 왼쪽 피연산자와 곱해서 왼쪽 피연산자에 저장
• /= :  오른쪽 피연산자의 값을 왼쪽 피연산자와 나누어서 왼쪽 피연산자에 저장

 

Instruction

1. 할당연산자 +=, -=를 사용하여 연산을 수행한다.

let a = 6;
a += 2;
console.log(a); // Output: 8

a -= 4;
console.log(a); // Output: 4

2. 할당 연산자 *=, /=를 사용하여 연산을 수행한다.

let a = 6;
a *= 2;
console.log(a); // Output: 12 

a /= 4;
console.log(a); // Output: 3

 

---

6. The Increment and Decrement Operator: 증감연산자

다른 할당 연산자의 종류로 증가 연산자와 감소 연산자가 있다.  증가 연산자는 값을 1 증가, 감소 연산자는 값을 1 감소시킨다. 연산자는 변수의 오른쪽에 작성한다.

let b = 5;
b++;
console.log(b); // Output: 6
b--;
console.log(b); // Output: 5

 

Instruction

1. 증감 연산자 ++를 사용하여 연산을 수행한다.

let num = 3;
num++;
console.log(num); //Output: 4

2행에서 ++ 연산자에 의해서 num의 값은 1이 증가하고, console.log()로 출력하면 num에 저장된 값인 4가 출력된다.

 

2. 증감연산자 --를 사용하여 연산을 수행한다.

let num = 3;
num--;
console.log(num); //Output: 2

2행에서 -- 연산자에 의해서 num의 값이 1 감소하고, console.log()로 출력하면 num에 저장된 값인 2가 출력된다.

 

---

7. String Concatenation with Variables  변수와 문자열의 결합

+ 연산자는 덧셈 연산 뿐만 아니라 문자열과 변수를 결합하는 일을 수행할 수 있다.

let animal = 'dog';
console.log('I like ' + animal  + '.'); // Output: I like dog.

 

Instruction

1. 연산자 +를 사용하여 변수와 문자열을 결합한다.

var favoriteFood = 'pizza';
console.log('My favorite food:' + favoriteFood) // Output: My favorite food:pizza

 

2. 연산자 +를 사용하여 여러 개의 변수와 문자열을 결합한다.

var color = 'pink';
var name = 'Sue';
console.log('My name is ' + name +'. And my favorite color is ' + color + '.') 
// Output: My name is Sue. And my favorite color is pink.

1. 1행~2행: var 예약어를 사용하여 color, name 변수를 선언하고 값을 각각 할당하였다.
2. +연산자를 사용하여 문자열과 변수가 결합하여 출력된다.

---

8. String Interpolation 문자열 보간

문자열과 변수를 연결하는 방법은 + 연산자를 사용하는 것 이외의 다른 방법이 있다. 

문자열 보간은 자바스크립트가 ES6 버전으로 바뀌면서 나온 기능으로 문자열에 변수를 삽입할 수 있는 방법이다.

let color = 'pink';
console.log(`I have a ${color} clothes.`); // Output: I have pink clothes.

• 문자열은 `(키보드 1 옆에 위치)를 사용하여 감싸준다.
• 문자열 내에 변수를 넣을 자리에 ${변수}를 쓴다. 

 

즉 문자열과 변수를 연결할 수 있는 방법은 2가지가 있다.

1.  + 연산자를 사용
2. `와 ${변수}를 사용 ( ` 는 키보드 상단의 1 키의 왼쪽에 위치함)

Instruction

1. 문자열 보간을 통해 문자열과 변수를 연결한다.

let age = 22;
console.log(`I am ${age} years old.`); // Output: I am 22 years old.

``로 문자열을 감싸주었고 문자열 내에 변수값을 출력할 자리에 ${age}를 넣어 문자열과 같이 값을 출력하였다.

---

9. typeof operator 

typeof 연산자는 변수의 데이터 자료형을 확인할 때 사용하는 연산자이다.

typeof 변수 형식으로 작성되며, 반환값으로 변수의 데이터 자료형을 반환한다.

const value1 = 20;
console.log(typeof value1); // Output: number
 
const value2 = 'happy';
console.log(typeof value2); // Output: string
 
const value3 = true; 
console.log(typeof value3); // Output: boolean

 

Instruction

1. typeof 연산자를 사용하여 데이터 자료형을 확인한다.

let newVariable = 12.3;
console.log(typeof newVariable); // Output: number
newVariable = false;
console.log(typeof newVariable); // Output: boolean
newVarialbe= 'hello world!';
console.log(typeof newVariable); // Output: string

1. 1행~2행: newVariable에 12.3을 넣었고, typeof newVariable에서 typeof는 변수의 자료형을 반환하므로 number을 출력한다.
2. 3행~4행: newVariable에 false을 넣었고, typeof newVariable에서 boolean을 반환한다.
3. 5행~6행: newVariable에 12.3을 넣었고, typeof newVariable에서 string을 반환한다.

---

Corner React Starter #2

Editor 유즈, 숨숨