거니의 velog

10. 프로토타입과 클래스 (1) 객체 생성자 * 프로토타입과 클래스에 대해서 알아보기 전에 우선 객체 생성자라는 것을 알아보자. 객체 생성자는 함수를 통해서 새로운 객체를 만들고 그 안에 넣고 싶은 값 혹은 함수들을 구현 할 수 있게 해준다. function Animal(type, name, sound) { this.type = type; this.name = name; this.sound = sound; this.say = function() { console.log(this.sound); }; } const dog = new Animal('개', '멍멍이', '멍멍'); const cat = new Animal('고양이', '야옹이', '야옹'); dog.say(); cat.say(); * 객체 생..

9. 배열 내장함수 * 이번에는 배열을 다룰 때 알고있으면 너무나 유용한 다양한 내장 함수들에 대하여 알아보자. (1) forEach * forEach 는 가장 쉬운 배열 내장함수이다. 기존에 우리가 배웠던 for 문을 대체 시킬 수 있다. 예를 들어서 다음과 같은 텍스트 배열이 있다고 가정해보자. const superheroes = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지']; * 만약, 배열 안에 있는 모든 원소들을 모두 출력해야 한다면 for 문을 사용하여 다음과 같이 구현 할 수 있다. const superheroes = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지']; for (let i = 0; i < superheroes.length; i++) { ..

8. 반복문 * 반복문은 특정 작업을 반복적으로 할 때 사용할 수 있는 구문이다. (1) for * for 문은 가장 기본적인 반복문이다. 특정 값에 변화를 주어가면서 우리가 정한 조건이 만족된다면 계속 반복한다. for (let i = 0; i 0; i--) { console.log(i); } * for 문은 이렇게 숫자에 변화를 주어가면서 반복적으로 작업을 실행한다. (2) 배열과 for * 이..

7. 배열 * 이번에는 배열을 배워보자. 이전에 배운 객체는 한 변수 혹은 상수에 여러 가지 정보를 담기 위함이었다면, 배열은 여러 개의 항목들이 들어 있는 리스트와 같다. * 예를 들어서 숫자 배열을 선언해 보자. const array = [1, 2, 3, 4, 5]; * 배열을 선언할 떄는 이렇게 [ ] 안에 감싸주면 된다. * 또한 배열 안에는 어떤 값이던지 넣을 수 있다. 예를 들어서, 객체 배열을 만들어 보자. const objects = [{ name: '멍멍이' }, { name: '야옹이' }]; * 배열을 선언하고 나서, n 번째 항목을 조회하고 싶을 땐 다음과 같이 할 수 있다. objects[n]; * 한 번 다음의 코드를 입력해 보자. const objects = [{ name: '..

6. 객체 * 객체는 우리가 변수 혹은 상수를 사용하게 될 때 하나의 이름에 여러 종류의 값을 넣을 수 있게 해준다. const dog = { name: '멍멍이', age: 2 }; console.log(dog.name); console.log(dog.age); * 객체를 선언 할 때에는 이렇게 { } 문자 안에 원하는 값들을 넣어주면 된다. 값을 집어 넣을 때에는 키: 원하는 값 형태로 넣으며, 키에 해당하는 부분은 공백이 없어야 한다. 만약에 공백이 있어야 하는 상황이라면 이를 따옴표로 감싸서 문자열로 넣어주면 된다. const sample = { 'key with space': true }; * 한번 영화 어벤져스의 캐릭터 아이언맨과 캡틴 아메리카의 정보를 객체 안에 집어넣어 보자. const i..

5. 함수 * 함수는, 특정 코드를 하나의 명령으로 실행할 수 있게 해주는 기능이다. * 예를 들어서, 우리가 특정 값들의 합을 구하고 싶을 때는 다음과 같이 코드를 작성한다. const a = 1; const b = 2; const sum = a + b; // 3 * 한번, 이 작업을 함수로 만들어 보자. function add(a, b) { return a + b; } const sum = add(1, 2); console.log(sum); // 3 * 결과는 3이 된다. * 함수를 만들 때는 function 키워드를 사용하며, 함수에서 어떤 값을 받아올지 정해주는데 이를 파라미터(매개변수)라고 부른다. * 함수 내부에서 return 키워드를 사용하여 함수의 결과물을 지정할 수 있다. * 추가적으로,..

4. 조건문 * 조건문을 사용하면 특정 조건이 만족되었을 때 특정 코드를 실행할 수 있다. (1) if 문 * 가장 기본적인 조건문은 if 문이다. * if문은 "~~하다면 ~~을 해라"를 의미한다. const a = 1; if (a + 1 === 2) { console.log('a + 1 이 2 입니다.'); } * 결과는 "a + 1 이 2 입니다." 이 출력된다. * 하지만, 만약에 여기서 a 를 0 으로 바꾼다면 어떨까? const a = 0; if (a + 1 === 2) { console.log('a + 1 이 2 입니다.'); } * 결과는 아무 것도 출력되지 않는다. * if 문을 사용하면 이렇게 특정 조건이 만족될 때에만 특정 코드를 실행 시킬 수 있다. if (조건) { 코드; } * ..

3. 연산자 * 연산자에 대해서 알아보자. * 연산자는 프로그래밍 언어에서 특정 연산을 하도록 하는 문자이다. * 예를 들어서, 우리가 변수와 상수를 배울 때 다음과 같은 코드를 작성했다. let value = 1; // 변수 선언 value = 2; // 대입 연산자 * 여기서 두 번째 줄에서 사용된 = 문자가 바로 연산자(operand)이다. 연산자의 종류는 굉장히 많지만, 그 중에서 = 은 대입연산자에 해당한다. 첫 번째 줄은 새로운 변수를 선언하는 것으로서, 대입 연산자에 해당하지 않는다. (1) 산술 연산자 * 산술 연산자는 사칙연산과 같은 작업을 하는 연산자를 의미한다. + : 덧셈 - : 뺄셈 * : 곱셈 / : 나눗셈 * 위 4가지가 가장 기본적인 산술 연산자이다. 이 외에도 몇가지가 더 ..

2. 변수와 상수 * 변수와 상수에 대해 알아보자! 변수와 상수는, 특정 이름에 특정 값을 담을 때 사용하는 "그릇"이라고 보면 된다. * 예를 들어서 우리가 value 라는 이름에 1 이라는 값을 넣는다고 가정해 보자. 그러면, 코드를 이렇게 입력하면 된다. let value = 1; * 우리가 앞에서 배웠던 console.log()로 value를 조회하면 1을 가르키게 된다. let value = 1; console.log(value); * 특정 이름에 특정 값을 설정하는 것. 우리는 이것을 "선언"이라고 부른다. 쉽게 말하면 "이제부터 value는 1이야~" 라고 정해주는 것이다. * 값을 선언할 때는 두 가지 종류가 있는데, 하나는 변수이고, 하나는 상수이다. (1) 변수 * 변수는 바뀔 수 있는..

* 2020년대 이후 웹 개발에 사용되는 트렌드에 걸맞는 JS를 배운다는 의미의 Modern JavaScript 를 배워보자 [배움의 목표] 1. 프로그래밍 초보자 가능 2. 자바스크립트 기초를 아시는 분들도 가능 3. 특히 React, Angular, Vue 등의 웹 프레임워크 및 라이브러리를 공부하기 전에 익혀두면 좋다. 4. 그리고, Node.js 를 통해 백엔드 개발을 하기 전에도 도움이 될 수 있다. 1. 자바스크립트 입문 [JavaScript란 무엇일까?] * JavaScript는 웹 브라우저에서 사용하기 위해 만들어진 인터프리터 프로그래밍 언어이다. 이 언어는 90년대 부터 주로 웹 브라우저 상에서 UI를 동적으로 보여주기 위해 사용해 왔다. 기존에는 브라우저에만 사용했지만, 이제는 단순히 ..