우든이 블로그

자바스크립트는 단일 스레드 언어입니다. ✓ 스레드는 프로그램이 작업을 완료하는데 사용할 수 있는 단일 프로세스입니다. 각 스레드는 한 번에 하나의 작업만 수행할 수 있습니다. # 동기와 비동기 동기적 방식(Synchronous)은 하나의 이벤트가 모두 끝난 후에 다음 이벤트를 수행하는 방법입니다. 실행 순서가 확실히 존재해요! 반대로 비동기적 방식(Asynchronous)은 여러 개의 이벤트를 담은 후에 완료되는 이벤트 순으로 일을 처리하는 방법입니다. 자바스크립트에서는 아래와 같이 3가지 방법을 사용하여 비동기 처리를 할 수 있습니다. 콜백 함수 Promise async 와 await # 콜백 함수 먼저 함수의 반환 값을 받습니다. 그리고 다음 비동기 처리를 해야 하는 다음 함수를 콜백으로 받아 비동기..

# filter filter는 주어진 함수를 통과하는 모든 요소를 모아 새로운 배열을 반환합니다. 아래와 같이 여러 과일이 담겨 있는 배열이 있습니다. 첫번째 filter조건은 각 요소의 길이가 6보다 큰 경우를 만족하는 요소를 모아 새로운 배열을 반환해줍니다. 두번째 filter조건은 요소의 길이가 6보다 작은 경우를 만족하는 요소들을 모아 출력해줍니다. const fruits = ["banana","apple","strawberry", "orange"]; console.log(fruits.filter(fruits => fruits.length > 6)); // ['strawberry'] console.log(fruits.filter(fruits => fruits.length < 6)); // ['ap..

# forEach forEach은 기존에 사용했던 for문을 대체하여 사용할 수 있는 반환 값이 없는 배열의 내장 함수입니다. const animals = ['Dog', 'Rabbit', 'Pig']; const copyAnimals = []; // for문 for (let i=0; i square.push(num * num)); console.log(square); // [1, 9, 25, 81] 다음은 map을 사용하여 작성한 코드입니다. map을 사용하면 forEach를 사용했을 때보다 좀 더 간단하게 작성할 수 있습니다. const oddNum = [1, 3, 5, 9]; const square = oddNum.map(num => (num * num)); console.log(square); //..

# 배열 (Array) 배열이란, 데이터의 순서가 있는 집합으로 여러 개의 값들을 저장하는데 사용됩니다. 다음과 같은 방법을 사용해 배열을 선언할 수 있습니다. const arr01 = new Array(); const arr02 = []; 또한, 배열안에는 어떤 값이든 추가해줄 수 있습니다. const oddNum = [1, 3, 5, 7]; const animal = ["Dog", "Rabbit", "Pig"]; const people = [{name : "송우든"},{name : "먹깨비"},{name : "권수염"}]; // 2차원 배열 const arr2d = [[123],[234],[345], [456],[567],[789]]; 자바스크립트에서 배열의 인덱스는 0부터 시작합니다. 우리는 배열의..

# Spread spread는 이름과 같이 객체 또는 배열을 펼쳐 새로운 객체나 배열을 만들 수 있습니다. 다음과 같은 코드가 있습니다. person01과 person02 객체에는 country : "KOREA" 라는 공통된 속성이 포함되어 있는데요. const person01 = { country : "KOREA", gender : "Female", age : 24 }; const person02 = { country : "KOREA", gender : "Male", age : 26 }; console.log(person01); console.log(person02); 이런 공통된 내용을 spread를 사용하여 좀 더 간편하게 코드를 작성할 수 있습니다. spread 연산자는 ... 문자로 표현합니다...

# 객체 비구조화 할당 객체 비구조화 할당은 ES6에서 추가된 문법으로 객체나 배열의 값을 새로운 변수에 간단히 대입시켜주는 문법입니다. 객체 비구조화 할당을 사용하면 코드를 좀 더 간단하고 보기 좋게 작성할 수 있습니다. 이 문법은 객체 구조 분해라고 불리기도 합니다. 다음과 같이 학생의 정보를 출력해주는 함수가 있습니다. print()는 student 객체를 매개변수로 받습니다. . 을 이용해 객체의 속성값을 가져올 수 있습니다. const student01 = { name : "AAA", grade : 2, department : "컴퓨터공학과" }; const student02 = { name : "BBB", grade : 3, department : "화학과" }; const print = (s..

# 객체 동적 바인딩 객체 동적 바인딩이란, 객체를 생성한 후에 property(속성)을 추가. 수정, 삭제해주는 것을 말합니다. 먼저, 객체의 속성을 변경할 때에는 아래와 같은 방법을 이용해 변경할 수 있습니다. // person 객체 생성 const person = { name: "송우든", age: 24, favoriteFood: "떡볶이" }; // 속성 변경 person.favoriteFood = "치킨"; console.log(person); // 출력 : { name: '송우든', age: 24, favoriteFood: '치킨' } 마찬가지로 객체의 속성을 추가해줄 때도 같은 방법을 사용합니다. // 속성 추가 person.major = "ComputerScience"; person.gre..

# 객체 객체란, 순서가 없는 집합, key(키)와 value(값)로 이루어진 속성들의 집합입니다. 아래와 같이 {} 중괄호를 사용하여 객체를 생성할 수 있는데요! 이런 방법으로 객체를 생성하는 것을 객체 리터럴이라고 합니다. const person = {}; 이렇게 내용이 없이 객체를 생성했을 때는 [object Object]와 같이 빈 객체를 생성할 수 있습니다. {...} 중괄호 안에 사용할 데이터와 함수를 담을 수 있는데, 이를 property(속성)라고 합니다. const person = { name : "송우든", age : 24, "favorite food" : "떡볶이" }; console.log(person); // 출력 : {name : '송우든', age : 24, 'favorite ..

# for 문 for문은 초기식, 조건식, 증감식을 포함하는 반복문으로 조건식을 만족하는 동안에 반복된 작업을 수행합니다. for(let index = 0; index < 10; index ++){ console.log(index); } // 출력 : 0 1 2 3 4 5 6 7 8 9 # for...in 문 for...in문은 객체 안에 속성을 조회하는데 사용하는 반복문입니다. 다음과 같이 표현할 수 있습니다. for(변수명 in 객체명){ // 실행 내용; } for...in문은 객체의 key와 value값을 뽑을 때 유용하게 사용할 수 있습니다. // person 객체 const person = { name : "송우든", age : 24 }; // for...in문 for(key in person..

# 클로저(Closure) 클로저란, 이론적으로는 독립적인 변수를 가리키는 함수, 내부 함수가 외부 함수의 환경을 기억하는 것을 말합니다. 아래의 코드를 예로 들자면, function outter(){ // 외부 함수에 정의된 지역변수 let str = "Closure!"; function inner(){ return str; } return inner(); } let result = outter(); console.log(result); // 출력 : Closure! 내부 함수(inner())는 외부 함수(outter())에 정의된 지역변수에 접근이 가능한데요. 이로 인해 외부 함수가 return문을 만나 종료됐음에도 불구하고 다음과 같이 내부 함수가 외부 함수의 변수에 접근할 수 있습니다. 이것을 클..