[JavaScript] 자바스크립트 기초 문법

자바스크립트란 무엇인가?

1. 자바스크립트는 C, C++과 반대로 High level의 언어이고, 컴파일언어가 아닌 인터프리터 언어이다.

* High level의 언어: 기계와 멀다. (느리다.)

* 인터프리터 언어: 프로그램이 실행되는 순간 한 줄씩 해석하며 실행한다.

 

2. JavaScript는 ECMAScript 사양을 준수하는 범용 스크립팅 언어이다.

* ECMAScript: javascript를 표준화하기 위해 만들어짐.

* JavaScript와 ECMAScript의 차이 https://wormwlrm.github.io/2018/10/03/What-is-the-difference-between-javascript-and-ecmascript.html

JavaScript와 ECMAScript는 무슨 차이점이 있을까? - 재그지그의 개발 블로그

3. JavaScript는 Multi-paradigm이다.

- 다양한 방식으로 코드를 작성할 수 있다. (object-oriented code or functional code)

 

4. 서버와 클라이언트/브라우저에서 모두 실행이 가능하다.

 

 

자바스크립트 기초 문법

1. console

console.log()
console.warn()
console.error()

 

 

2. 변수 선언 방법

// var, let, const
// var은 사용시 여러 문제가 생길 가능성이 있으므로 사용하지 마라!

 

 

3. Data Type

// string, number, boolean, null, undefined

let name = 'John';
let age = 30;
let isCool = true;
let x = null; // 참고로 typeof null을 하면 object가 나오는 데 진짜 object는 아니다.
let y = undefined;

 

 

4. Template String

let name = 'John';
let age = 30;

// concatnation
console.log("My name is " + name + " and I am " + age);

// Template String
console.log(`My name is ${name} and I am ${age}`);

 

 

5. String properties

let s = "Hello, World"
console.log(s.length)  //12
console.log(s.toUpperCase())  //HELLO, WORLD
console.log(s.toLowerCase())  //hello, world
console.log(s.substring(0, 5))  //Hello
console.log(s.substring(0, 5).toUpperCase())  //HELLO
console.log(s.split(''))  //["H", "e", "l", "l", "o", " ", "W", "o", "r", "l", "d"]

let s = "technology, it, computers";
console.log(s.split(', '))  //["technology", "it", "computers"]

 

 

6. Array - variables that hold multiple values

const numbers = new Array(1,2,3,4,5);
console.log(numbers); //[1,2,3,4,5]

const fruits = ['apples', 'oranges', 'pears'];
console.log(fruits); //['apples', 'oranges', 'pears']


// 추가
fruits[3] = 'grapes'  //신기한 게 const로 변수를 선언했는 데 추가가 됨.
fruits.push('strawberrys');  //뒤에 추가
fruits.unshift('mangos');  //앞에 추가


// 삭제
fruits.pop();

console.log(Array.isArray(fruits));  //true
console.log(fruits);  //['mangos', 'apples', 'oranges', 'pears', 'grapes']
console.log(fruits.indexOf('oranges'));  //2


// Map
const numbers = [1, 2, 3, 4];
const numbers2 = numbers.map((number) => number * 2);
console.log(numbers2) // [2, 4, 6, 8];


// Find (처음으로 찾은 것만 알려줌)
const names = ["김민규", "이순신", "최문경", "최희수"];
const findName = names.find((name) => name.includes("최"))
console.log(findName); // 최문경

let ratings = [6.7, 7.8, 5, 8];
let findRatings = ratings.find((rating) => rating > 7);
console.log(findRatings); // 7.8;


// Filter
ratings = [6.7, 7.8, 5, 8];
findRatings = ratings.filter((rating) => rating > 7);
console.log(findRatings); // [7.8, 8]


// Every and Some
findRatings = ratings.every(rating => rating > 4);
console.log(findRatings); // true;

findRatings = ratings.every(rating => rating > 7);
console.log(findRatings); // false;


// Sort
let sortedRatings = ratings.sort((a, b) => a - b);
console.log(sortedRatings); // [5, 6.7, 7.8, 8]

let sortedRatings = ratings.sort((a, b) => b - a);
console.log(sortedRatings); // [8, 7.8, 6.7, 5]


// Copies
let name = "최문경"
let letters = name.split("");
console.log(letters); // ["최", "문", "경"]

letters = [...name];
console.log(letters); // ["최", "문", "경"]

let names1 = ["이순신"];
let names2 = ["김민규", "최문경"];
let names3 = names1.concat(names2);
console.log(names3); // ["이순신", "김민규", "최문경"];

names3 = [...names1, ...names2];
console.log(names3); // ["이순신", "김민규", "최문경"];

 

 

7. 객체

const person = {
	firstName = 'John',
    lastName = 'Doe',
    age: 30,
    hobbies = ['music', 'movies', 'sports'],
    address: {
    	street: '50 main st',
        city: 'Boston',
        state: 'MA',
    }
}

