프로토 타입 (Prototype)자바스크립트는 클래스 기반 언어와 달리, 프로토타입 기반 언어이다. 자바스크립트의 모든 객체(Object)는 자신의 부모 역할을 하는 개체와 연결되어 있는데, 이 부모 객체를 프로토타입(Prototype) 이라고 부른다.쉽게, 자식(객체)이 어떤 기능을 가지고 있지 않다면, 부모(프로토타입)에 가서 이 기능 있는지 확인 후 가져온다고 생각하면 될 듯하다. 생성자 함수를 통해 이해하기먼저 Person 이라는 사람을 만드는 함수를 만든다고 가정해보자.// 생성자 함수 (사람을 만드는 틀)function Person(name, age) { this.name = name; this.age = age;}이때, Person 함수가 만들어질 때, Person.prototype이라는..

심볼 (Symbol)자바스크립트에서 객체(Object)의 프로퍼티 키는 보통 문자열로 취급된다.예를 들어 숫자 1, 불리언 false를 키로 써도 내부적으로는 "1", "false" 같은 문자열 키가 된다. 그런데 협업/라이브러리 사용 상황에서 내가 추가하는 키가 기존 키와 충돌하면 문제가 생길 수 있다.이때 Symbol은 매번 새로 만들어지는 고유한 값이라서, 키 충돌을 원천 차단하는 용도로 쓴다.Symbol 만드는 법: Symbol()심볼은 객체가 아니라 원시 타입(primitive)이라서 new Symbol()처럼 new키워드를 쓰지 않는다.const a = Symbol('id');const b = Symbol('id');console.log(a === b); // falseSymbol('id)의 ..

계산된 프로퍼티일반적인 객체는 이렇게 고정된 키를 쓴다.const user = { name: "Mike", age: 30}; 그런데 이 키 이름을 변수나 식으로 만들고 싶을 때가 있다.그때 사용하는 것이 대괄호[ ] 이다.let a = "age";const user = { name: "Mike", [a]: 30, // a가 "age" 이므로 결과는 age: 30 [1 + 4]: 5, // "5": 5 (숫자 계산 결과가 키가 됨) ["굽네" + "치킨"]: "hello" // "굽네치킨": "hello"}; 왜 유용한가?함수로 원하는 키를 받아 객체를 만들어 낼 수 있다.function makeObj(key, val) { return { [key]: v..

우리는 개체 만드는 것을 배웠다.let user = { name : 'Mike'; age : 30;}이렇게 만든 것을 객체 리터럴 이라고 한다. 그런데 개발을 하다 보면 비슷한 객체를 여러 개 만들어야 되는 상이 발생한다.이때, 필요한 것이 생성자 함수이다.생성자 함수생성자 함수는 다음과 같이 작성한다.function User(name, age) { this.name = name; this.age = age;}let user1 = new User('Mike',30);let user2 = new User('Jane',22);let user3 = new User('Tom',17);생성자 함수는 보통 첫글자를 대문자로 해 함수를 만든다.new 연산자를 사용해 함수를 호출한다.생성자 함수에..

변수기초 시간에 let, const를 배워보았다. 이번엔 var 키워드에 대해서 알아보자.varvar는 한번 선언된 변수를 다시 선언이 가능하다.var name = 'Mike';console.log(name); // Mikevar name = 'Jane';console.log(name); // Jane이와 같이 name이 2번이 선언되어도 오류가 발생하지 않는다.같은 상황에서 let은? 오류를 발생시킨다. var는 선언하기 전에도 사용이 가능하다console.log(name); // undefinedvar name = 'Mike';오류를 발생시키지 않는데 이유가 뭘까? var는 아래 코드와 같이 동작한다.var name;console.log(name);name = 'Mike';var로 선언한 모든 변수..

배열학생 관리와 같은 순서가 있는 데이터를 관리할 때 학생 개개인을 개별 변수로 만드는 것은 비효율적이다.변수명도 기억해야 하고, 학생 수도 파악하기에는 어렵다. 이러한 상황에서 순서가 있는 리스트를 효율적으로 관리하기 위해 배열을 사용한다. 배열은 여러 데이터를 묶어주고, 번호(인덱스)를 이용해 하나씩 접근하거나 수정할 수 있게 해준다. 배열?배열은 순서가 있는 리스트로 생각할 수 있다EX) 1번 철수, 2번 영희let students = ['철수', '영희',... '영수']배열은 []로 묶이며 , (쉼표)로 구분한다.[] 안에 있는 값들을 인덱스라고 하며 0번부터 시작한다 ex) 철수는 인덱스 0, 영희는 인덱스 1...배열의 특징배열은 숫자뿐만 아니라 문자, 객체, 함수 등 다양한 데이터 유형을 ..

