[codecademy JavaScript] 2장. Introduction, 3장. Conditionals, 4장. Functions

 

핫해진 개발자에 대한 관심과 함께, 개발 언어를 학습할 방법 또한 다양해지고 있다.

 

​

​

출처 : https://www.codecademy.com/ ​

 

 

Codecademy는 프로그래밍의 이론과 실습을 균형 있게 학습할 수 있는 영문 온라인 플랫폼이다.

이 사이트에서는 PHP, Python2, Ruby 등 다양한 언어에 대한 학습 커리큘럼을 유/무료로 제공하고 있는데, 이 중에서  JavaScript 코스에 대해서 알아보자.

​

JavaScript 코스는 총 10개의 챕터로 구성되어 있다.

 

 

출처 :  https://www.codecademy.com/

​

그 중에서, 학습한 일부 단원의 개념에 대해서 알아보자.

​

​

​

​

​

 

 

 

​

2 : Introduction

 

 

 

- JavaScript

프로그래밍 언어로, 주로 웹 개발을 위해 사용된다. 특징으로, 동적 작용 작동 가능, 강력함, 유연함, 현대에 많이 사용된다는 점이 있다.

​

- 콘솔(console)

개발자를 위한 중요 메시지 표시창이다. 타 언어에서의 print, pintf처럼 화면에 표시되는 항목을 보기 위해 콘솔에 직접 입력이 가능하다. 콘솔 키워드는 객체(데이터와 동작의 집합)이다. 키워드는 자바스크립트 안에서 저장된 단어다. .log는 console 뒤에 붙여서 출력하고자 하는 내용을 기록한다. (예: c언어의 printf 등과 유사한 기능)

console.log(5); // 출력값 : 5

 

콘솔에 괄호 안의 값(수)를 저장해 출력한다. 따옴표(;)로 문장의 종결을 장식한다. 수 외에도 다양한 종류의 데이터 출력 가능하다.

​

- 코드 코멘트(comment)

컴퓨터는 읽지 않는, 사람-개발자를 위한 메모이다. 코드 설명 또는 다른 개발자에게 남기는 요청사항, 주석 등을 담는다. 두 가지 방법으로 표현할 수 있다.

 

1.

// 이 내용은 주석입니다.

2.

/* 
이 내용은 주석입니다. 
여러 문장을 포함합니다. 
*/

 

- 데이터 유형(data type)

다양한 데이터의 분류로, JavaScript 기본 데이터 유형으로는 7가지가 있다. 1~6번은 원시 데이터 유형으로 가장 기본적인 데이터 유형이다.

1. Number (정수, 소수)

2. String (문자, 숫자, 공백(스페이스), 기호. ‘ ’ 혹은” ” 안에 기입.)

3. Boolean (True/False으로 결과가 나온다)

4. Null (아무 값도 없음을 강조해 표현한다)

5. Undefined (정의되지 않은 키워드로 표시. 지정 값이 존재하지 않음.)

6. Symbol (고유한 식별자.)

7. Object (복잡한 데이터 모음집)

​

- 연산자(operator)

코드에 직접 작성하는 문자 기호로, 숫자 데이터의 수학적 계산을 위해 JavaScript에 내장되어 있다. Console.log()를 이용하여 수학적 식의 계산 결과를 출력할 수 있다.

1. +(덧셈)

+ 기호는 숫자뿐 아니라, 좌측과 우측 문자열 연결(string concatenation)에도 이용한다. (python 내 + 기호처럼 작용)

2. -(뺄셈)

3. *(곱셈)

4. /(나눗셈)

5. %(나머지)

6. .(마침표)

​

- 특성(properties)

데이터 유형이 각 인스턴스에 대해 가지는 다양한 속성을 의미한다. JavaScript에 입력된 데이터는 브라우저에 의해 인스턴스로 저장된다.

​

- 메서드(Method)

데이터 유형의 인스턴스를 처리하는 것으로, JavaScript에 다양한 메서드가 내장되어 있다. 인스턴스에 의해 호출되거나 사용된다. 마침표와 메서드 이름, 괄호, 로 표현할 수 있다. (Ex .MethodName() .log() 참조 문서)

​

- 기본 제공 객체(bulit-in-object)

JavaScript에서 제공하는 내장 객체를 일컫는다. (ex 난수를 생성하는 .random() 소수점 첫 째 자리에서 반올림해 정수를 가져오는 .floor() 등)

​

- 변수(Variables)

프로그램에서 재사용이 가능한 데이터를 저장하고 이름과 연결하는 박스이다. 특정 값이 아니다. 메모리에 저장된다.

변수를 이용하는 방법은 다음과 같다:

데이터를 가시적으로 표현하는 이름의 변수 생성 > 해당 변수에 데이터 저장 및 업데이트 > 정보 참조/get

​

- Var

키워드는 구 버전(ES6 이전) JavaScript에서 이용되는 변수 선언 및 생성 키워드이다. 변수 이름은 숫자로 시작할 수 없으며, 대소문자를 구분한다. 동일 이름의 변수 중복 선언은 하지 말자.

​

- Let

키워드는 ES6에서 이용된다. 변수를 다른 값으로 바꿔 값을 저장할 수 있다. 변수 선언 후 값을 주지 않으면 자동 초기화된다.

​

- Const

