본문 바로가기

javascript

 (22)
[Javascript] call, apply, bind 함수 호출 방식과 관계없이 this를 지정할 수 있는 call, apply, bind 메서드에 대해 알아보자. call call 메서드는 모든 함수에서 사용할 수 있으며, this를 특정값으로 지정할 수 있다. const mike = { name : "Mike", }; const tom = { name : "Tom", }; function showThisName(){ console.log(this.name); } showThisName(); // ? showThisName 메서드를 호출했을 때 아무것도 뜨지 않는다. 여기에서 this는 window를 가리킨다. window.name이 빈 문자열이기 때문에 아무것도 뜨지 않는 것이다. showThisName.call(mike); // Mike showThi..
[Javascript] setTimeout / setInterval setTimeout : 일정 시간이 지난 후 함수를 실행 function fn(){ console.log(3) } setTimeout(fn, 3000); setTimeout은 두 개의 매개변수를 갖는다. 첫 번째는 일정 시간이 지난 뒤 실행하는 함수이고, 두 번째는 시간이다. 3000은 3초를 의미한다. setTimeout(function(){ console.log(3) }, 3000); 함수를 매개변수 안에 직접 쓰는 것도 가능하다. const tId = function showName(name){ console.log(name); } setTimeout(showName, 3000, 'Mike'); clearTimeout(tId); 함수에 인수가 필요하다면 시간 뒤에 적어준다. 'Mike'는 name에..
[Javascript] 어휘적 환경(Lexical Environment), 클로저(Closure) 어휘적 환경(Lexical Environment)let one;one = 1;function addOne(num){ console.log(one + num);}addOne(5);코드가 위에서부터 아래로 어떻게 동작하는지 알아보자.Lexical 환경one : 초기화X  사용 불가addOne : function 사용 가능프로그램이 실행되면 스크립트 내에서 선언한 변수들이 lexical 환경에 올라간다. let으로 선언한 변수는 초기화 되어 있지 않기 때문에 사용할 수 없다. 반면 함수 선언문은 바로 초기화되어 사용할 수 있다. (함수 표현식은 불가능) let one;Lexical 환경one : undefined  사용 가능addOne : function아직 할당은 안 되어 있기 때문에 undefined..
[Javascript] 나머지 매개변수(Rest parameters), 전개 구문(Spread syntax) 인수 전달 function showName(name){ console.log(name); } showName('Mike'); // 'Mike' showName('Mike', 'Tom'); // ? showName(); // undefined 자바스크립트에서 함수에 넘겨주는 인수의 개수에는 제한이 없다. 인수의 개수를 정해놓고 함수를 만들어도, 함수를 호출할 때 정확히 그 개수를 맞출 필요가 없다. 따라서 위 코드에서 에러가 발생하지 않는다. 함수의 인수를 얻는 방법은 두 가지가 있다. 1) arguments 2) 나머지 매개변수 과거에는 argument만 사용할 수 있었지만 지금은 여러 가지 장점이 있는 나머지 매개변수를 쓰는 추세이다. **화살표 함수에는 argument가 없다!! 1) argument..
[Javascript] 구조 분해 할당(Destructuring assignment) 구조 분해 할당이란? 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 표현식 배열 구조 분해 let users = ['Mike', 'Tom', 'Jane']; let [user1, user2, user3] = users; console.log(user1); // 'Mike' console.log(user2); // 'Tom' console.log(user3); // 'Jane' let [user1, user2, user3] = users; 은 let user1 = users[0]; let user2 = users[1]; let user3 = users[3]; 과 같다. let str = "Mike-Tom-Jane"; let [user1, user2, user3] = str.split(..
[Javascript] 배열(Array), 배열 메소드(Array methods) 배열: 순서가 있는 리스트let students = ['철수', '영희', ..., '영수'];console.log(students[0]); // 철수console.log(students[1]); // 영희console.log(students[29]); // 영수students[0] = '민정';console.log(students); // ['민정', '영희', ...]  배열은 문자, 숫자, 객체, 함수 등을 포함할 수 있다.let arr = [ '민수', 3, false, { name : 'Mike', age : 30, }, function(){ console.log('TEST'); }];반복문 : forlet ..
[Javascript] 문자열 메소드(String methods) 문자열 여러 줄 백슬래시(`)로 감싸 여러 줄을 입력하거나 \n으로 줄바꿈을 할 수 있다. let desc = `오늘은 맑고 화창한 날씨가 계속 되겠습니다. 내일은 비소식이 있습니다.`; let desc = '오늘은 맑고 화창한\n날씨가 계속 되겠습니다.'; let desc = '오늘은 맑고 화창한 // error! 날씨가 되겠습니다. 내일은 비소식이 있습니다.'; 특정 위치에 접근 let desc = '안녕하세요.'; desc[2] // '하' desc[4] = '용'; console.log(desc); // 안녕하세요. 한 글자만 바꾸는 것은 허용되지 않는다. 문자열 길이 : str.length let desc = '안녕하세요.'; desc.length // 6 검색 : str.indexOf(text..
[Javascript] 숫자, 수학 method(Number, Math) toString() 10진수 -> 2진수/16진수 let num = 10; num.toString(); // "10" num.toString(2); // "1010" let num2 = 255; num2.toString(16); // "ff" 괄호 안에 숫자를 쓰면 그 숫자의 진법으로 변환한다. Math 자바스크립트에는 수학과 관련된 프로퍼티와 메소드들을 가지고 있는 Math라는 내장객체가 있다. 대표적인 프로퍼티의 예로 Math.PI;를 입력하면 원주율을 구해준다. Math.ceil() : 올림 let num1 = 5.1; let num2 = 5.7; Math.ceil(num1); // 6 Math.ceil(num2); // 6 Math.floor() : 내림 let num1 = 5.1; let num..

티스토리툴바