객체관련 있는 정보들을 하나로 묶어 관리하기 위한 자료 예를 들어, 어떤 사람 '슈퍼맨' 대한 정보(name, age 등) 여러 개라고 치면 각각 따로 변수로 두는 대신 객체 하나로 두어 묶으면 관리가 편리하다.객체 기본 구조객체는 중괄호 {}로 만들고, 그 안에 키(key)와 값(value) 쌍으로 구성한다. 다음 코드를 예시를 들어보자const superman = { name: 'clark', age: 33,};name과 age는 키(key)'clark'과 33은 값(value)이런 key : value 한 묶음이 프로퍼티(property)라고 한다.객체 접근객체 값에 접근하는 방법은 대표적으로 2가지가 있다 1. 점 표기법superman.name // 'clark'superman.age //..

앞서 배운 함수에 대해 다시 한번 짚고 가보자function sayHello() { console.log("Hello");}sayHello();function 키워드를 사용해 함수를 정의함수 이름 sayHello 가지고 있으며위치에 상관없이 호출이 가능이 처럼 함수를 정의하는 것이 함수 선언문 이다.함수 표현식함수는 값(value) 이기 때문에 변수에 담을 수 있다.const sayHello = function() { console.log("Hello");};sayHello();함수를 변수에 저장함수 이름이 없다변수에 할당된 이후에만 호출 가능이러한 방식이 함수 표현식이다.함수 선언문 vs 함수 표현식함수 선언문sayHello();function sayHello() { console.log("Hel..

서비스를 만들다 보면 같거나 비슷한 동작들이 생기기 마련이다.이런 비슷한 동작들을 자주 사용하거나 여러 곳에서 사용한다면 하나로 만든 다음 재활용 하는게 편리하다. 함수 자주 반복되는 동작을 한 곳에 모아 놓은 코드 묶음이고, 필요할 때 호출하는 방식으로 사용가능하다. 함수의 장점은 코드 재사용성과 유지보수성이 크게 좋아진다. 함수는 fuction 이라는 키워드를 사용하며, 기본 구조는 아래와 같다.function 함수명(매개변수1, 매개변수2, …) { // 수행할 작업}정의한 함수는 함수명 뒤에 괄호를 붙여 호출이 가능하다.function sayHello(name) { console.log(`Hello, ${name}`);}sayHello('Yeon');이 코드는 sayHello 라는 함수..

반복문동일한 작업을 여러 번 반복for조건이 False가 될 때까지 반복//for(초기값; 조건; 코드 실행 후 작업)for(let i = 0; i for 내부를 살펴보자i = 0이고 i 가 10보다 작으므로 코드를 실행시킨 후 i 값 1 증가 >>> (반복) while마찬가지로 조건이 False가 될 때까지 반복// while(조건)let i = 0;while (ido - whilewhile문 과의 차이점은 do-while은 조건을 나중에 확인하므로 무조건 코드를 한 번은 실행시킴// do {실행코드} while(조건);let i = 0;do { console.log(i); i++;} while(ibreak와 continuebreak: 멈추고 빠져 나옴continue: 멈추고 다음 반복으로 진행/..