setTimeout 일정 시간이 지난 후 함수를 실행합니다. function fn(){ console.log(3); } setTimeout(fn,3000); 이 코드는 3초후에 로그를 찍어줍니다. setTimeOut함수는 두 개의 매개변수를 받습니다. 첫번째매개변수에는 일정시간이 지난 후에 실행해주는 함수이고, 두번째매개변수는 시간입니다. 위의코드에서 3000은 3s(3초)를 의미합니다. setTimeout(function(){ console.log(3); }, 3000); 또한 이렇게 함수를 전달하지 않고 직접 코드를 사용할 수 있습니다. 만약 인수가 필요하다면 시간 뒤에 해당 값을 넣어주면 됩니다. function showName(name){ console.log(name); } setTimeout(..
어휘적 환경(Lexical Environment) 자바스크립트는 어휘적 환경을 갖습니다. 어휘적 환경이란 간단하게 말해 정적인(변하지않는)환경입니다. let one; one = 1; function addOne(num){ console.log(one + num); } addOne(5); 이러한 코드가 있을 때 어떻게 동작하는지 알아봅시다. 코드가 실행되면 스크립트에서 선언한 변수들이 Lexical 환경에 올라가게 됩니다. let과 addOne함수 둘다 환경에 올라가지만 let변수는 초기화가 되어있지 않기 때문에 사용은 못합니다. 그에 비해 함수는 변수와 달리 바로 초기화 됩니다. 다음사진을 보겠습니다 . 이제 let one을 만나게 되면 아직 할당은 되어있지 않기 때문에 초기값 undefined을 얻게 ..
나머지 매개변수, 전개구문 나머지 매개변수와 전개 구문은 ... 로 사용되어집니다. 이 둘의 차이는 무엇일까? 인수 전달 js에서 함수에 넘겨주는 인수에 개수는 제한이 없다. 호출할 때 그 개수를 정확하게 맞출 필요가 없다. 함수에 인수를 얻는 방법은 2 가지가 있는데 하나는 arguments로 접근하는 것과 나머지 매개변수 Rest parameters로 접근하는 것이다. function showName(name){ console.log(name); } showName('Mike'); showName('Mike', 'Tom'); arguments 함수로 넘어 온 모든 인수에 접근 함수내에서 이용 가능한 지역 변수 length/index Array 형태의 객체 배열의 내장 메서드 없음(forEach, ma..
구조 분해 할당 구조 분해 할당 구문은 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 표현식 입니다. 배열구조분해 let[x,y] = [1,2]; console.log(x); // 1 console.log(y); // 2 다음 코드도 보겠습니다. let users = ['Mike', 'Tom', 'Jane']; let[user1, user2, user3] = users; console.log(user1, user2, user3); let[user1, user2, user3] =users; 는 아래의 코드와 같습니다. let user1 = users[0]; let user1 = users[0]; let user1 = users[0]; 결과는 아래입니다. 배열 구조 분해 : 기본값 le..
sort() arr.sort()는 배열을 재정렬 해줍니다. 배열 자체가 변경되니 주의해야합니다. let arr = [27, 8, 5, 13] 배열을 sort함수를통해 정렬을 실시하면 이상한값이 정렬됩니다 왜그럴까요? 정답은 문자열 취급으로 정렬되기 때문에 그렇습니다. 따라서 sort안에 함수를 a가 b보다 크면 양수를 리턴할 것 이고 같으면 0 a가 b보다 작으면 음수를 리턴합니다. 즉 a와 b를 비교해서 a가작으면 앞으로 보내줍니다. a가크면 b가 더작은거니까 b를 앞으로보냅니다. let arr = [27,8,5,13]; arr.sort((a,b) => { return a - b; } 자세히 살펴보면 처음에 8과 27을 비교합니다. 85 이므로 5가 앞으로 갑니다. 결과는 5,8,27,13 그리고 13..
이전 시간에 배열을 배울때 배열에 관련된 기본적인 메소드에 대해 배웠습니다. 다시 살펴보면 push() : 뒤에 삽입 pop() : 뒤에 삭제 unshift() : 앞에 삽입 shift() : 앞에 삭제 이 외에도 배열은 유용한 메소드를 가지고 있습니다. 배열메소드(Array methods) splice() arr.splice(n,m) : 특정 요소 지움 n은 시작이고 m은 개수입니다. 앞 포스팅에서 배웠던 문자열 메소드중 slice()와 햇갈리면 안됩니다. slice()는 특정 범위의 문자를 반환해주고, splice()는 특정 범위의 요소를 지워줍니다. let arr = [1,2,3,4,5]; arr.splice(1,2); console.log(arr); // [1,4,5] 추가로 arr.splice(..
String ', ", ` 작은따옴표 큰따옴표는 큰 차이가 없기 때문에 상황에 맞게 사용합니다. 예를들면 html코드 같은경우 큰따옴표로 된 내용들이 있으므로 작은 따옴표로 감싸는것이 편합니다 let html = `
toString() 10진수 -> 2진수/16진수 let num = 10; num.toString(); // "10" num.toString(2); // "1010" 괄호안에 숫자를 사용하면 그 숫자의 진법으로 바꿔줍니다. let num2 = 255; num2.toString(16); // "ff" Math JavaScript에는 수학과 관련된 프로퍼티와 메소드들을 가지고 있는 Math라는 내장 객체가 있습니다. 예를 들면 Math.PI; 는 3.141592...이 나오게 됩니다. 올림 올림은 Math.ceil()을 사용합니다. let num1= 5.1; let num2= 5.7; Math.ceil(num1); // 6 Math.ceil(num2); // 6 내림 내림은 Math.floor()을 사용합니..
property key : 문자형 지금까지 객체 property key는 문자형으로 만들었습니다. 하지만 아래처럼 숫자형이나 불린형으로 만들어 보면 어떨까요? const obj = { 1:'1입니다.', false:'거짓' } Object.keys(obj); // ["1", "false"] keys()함수를 통해 확인을 해보면 1과 false가 문자형으로 반환됩니다. 그리고 실제로 접근을 할때도 문자형으로 접근할 수 있습니다. obj['1'] // "1 입니다." obj['false'] // "거짓" 이렇게 객체 property는 문자형으로 가능합니다. 그리고 하나더 가능한것이 있는데 바로 Symbol입니다. Symbol Symbol은 유일한 식별자를 만들 때 사용합니다. 즉 유일성이 보장됩니다. con..
이전시간에 객체를 만드는 방법을 배웠습니다. 아래의 코드입니다. let user = { name : 'Mike', age : 30, } 하지만 개발을 하다보면 비슷한 객체를 여러개 만들어야 하는 상황이 생깁니다. 예를들면 회원, 상품 등입니다. 이를 위해 생성자 함수라는 것이 있습니다 . 생성자 함수 생성자 함수는 보통 첫글자를 대문자로 해서 함수를 만들어줍니다. function User(name, age){ this.name=name; this.age=age; } let user1 = new User('Mike', 30); let user2 = new User('Jane', 22); let user3 = new User('Tom', 17); new연산자를 이용하여 호출합니다. 생성자 함수는 붕어빵틀이나..
변수 자바스크립트 변수 선언에는 let, const, var가 있습니다. 이 3가지의 변수 선언의 차이를 알아보겠습니다. var var는 한번 선언된 변수를 다시 선언할 수 있습니다. var name = 'Mike'; console.log(name); // Mike var name = 'Jane'; console.log(name); // Jane 그리고 var는 선언하기 전에 사용 할 수 있습니다. 아래와 같은 코드는 에러를 일으키지 않습니다. console.log(name); //undefined var name = 'Mike'; var로 선언된 변수는 코드가 실제로 이동하지는 않지만 아래처럼 끌어 올린것처럼 실행됩니다. 이를 호이스팅(hoisting)이라고 합니다. 위의 코드에서 undefined가 ..
배열 배열은 순서가 있는 리스트이다. 그리고 배열에는 인덱스가 존재한다. 1번에 철수, 2번에 영희 ... 30번에 영수 let students = ['철수', '영희', ... '영수']; students[0]; // 철수 students[1]; // 영희 students[29]; // 영수 students[0]='민정'; students[0]; // 민정 배열의 특징 배열은 문자 뿐만 아니라 숫자, 객체, 함수 등도 포함 할 수 있음 let arr = [ '민수', 3, false, { name : 'Mike', age : 30, }, function(){ console.log('TEST'); } ]; length length : 배열의 길이이다. students.length //30 push() p..
객체(Object) const superman = { name : 'clark', age : 33, } // name : key, 'clark' : value Object 접근, 추가, 삭제 접근 superman.name // 'clark' superman['age'] // 33 추가 superman.gender = 'male'; superman['hairColor'] = 'black'; 삭제 delete superman.hairColor; Object 단축 프로퍼티 cosnt name = 'clark'; const age = 33; const superman = { name : name, age : age, gender : 'male', } // 이를 간략하게 표현하면 const superman = {..
1. 함수(function)란? 함수(function)란 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록을 의미합니다. 이러한 함수는 필요할 때마다 호출하여 해당 작업을 수행할 수 있습니다. 자바스크립트에서는 함수도 하나의 타입(datatype)입니다. 따라서 함수를 변수에 대입하거나, 함수에 프로퍼티를 지정하는 것도 가능합니다. 또한, 자바스크립트 함수는 다른 함수 내에 중첩되어 정의될 수 있습니다. 1.1 함수의 정의 자바스크립트에서 함수의 정의는 function 키워드로 시작되며, 다음과 같은 구성 요소를 가집니다. 1. 함수의 이름 2. 괄호 안에 쉼표(,)로 구분되는 함수의 매개변수(parameter) 3. 중괄호({})로 둘러싸인 자바스크립트 실행문 function 함수이름(매개변..
1. 연산자 변수의 값을 어떤 값 또는 다른 변수와 비교할 때 사용하는 것이 비교연산자(Camparison Operator)입니다. 비교연산자에는 총 8 가지가 있습니다. 1.1 == ==는 '같다' 입니다. 변수의 타입과 상관없이 값이 같으면 참입니다. 즉 10==10 도 참이고 '10'==10 도 참입니다. 1.2 != !=는 같지 않다 입니다. 1.3 === ===는 엄격하게 같다 입니다. 엄격하게의 의미는 변수 타입까지 고려한다는 것입니다. 변수의 값 뿐만 아니라 변수의 타입까지 같아야 참입니다. 즉 10===10 은 참이지만 '10'===10 은 거짓입니다. 왼쪽이 문자열이고 오른쪽은 정수형(숫자)이기 때문입니다. 1.4 !== !==는 엄격하게 같지 않다 입니다. 변수의 값 뿐만 아니라 변수타..