console.log(person.firstName, person.lastName);  //Jogn Doe
console.log(person.hobbies[2]);  //sports
console.log(person.address.city);  //Boston

const { firstName, lastName, address: { city } } = person;
console.log(firstName);  //Jogn
console.log(city);  //Boston


// 추가
person.email = 'Jogn@gmail.com';

 

 

8. Arrays of Objects

const todos = [
	{
    	id:1,
        text: 'Take out trash',
        isCompleted: true,
    },
    {
    	id:2,
        text: 'Meeting with Boss',
        isCompleted: true,
    },
    {
    	id:3,
        text: 'Dentist appt',
        isCompleted: false,
    },
];

console.log(todos[1].text);  //Meeting with Boss

// convert into JSON
const todoJSON = JSON.stringify(todos);  //very similar but difference is single quote vs double quote

 

 

9. 반복문

for(let i = 0; i < 10; i++) {
	console.log(`For Loop Number: ${i}`);
}

// For Loop Number 0
// For Loop Number 1
// For Loop Number 2
// For Loop Number 3
// For Loop Number 4
// For Loop Number 5
// For Loop Number 6
// For Loop Number 7
// For Loop Number 8
// For Loop Number 9

let i = 0;
while(i < 10) {
	console.log(`While Loop Number: ${i}`);
    i++;
}

// While Loop Number 0
// While Loop Number 1
// While Loop Number 2
// While Loop Number 3
// While Loop Number 4
// While Loop Number 5
// While Loop Number 6
// While Loop Number 7
// While Loop Number 8
// While Loop Number 9


for(let todo of todos) {
	console.log(todo.id);
}

// 1
// 2
// 3

 

 

10. forEach, map, filter

// forEach
todos.forEach(function(todo) {
	console.log(todo.id);
});

// 1
// 2
// 3


// map
const todoText = todos.map(function(todo) {
	return todo.text;
});

console.log(todoText);  //["Take out trash", "Meeting with Boss", "Dentist appt"]


// filter
const todoCompleted = todos.filter(function(todo) {
	return todo.isCompleted === true;
});

console.log(todoCompleted);  //[{...}, {...}]


// filter + map
const todoCompleted = todos.filter(function(todo) {
	return todo.isCompleted === true;
}).map(function(todo) {
	return todo.text;
});

console.log(todoCompleted);  //["Take out trash", "Meeting with Boss"]

 

 

11. 조건문

const x = 10;
const color = x > 10 ? 'red' : 'blue';
console.log(color);  //blue

switch(color) {
	case 'red':
    	console.log('color is red');
        break;
    case 'blue':
    	console.log('color is blue');
        break;
    default:
    	console.log('color is NOT red or blue');
        break;
}

// color is blue;

 

 

12. 함수

function addNums(num1, num2) {
	console.log(num1 + num2);
}
addNums(5, 4);  //9
addNums();  //NaN


function addNums(num1 = 1, num2 = 2) {
	console.log(num1 + num2);
}
addNums();  //3


function addNums(num1 = 1, num2 = 2) {
	return num1 + num2;
}
console.log(addNums()); //3


// Arrow functions
const addNums = (num1 = 1, num2 = 2) => {
	return num1 + num2;
}
console.log(addNums(5,5));  //10

const addNums = (num1 = 1, num2 = 2) => console.log(num1 + num2);
const addNums = (num1 = 1, num2 = 2) => num1 + num2;
const addNums = num1 => num1 + 5;
console.log(addNums(5));  //10

todos.forEach((todo) => console.log(todo));

 

 

13. 객체 지향 프로그래밍

/* ES5 */
// Constructor function
function Person(firstName, lastName, dob) {
	this.firstName = firstName;
    this.lastName = lastName;
    this.dob = new Date(dob);
}


// 함수는 prototype에 넣는 것이 좋다.
Person.prototype.getBirthYear = function() {
    return this.dob.getFullYear();
}

Person.prototype.getFullName = function() {
    return `${this.firstName} ${this.lastName}`;
}


// Instantiate object
const person1 = new Person('John', 'Doe', '4-3-1980');
const person2 = new Person('Marry', 'Smith', '2-12-1981');

console.log(person2.firstName);  //Marry
console.log(person2.getFullName);  //Marry Smith


/* ES6 */
class Person {
	constructor(firstName, lastName, dob) {
      this.firstName = firstName;
      this.lastName = lastName;
      this.dob = new Date(dob);
    }
    
    getBirthYear() {
    	return this.dob.getFullYear();
    }
    
    getFullName() {
    	return `${this.firstName} ${this.lastName}`;
    }
}


class Animation {
	constructor(selector) {
    	this.selector = document.querySeletor(`${selector}`);
    }
    
    fadeOut(time) {
    	this.selector.transition = `all ${time}s ease`;
    	this.selector.opacity = 0;
    }
}

const title = new Animation(".title");
title.fadeOut();

 

 

 

 

참고 영상

https://www.youtube.com/watch?v=hdI2bqOjy3c