월드스토리의 코딩 나라

map() 함수• map()의 인자로 넘겨지는 callback 함수를 실행한 결과를 가지고 새로운 배열을 만들 때 사용.• map() 함수를 필요에 따라 반복문처럼 사용할 수도 있음.• 리엑트의 return 문 내부에서  사용이 가능한 것이 가장 큰 특징 map() 함수 문법용어 의미callbackFunction• 새로운 배열의 요소를 생성하는 함수로, currentValue, index, array 3개의 인 수를 가질 수 있다.[this.Arg]•  필요 없으면 생략이 가능하며, callbackFunction에서 사용할 this 객체를 의미함  map() 함수의 사용 방법txtlist 를 순서대로 돌면서 나오는 값id방금 나온 값(txt)의 인덱스arr현재 반복을 돌고 있는 배열key• 기존 요소와 ..

setTimeOut(함수, 지연시간) 설정한 delay 시간이 지난 뒤, 함수를 실행함 비동기 처리란?☆특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성☆서버로 데이터를 요청 시 서버가 언제 응답을 줄 지 모르는데 마냥 다른 코드를 실행 안하고 기다릴 수는 없음☆ 비동기 처리가 아니고 동기처리라면 코드 실행하고 기다리고, 실행하고 기다리고하면 수십분이 소요될 수 있음  비동기로만 처리 시 나타날 수 있는 문제점function goMart() { console.log("마트에 가서 어떤 음료를 살지 고민한다."); } function pickDrink() { setTimeout(function () { console.log("고민 끝"); ..

클래스란?• ES6 부터 등장한 오브젝트(객체)를 만드는 방법• 오브젝트(객체)를 만들 수 있는 ‘틀’(template)• 정해진 틀로 같은 규격의 오브젝트를 여러 개 만들 수 있으며, 재사용에 유리•  new 키워드를 이용해서 미리 만들어둔 클래스 형태의 오브젝트를 만들 수 있음 (instance 화)•  Date, Math 객체도 동일한 의미의 클래스   클래스의 사용 방법class Cat { constructor(name, age) { this.name = name; this.age = age; } mew() { console.log("야옹"); } eat() { console.log("먹이를 먹습니다."); } } let cat1 = new cat("나비", 1..

spread 연산자(.. : 전개 구문)• 반복 가능한객체에 사용하는 문법→배열, 유사 배열, 문자열 등에 사용 가능• 객체의 요소에 접근해서 요소들을 하나씩 분리해서 전개요소에 접근해서 반환• 연산자 ... 사용• 사용법 : [...arr, newarr] rest 파라미터const values = [10,20,30];function get(a, ...rest) { console.log(rest);}get(...values); 들어온 배열 값 중 하나를 제외한 나머지를 rest라는 배열로 설정함  spread vs rest• spread 파라미터는 호출시 함수의 파라미터에 사용• rest 파라미터는 호출 받는 함수의 파라미터에 사용 (선언 부분). 호출하는 함수의 파라미터 순서에 맞춰 값 설정 후 남은 ..

구조분해 할당 ( Destructuring assignment )배열이나 객체의 속성을 해체해 그 값을 개별변수에 담는 것 JavaScript에서 많이 쓰이는 자료구조인 배열과 객체를 편하게 사용하기 위함 즉, 객체나 배열에 저장된 데이터의 일부를 가져오고 싶을 때 주로 사용  배열의 구조 분해 할당const arr5 = ['tomato', 'kiwi', 'banana']; const [tomato, kiwi, banana, orange = "orange"] = arr5; console.log(tomato); let x=1, y=3; [x, y] = [y, x] console.log(x,y); // x = 3, y = 1 arr[0], arr[1] 처럼 접근하는 것이 아닌 각각의 배열 요소를 변수의..

DOM(Document Object Model) • HTML 문서 요소의 집합!• HTML 문서는 각각의 node 와 object 의 집합으로 문서를 표현• 따라서 각각 node 또는 object 에 접근하여 문서 구조 / 스타일 / 내용 등을 변경 할 수 있도록 하는 것 Document웹 페이지에 존재하는 HTML 요소에 접근하여 행동을 하고자 할 때 사용하는 객체 Document 요소 선택하는 법 태그 용어의미• document.getElementById(아이디 속성값)태그의 Id 속성값이 특정값인 녀석을 가져온다.• document.getElementsByClassName(클래스 속성값)태그의 클래스 속성값이 특정값인 태그를 선택한다.• document.getElementsByTagName(태그 이..

Javascript 표준 객체자바스크립트가 기본적으로 가지고 있는 도구라고 보면 된다.Date 객체매 순간 바꾸는 시간과 날짜에 관한 정보를 얻기 위해 사용하는 객체초기화 방법new Date(); //1970년1월1일을 default로 가지는 객체 반환new Date(밀리초); //1970년1월1일부터 특정 시간만큼 지난 날짜 반환new Date(년, 월, 일, 시, 분, 초); //특정 시간으로 초기화하여 반환 Date 객체를 변수로 사용 가능한 함수 함수의 표현함수의 의미 Date.now()현재 년도, 월, 일, 시간까지 반환 date.getFullYear() date  값이 가지는 년도 반환date.getMonth()0~11사이의 숫자로 월을 표시(0 = 1월)date.getDate()1~31사이의..

기본 for문 let numbers= [1, 2, 3, 4, 5, 6]; let fruits= ["사과", "바나나", "수박", "포도", "파인애플"]; for(let i= 0; i for of 반복문 let numbers= [1, 2, 3, 4, 5, 6]; let fruits= ["사과", "바나나", "수박", "포도", "파인애플"]; let numbersLength= numbers.length; let fruitsLength= fruits.length; for(let number of numbers) { console.log(number); } for(letfruitoffruits) { console.log(fruit); } forEachlet numbers = [1, 2, 3, 4, 5, ..

문자열에서 사용 가능한 메소드내장메소드메소드의 의미length문자열의 길이를 반환toUpperCase()문자열 전체를 대문자로 변경toLowerCase()문자열 전체를 소문자로 변경indexOf("")몇번째 인덱스인지 숫자로 반환slice(start, end)start 인덱스부터 end-1 인덱스까지의 값을 빼냄replace(문자열1, 문자열2)문자열의 특정 값을 찾아 제일 먼저 나온 녀석을 문자열2로 변경함replaceAll(문자열1, 문자열2)문자열1을 전부찾아서 문자열 2로 바꿔줌repeat(n)문자열에 대해 n번 반복trim()문자열의 양끝 공백 없애기split()매개변수로 들어온 문자열을 문자 단위로 쪼개서 배열로 만듬

1. 연산자의 개념연산자는 코드에서 값을 계산하거나 평가하는 데 사용됩니다. 대표적인 예로는 산술 연산자, 할당 연산자, 비교 연산자 등이  존재합니다..참고 문서: MDN 자바스크립트 연산자2. 값과 표현식리터럴 (Literal)리터럴은 코드에서 값을 나타내는 표기법입니다.숫자 리터럴: 1, 123문자열 리터럴: 'hello', "world"템플릿 리터럴: 안녕, ${name}함수 리터럴: function() {}표현식 (Expression)값으로 평가될 수 있는 코드를 의미합니다.let b; // 선언문b = 2; // 표현식, 할당문let a = b = 2; // 표현식console.log(a); // 2 출력 3. 산술 연산자 (Arithmetic Operators)산술 연산..