신입개발자

식별자란? 식별자란 변수, 함수, 클래스 등 이름은 모두 식별자입니다 식별자는 어떤 값을 구별해서 식별할 수 있는 고유한 이름을 말합니다 식별자는 값이 저장되어있는 메모리 주소와 매핑 관계를 맺으며, 이 매핑 정보도 메모리에 저장이 되어야 합니다 이처럼 식별자(변수)는 값이 아니라 메모리 주소를 기억하고 있습니다 즉 식별자는 메모리 주소에 붙인 이름이라고 할 수 있습니다 식별자는 3가지 네이밍 규칙을 준수해야 합니다 식별자는 특수문자를 제외한 문자, 숫자, 언더바( _ ), 달러 기호($)를 포함할 수 있습니다 식별자의 특수문자를 제외한 문자, 언더바, 달러 기호로 시작해야 합니다 숫자로 시작되는 것은 허용되지 않습니다 예약어는 식별자로 사용할 수 없습니다 JS 예약어 await break case ca..

async/await 란? async/await 는 javascript에서 promise를 더욱 쉽게 사용할 수 있도록 서포트해주는 문법입니다 // promise 를 만드는 함수 function sleep(ms){ // 파라미터 ms 이후에 resolve를 호출해 promise가 끝이납니다 return new Promise(resolve => setTimeout(resolve, ms)); } // async / await 문법을 사용할때는 앞에 async 표기 async function process(){ console.log('안녕하세요;'); // promise의 앞부분에 await를 붙여줘야합니다 // promise를 기다리는 작업을.then 을 쓸필요가 없어집니다 await sleep(1000);..

Promise 란? Promise는 비동기 작업을 좀 더 수월하게 처리할 수 있도록 ES6에 도입된 기능입니다 이전에는 비동기 잡얼을 처리해야 할 때 이 작업이 끝나고 어떤 작업을 처리해야 할 때 콜백 함수로 처리를 해줬어야 했는데 콜백 함수가 많이 질 경우 코드가 난잡해졌었습니다 그래서 Promise가 추가 가 되었습니다 원래는 라이브러리였는데 이후에는 javascript에 추가가 된 기능입니다 콜백 함수가 난잡한 코드 // 숫자 n을 파라미터로 받아와서 5번을 걸쳐 1초마다 1씩 더하는 함수 function increaseAndPrint(n, callback) { setTimeout(() => { const increased = n + 1; console.log(increased); if(callba..

1. 동기적(Synchronous) 동기적으로 작업을 처리한다면 1번이 작업중이라면 2번은 작업 준비상태이고 1번이 끝이 나야 2번이 작업을 합니다 2. 비동기적(Asynchronous) 비동기적으로 작업을 처리한다면 동시에 여러가지 작업을 처리할 수도 있고 기다리는 과정에서 다른 함수를 호출할 수도 있습니다 예시 동기적 function work() { const start = Date.now(); // 현제 시간을 표시해줍니다 for(let a = 0; a < 100000000; a++){} const end = Date.now(); console.log(end - start + 'ms'); } work(); // 521ms console.log('다음작업'); // 다음작업 코드윗줄부터 순서대로 실행..

1. spread와 rest-spread 연산자(ES6의 도입) // spread 펼치다 퍼트리다 라는뜻을 가지고 있습니다 // 기존 객체를 포함한 새로운 객체를 만들고 싶을때 spread 연산자를 사용할수 있습니다 const slime = { name: '슬라임' }; const cuteSlime = { name: '슬라임', attribut: 'cute' } const purpleCuteSlime = { name: '슬라임', attribut: 'cute', color: 'purple' } console.log(slime); // Object {name: "슬라임" } console.log(cuteSlime); // Object {name: "슬라임", attribut: "cute"} console...

1. 삼항연산자 condition ? true : false // 조건 ? 결과가 true 일시 : 결과가 false 일시 2. Truthy and Falsy // Falsy 한 값 : false와 비슷한 값 console.log(!undefined); // true console.log(!null); // true console.log(!0); // true console.log(!''); // true console.log(!NaN); // true console.log(!false); // true // Truthy 한 값 : true와 비슷한 값 console.log(!3); // false console.log(!'hello'); // false console.log(!['array']); //..

객체는 한 변수 안에 여러 가지 값을 담기 위해 사용했다면 배열은 여러 개의 항목들이 들어 있는 리스트와 같습니다 js에서의 배열은 배열 속 값들이 전부 똑같을 필요는 없습니다 첫 번째는 문자열, 두 번째는 숫자형, 세 번째는 불린 형으로 담을 수 있습니다 객체와는 다르게 선언할때 { } (중괄호)가 아닌 [ ] (대괄호)로 선언합니다 // 숫자, 문자, 논리, 객체, 배열 const array = [1, 'array', true, {}, []] 배열 안에 값을 꺼낼때는 index(인덱스) 값으로 꺼내는데 인덱스 순서를 0번부터 시작합니다 const array = [1, 'array', true, {name: '멍멍이'}]; console.log(array[0]); // 결과 : 1 console.log..

객체 안에는 Getter함수와 Setter함수를 설정할 수 있습니다 Getter함수와 Setter함수를 사용하게 되면 특정값을 바꾸려고 하거나 변경하려고 할 때 원하는 코드를 실행할 수 있습니다 Getter 함수 const number = { a: 1, b: 2, get sum() { console.log('sum 함수가 실행되었습니다'); // get함수에서는 어떠한값을 무조건 반환해줘야합니다 return this.a + this.b; // this가 속한객체의 a(1)와 b(2) } }; number.a = 5; console.log(number); // 결과 Object { a: 5, b: 2} console.log(number.sum); // 결과 'sum 함수가 실행되었습니다', 7 number..

const dog = { name: '멍멍이', sound: '멍멍!', // say 라는 함수 입니다 함수를 다르게 표현할수도 있습니다 say: function say(){ console.log(this.sound); } // function 뒤에 함수 이름을 지울수도 있고 say: function(){ console.log(this.sound); } // function 이라는 키워드를 지울수도 있습니다 say(){ console.log(this.sound); } // 화살표 함수로 표현이 가능하지만 this를 사용하지 못합니다 say: () => { console.log(this.sound); } } 함수 내부에 this는 함수가 위치한 객체 자기 자신(dog)을 가리킵니다 하지만 화살표 함수는 t..

const ironMan = { name: '토니 스타크', actor: '로버트 다우니 주니어', alias: '아이언맨', }; const captainAmerica = { name: '스티븐 로저스', actor: '크리스 에반스', alias: '캡틴 아메리카', }; function print(hero) { // hero라는 이름으로 객체형태의 파라미터를 받아와 사용 const text = `${hero.alias}(${hero.name})역할을 맡은 배우는 ${hero.actor} 입니다` console.log(text); } print(ironMan); print(captainAmerica); 객체 형태의 파라미터를 사용할 때 hero.name, hero.alias, 처럼 앞에 hero 가 ..