들어가며JavaScript로 개발을 하는 대부분의 프론트엔드 개발자 분들은 setTimeout 함수를 사용해본 경험이 있으실 거라고 생각합니다. 주로 일정 시간 후에 코드를 실행하거나, 애니메이션 효과를 구현하는데에도 종종 사용하는 함수이죠. 이 setTimeout 함수를 setTimeout(fn, 0)과 같이 사용하면 함수가 즉시 실행될까요? 직관적으로 생각해보면 즉시 실행될 것 같지만, 실제로는 그렇지 않기 때문에 많은 입문 개발자들에게 혼란스럽게 다가올 수 있을 것 같습니다. 이 현상을 이해하려면 JavaScript의 이벤트 루프와 비동기 처리 메커니즘을 살펴볼 필요가 있습니다. 이 개념들은 JavaScript에서 작업들이 어떻게 처리되고, 실행 순서를 어떻게 결정하는지 설명해주는 원리인데요. 이 ..
React 를 공부하다가 '비구조화 할당' 이라는 개념에 대해서 확실히 정리하고 넘어가고 싶어져서 쓰는 포스팅! 비구조화 할당이란 비구조화 할당(Destructuring Assignment)은 배열이나 객체의 속성을 해체해서 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 의 표현식이다. 쓰는 이유 이는 배열이나 객체의 속성을 쉽게 꺼내서 변수에 할당할 수 있으므로 더 간결하고 가독성이 높은 코드를 작성할 수 있다 예시 예를 들어 다음과 같은 객체가 있을 때, const person = { name: 'John', age: 30, gender: 'male' }; 이 객체의 속성을 꺼내서 개별 변수에 할당하려면 다음과 같이 할 수 있다. const name = person.name; const..
코드의 재활용성을 높이고 유지보수를 쉽게 할수 있는 방법에는 여러가지가 있다 그중에 하나가 하나의 코드를 여러개의 파일로 분리하는 것이다 장점은.. -자주 사용되는 코드를 별도의 파일로 만들어서 필요할 때마다 재활용할 수 있다 -코드를 개선하면 이를 사용하는 모든 애플리케이션의 동작이 개선된다 -필요한 로직만을 로드해서 메모리의 낭비를 줄일 수 있다 순수 자바스크립트에서는 모듈이라는 개념이 분명하게 있는건 아니지만 js가 구동되는 호스트환경(구동되는 환경)에 따라서 다른 모듈화 방법이 제공된다 여기 생활코딩에서 나오는건 웹브라우저에서 로직을 모듈화 하는 방법을 알아볼것임 이런 코드가 있다고 가정하자 welcome 함수가 필요할때마다 정의해서 사용하는건 낭비가 된다 함수 welcome을 모듈..
배열에서는 인덱스로써 숫자를 이용했다 만약에 인덱스로 문자를 사용하고 싶으면 객체(dictionary)를 사용해야한다 다른언어에서의 딕셔너리라는 데이터 타입이 객체에 해당한다. 객체는 이렇게 만든다 var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80}; egoing은 key가 되고 10은 value 이다 객체를 만드는 또다른 방법은 다음과 같다 var grades = {}; grades['egoing'] = 10; grades['k8805'] = 6; grades['sorialgi'] = 80; var grades = new Object(); grades['egoing'] = 10; grades['k8805'] = 6; grades['sorialgi'..
데이터를 모아서 통으로 관리하고 싶다면 배열을 이용하면 된다 var member = ['egoing', 'k8805', 'sorialgi'] alert(member); 이런식으로 대괄호 [ ] 에 담으면 된다 각각의 데이터들은 원소라고 부른다 원소들을 하나씩 꺼내오고싶으면 인덱스를 활용한다. var member = ['egoing', 'k8805', 'sorialgi'] alert(member[0]); alert(member[1]); alert(member[2]); 배열과 반복문이 결합한 예제를 보자 function get_members(){ return ['egoing', 'k8805', 'sorialgi']; } members = get_members(); // members.length는 배열에 담..
함수의 형식 function 함수명( [인자...[,인자]] ){ 코드 return 반환값 } 예제로 numbering이라는 함수를 보자. 이 함수는 0부터 9까지를 화면에 출력한다. function numbering(){ i = 0; while(i < 10){ document.write(i); i += 1; } } numbering(); //함수 호출 마지막에 numbering(); 이라고 써서 함수를 호출하고 있다. 함수의 입력과 출력 return은 함수의 결과를 출력하는 동시에 함수를 종료시킨다. function get_member1(){ return 'egoing'; } function get_member2(){ return 'k8805'; } alert(get_member1()); alert..
while while (조건){ 반복해서 실행할 코드 } while(true){ document.write('coding everybody '); } 여기서 document.write는 자바스크립트를 이용해서 웹페이지에 텍스트를 출력한다 node.js 같은 콘솔에서 실습을 한다면 console.log 같은 메소드를 대신 사용한다. 저기 조건에 있는 true를 false로 바꿔주변 반복문은 실행되지 않을것이다. 반복의 지속여부를 결정 하고싶다(10번만 실행시키고 싶어!) var i = 0; // 종료조건으로 i의 값이 10보다 작다면 true, 같거나 크다면 false가 된다. while(i < 10){ // 반복이 실행될 때마다 coding everybody 이 출력된다. 줄바꿈을 의미하는 HTML ..
Boolean 참과 거짓의 데이터형 true와 false 이렇게 두가지 이다 조건문 if(false){ alert('result : true'); } 다음 예제는 아무것도 출력을 안할것이다 if 뒤에 false가 왔으니까 if(false){ alert(1); alert(2); alert(3); alert(4); } alert(5); 이것도 5만 출력할 것이다 if(true){ alert(1); } else { alert(2); } 이건 결과가 1일 것이다. if(false){ alert(1); } else if(false){ alert(2); } else if(false){ alert(3); } else { alert(4); } 이건 결과가 4 이렇게 else if 와 else를 쓸수도 있다...
대입 연산자 a=1 동등 연산자 alert(1==2) //false alert(1==1) //true alert("one"=="two") //false alert("one"=="one") //true 일치 연산자 alert(1=='1'); //true alert(1==='1'); //false 앗 이건 자바스크립트에서 처음 보는 것 같다. ===은 데이터 형까지 같아야 같다고 판단한다 그래서 ==대신 ===을 쓰는게 좋다고 한다. alert(null == undefined); //true alert(null === undefined); //false alert(true == 1); //true alert(true === 1); //false alert(true == '1'); //true alert(tr..
변수는 문자나 숫자같은 값을 담는 컨테이너이다. 여기에 담긴 값은 다른 값으로 바뀔 수 있다(변수니까) 자바스크립트에서 변수는 var 로 시작한다. var a = 1; alert(a+1); //2 var a = 2; alert(a+1); //3 이렇게 a라는 변수에 숫자를 넣을 수도 있고 var first = "coding"; alert(first+" everybody"); 이렇게 문자열이 들어갈 수도 있다. 변수의 효용 변수를 왜 써야 하는 건지 알아보자 변수는 코드의 재활용성을 높여준다. 이러한 코드가 있다고 치자 alert(100+10); alert((100+10)/10); alert(((100+10)/10)-10); alert((((100+10)/10)-10)*10); 하지만 변수를 적용한..
수의 표현 데이터 형(data type) 중 숫자와 문자일 때를 살펴보자 수의 연산 alert(1+1); alert(2 * 5); alert(6 / 2) Math.pow(3,2); // 9, 3의 2승 Math.round(10.6); // 11, 10.6을 반올림 Math.ceil(10.2); // 11, 10.2를 올림 Math.floor(10.6); // 10, 10.6을 내림 Math.sqrt(9); // 3, 3의 제곱근 Math.random(); // 0부터 1.0 사이의 랜덤한 숫자 alert(1+1); alert(2 * 5); alert(6 / 2) Math.pow(3,2); // 9, 3의 2승 Math.round(10.6); // 11, 10.6을 반올림 Math.ceil(10.2);..
map const array1 = [ 1, 4, 9, 16]; const map1 = array.map(x=>x*2); console.log(map1); //expected output : Array [2, 8, 18, 32] x * 2 는 함수 반환값이고 x는 함수 인자(파라미터) 새로운 배열이 만들어진다(수정, 변경되는게 아님) function 함수이름(){ 내용 } arrow function const af = (num) => num * 2; //중괄호가 생략된 문법 af(2) //4 const bf = (num) => { //중괄호가 있는 문법 console.long('in function'); return num * 2; } bf(2) //in function //4 const a = [1,..