키워드는 ES6에서 이용된다. Constant의 줄임말. 상수 변수에 모든 값 저장 가능. 변수를 다른 값으로 바꿔 값을 저장할 수 없다.

​

- 수학 할당 연산자 (Mathematical Assignment Operators)

수학 계산을 할 때 이용하는 재할당이 가능한 연산자이다.

1. = (좌측의 변수에 우측의 값을 저장한다)

2. += (좌측의 변수의 값에 기존 값과 우측의 값을 더한 값을 저장함으로써 재할당 한다.)

-=, /=, *=, %= 또한 연산자만 바꿔 동일 의미로 이용할 수 있다.

​

- 증가 및 감소 연산자(The Increment and Decrement Operator)

변수 값을 1씩 증가 혹은 감소시킨다. 변수 선언이 선행되어야 한다. 재할당이 가능하다.

1. ++ (좌측의 변수 값을 1만큼 증가시켜 다시 저장한다.)

2. -- (좌측의 변수 값을 1만큼 감소시켜 다시 저장한다.)

변수와 문자열은 + 연산자로 연결이 가능하다.

​

- 연산자의 종류 (typeof)

임의의 변수에 저장해둔 데이터 유형을 알고자 할 때 이용할 수 있다.

(ex. const A = ‘apple’; console.log(typeof A); >>> 출력 결과는 문자(string)이다. )

 

 

 

 

 

3 : Conditionals

 

 

 

- 조건문(Conditional Statement)

특정 조건을 확인하고 조건에 따라 작업을 수행한다.

​

- if 문

조건을 확인하고 해당 조건이 true라면 작업을 실행한다. 위에서 아래로 순차적으로 실행된다. 구조는 다음과 같다.

if (boolean 조건){ 
	// 참일 경우 실행할 조건문 
} //거짓이라면 아무 일도 일어나지 않는다

 

- 단락 평가

예시를 통해 알아보자.

defaultName = 사용자 이름 || '낯선 사람';

 

해석하자면, 사전에 정의된 defaultName 이 true 이면, 사용자의 이름을 defaultName에 넣는다. 만약 False라면, 옆의 낯선 사람값이 defaultName에 들어간다.

​

- else if 문

if 문 보다 더 많은 조건을 추가할 수 있다. 바로 조건이 false 일 때에 실행할 코드를 추가할 수 있다는 점이다. 거짓으로 판단되는 값으로는 0, “”, ‘’, null, NaN 등이 있다. 구조는 다음과 같다.

If(조건문){ 
	//조건문이 참일 경우 실행하는 코드 
} else if { 
	//조건문이 거짓일 경우 실행하는 코드 
}

이를 간단히 하면 아래의 코드로 작성할 수 있다.

조건문 ? /*조건문이 참일 경우 실행하는 코드*/ : /*조건문이 거짓일 경우 실행하는 코드*/ ;

- 비교연산자(comparison operators)​

두 값을 비교를 돕는다.

1. <, > (미만, 초과)

2. <=, >= (이하, 이상)

3. === , !== (동일, 동일하지 않음)

​

- if... complete 문

제공된 조건에 따라 이진 결정(True/False)을 내리고 다른 코드 블록을 실행한다.

​

- 논리 및 연산자​

1. && 또는 "and"는 제공된 두 식이 모두 True 일 때 전체 조건이 True로 평가되고 실행한다.

2. || 또는 "or"는 제공된 식 중 하나라도 True라면 전체 조건이 True로 평가되고 실행한다.

3. 뱅 연산자!는 True와 False를 반전시킨다. (ex. !이진결과값)

​

- 스위치(switch) 문

여러 개의 if 문을 작성하는 프로세스를 단순화하는 데 사용된다. 구성은 다음과 같다.

let variationName = ‘A’; switch (variationName) { 
	case ‘B’: console.log(‘case B'); 
    break; // 나머지 케이스가 확인되고 실행되지 않도록 한다. 
    case ‘C’: console.log('case C'); 
    break; 
    default: console.log('Invalid variable); 
    break; 
   }

​

 

 

 

4 : Functions

 

 

 

- 함수(Function)

JavaScript의 기본 요소 중 하나로, 여러 번 반복해 작업을 수행할 수 있는 문장의 집합이다. 하나 이상의 값을 전달할 수 있고, 종료 시 값을 반환할 수 있다.

​

- 함수 선언

함수를 만드는 방법이다. 함수를 식별자에 바인딩 한다. 함수 호출을 위해서는 함수 뒤에 괄호를 입력한다. 그 구조는 아래와 같다.

functionName(); 
function functionName () { 
	// 함수의 명령어 및 기능 
} functionName(); //함수 선언

 

- 매개변수(Parameters)

인풋-데이터를 받아들이는 함수도 생성을 가능하게만든다. 매개변수가 선언된 순서를 따라 인수가 전달된다. 매개변수를 포함한 함수의 구성은 아래와 같다.

function functionName(parameter1, parameter2){ 
	//함수의 기능 console.log(parameter1 = parameter2); 
}

​

​

​

​

함수와 매개변수, 다양한 수학, 논리연산자 등의 문법들의 공통점은, 결국 사람의 편의성을 위한다는 점이다. 어셈블리어에서 시간이 지나 더 발전할수록 JavaScript 등의 언어가 더 많은 사람들이 프로그램을 작성하고 편집하기 위해 발전한 것처럼 말이다.​

​

 

 

 

 

 

 

 

 

---

JavaScript