본문 바로가기

전체 글40

[JavaScript] 상속, 프로토타입 객체에는 그 객체가 프로퍼티 타입을 가지고 있는지 확인하는 함수가 있는데 이는 hasOwnProperty( ) 이다. const user = { name : 'Mike' } console.log(user.name); // 'Mike' user.hasOwnProperty('name'); // true user.hasOwnProperty('age'); // false 위처럼 hasOwnProperty( )를 통해 user는 name이라는 프로퍼티를 가지고 있지만 age라는 프로퍼티 타입을 가지고 있지 않은 것을 확인할 수 있다. 이 프로토타입을 어떻게 사용하는지 알기 위해서 상속이라는 개념을 사용해서 알아볼 것이다. 아래와 같이 bmw, benz, audi라는 객체가 있다. bmw는 navigation이 있.. 2022. 3. 6.
[JavaScript] 클로저( Closure ) 이해하기 이번 시간에는 클로저에 대해 알아볼 것이다. 자바스크립트는 어휘적 환경을 갖는다. ( Lexical Environment ) 아래의 코드가 있을 때 어떻게 작동이 되는지 살펴보자, let one; one = 1; function addOne(num) { console.log(one + num); } addOne(5); // 6 코드가 실행되면 스크립트 내에서 선언한 변수들이 Lexical 환경으로 올라간다. 초기화 하지 않은 one은 사용할 수 없는 반면에 함수 선언문은 바로 초기화 되기 때문에 사용가능하다. 1. let one을 만났을 때 초기값이 할당을 받지 않았기 때문에 오류는 나지 않지만 undefined가 난다. 2. 그 이후 one은 1을 할당 받는다. 3. 함수는 선언과 동시에 초기화 된다... 2022. 3. 5.
[JavaScript] 나머지 매개변수, 전개 구문 이번 시간에는 나머지 매개변수와 전개 구문에 대해 알아볼 것이다. . . . 이렇게 점 세개로 사용한다. 1. 나머지 매개변수 function showName(name){ console.log(name); } showName('Maria'); // 'Maria' 이렇게 name이라는 인수를 전달해주면 name을 콘솔에 찍는 함수이다. 만약 두개의 이름을 전달하면 어떻게 될까?? function showName(name){ console.log(name); } showName('Maria'); // 'Maria' showName('Maria', 'John'); // ? 오류는 나지 않지만 콘솔에 Maria만 찍힌다. 자바스크립트에서 함수에 전달하는 인수에는 개수 제한이 없다. 인수의 개수를 정해놓고 함수를.. 2022. 3. 1.
[JavaScript] 구조 분해 할당 이번 시간에는 구조 분해 할당에서 배워볼 것이다. 우선, 구조 분해 할당(Destructuring assignment)은 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게하는 표현식이다. let [x, y] = [1, 2]; console.log(x); // 1 console.log(y); // 2 쉽제 말하자면 x에 1을 담고 y에 2를 담는 것이다. 간단한 예제로 살펴보도록 하자 let users = ['Mike', 'Tony', 'Maria']; let [user1, user2, user3] = users; console.log(user1); // Mike console.log(user2); // Tony console.log(user3); // Maria 이는 user1,2,3을 us.. 2022. 2. 28.
[JavaScript] 배열 메소드(Array Method) - 2 let arr3 = [27, 8, 5, 13]; function fn(a, b){ return a - b; } arr.sort(fn); // 화살표 함수를 사용 arr3.sort((a, b) => { return a - b; }); console.log(arr3); // [5,8,13,27] let arr3 = [27, 8, 5, 13]; function fn(a, b){ return a - b; } arr.sort(fn); // 화살표 함수를 사용 arr3.sort((a, b) => { return a - b; }); console.log(arr3); // [5,8,13,27] 지난 시간에 말했던 sort와 reduce에 대해 알아보도록 하자! 1. arr.sort( ) : 배열 재정렬하는 메소드이다... 2022. 2. 27.
[JavaScript] 배열 메소드(Array Method) - 1 이번 시간에는 배열에서 사용하는 메소드에 대해 공부할 것이다. push( ) : 뒤에 삽입 pop( ) : 뒤에 삭제 unshift( ) : 앞에 삽입 shift( ) : 앞에 삭제 배열에서 사용하는 기본적인 메소드로는 위의 네개가 있는데 더 유용한 메소드에 대해 배워보도록 하자. 1. arr.splice(n, m) : 특정 요소 지우기, n 번째부터 m 개의 요소를 지우라는 메소드이다. 인덱스는 0부터 시작이기 때문에 해당하는 인덱스부터 m개를 지울 수 있다. let arr = [1,2,3,4,5]; arr.splice(1,2); console.log(arr); // [1,4,5] arr.splice(n, m, x)를 사용하면 특정 요소를 지우고 추가도 할 수 있다. let arr = [1,2,3,4,.. 2022. 2. 26.
[JavaScript] 문자열 메소드(String Method) 이번 시간에는 문자열과 관련된 여러가지 메소드를 배워볼 것이다. 우선 문자열은 '(작은 따옴표) , "(큰 따옴표) , `(백틱)을 사용하여 나타낼 수 있는데 html 코드 같은 경우는 작은 따옴표로 감싸는게 편하다. 태그 안에 큰 따옴표를 써야하는 상황이 있기 때문이다. let html = '제목 영역'; 반면 영어로 된 문자열은 큰 따옴표로 감싸는게 편하다. 문자열 안에 작은 따옴표를 써야하는 상황이 있기 때문이다. let desc = "It's 3 o'clock."; 백틱은 $와 중괄호 { } 를 사용해 변수를 표현하거나 표현식에 사용할 수 있다. let name = 'Jane'; let result = `My name is ${name}`; //My name is Jane; let add = `2.. 2022. 2. 24.
[JavaScript] Number, Math 우리가 실 생활에서 사용하는 숫자는 모두 10진수이다. 개발을 하다보면 2진수나 색상 표현을 위해 16진수가 필요할 때가 있는데 이번 시간에는 10진수를 2진수나 16진수로 바꾸는 법을 배울 것이다. 1. toString( ) 이름에서도 알 수 있듯이 이 메소드는 숫자를 문자열로 바꿔준다. 이 때 괄호 안에 숫자를 넣어주면 그 숫자에 해당하는 진수로 바꿔서 반환한다. let num = 10; num.toString(); // "10" num.toString(2); // "1010" 자바스크립트는 수학과 관련된 프로퍼티와 메소드들을 가지고 있는 Math라는 내장 객체가 있다. 대표적인 프로퍼티로 Math.PI가 있는데 이는 원주율을 보여준다. Math가 가지고 있는 메소드들에 대해 알아보자. 1. Math.. 2022. 2. 23.
[JavaScript] Symbol 지금까지 property key는 모두 문자형으로 만들었다. const obj = { 1 : '1입니다.', false : '거짓' } 숫자형이나 불린형으로 만들어도 Object.keys(obj)를 가져오게 되면 키 값을 ["1", "false"] 이렇게 문자열로 가져왔다. 실제 키 값으로 접근할 때도 obj ['1'] , obj ['false'] 이렇게 문자열로 접근할 수 있었다. 이렇게 객체 프로퍼티 키는 문자형으로 가능한데 하나 더 가능한 형이 있다. 바로 Symbol 형이다. const a = Symbol(); 심볼은 위와 같은 형태로 만들어주며, new 연산자를 붙이지 않는다. 심볼은 유일한 식별자를 만들 때 사용한다. const a = Symbol(); const b = Symbol(); 이렇.. 2022. 2. 22.
[JavaScript] 객체 메소드(Object Method) 이번 시간은 객체에서 사용할 수 있는 객체 메소드(Object Method)와 Computed propery에 대해 알아볼 것이다. Computed property let a = 'age'; const user = { name : 'Ujin', [a] : 30 } user라는 객체를 선언해주었다. 이 때 [a] 는 a라는 문자를 배열에 넣은 것이 아니라, 위에 let으로 선언해준 변수 a로 할당된 값이 들어간다. 즉 age : 30 인 것과 같은 것이다. 이를 Computes property(계산된 프로퍼티) 라고 부른다. 아래와 같이 식 자체를 넣는 것도 가능하다. const user = { [1 + 4] : 5 ["안녕" + "하세요"] : "Hello" } Methods 이번에는 객체에서 사용할 수.. 2022. 2. 22.
[JavaScript] 생성자 함수 아래는 객체 리터럴의 모습이다. let ueer = { name : 'Mike', age : 30, } 개발을 하다보면 위와 같이 비슷한 리터럴을 반복해서 사용해야할 때가 있다. 그럴 때 사용하는 것이 생성자 함수이다. 생성자 함수는 아래와 같이 생겼다. 첫글자는 대문자를 사용한다. function User(name, age) { this.name = name; this.age = age; } let user1 = new User('Mike', 30); let user2 = new User('Anna', 13); let user3 = new User('Tomas', 26); name과 age를 인자로 받아서 this에 넣어주었고 new 연산자를 사용해서 User 함수를 호출한다. 각각 다른 변수 명으로 .. 2022. 2. 22.
[JavaScript] JavaScript 변수 JavaScript의 변수에는 var와 let, const 이 세가지가 있다. 이번 시간에는 이 변수들의 특징과 차이점에 대해 알아볼 것이다. var는 한번 선언된 변수를 다시 선언할 수 있다. var name = 'Mike'; console.log(name); // 여기서의 name 은 Mike var name = 'Jane'; console.log(name); // 여기서 name은 Jane 같은 상황에서 let은 에러가 난다. 한번 선언된 변수를 다시 선언할 수 없다는 것이다. const도 마찬가지이다. let name = 'Mike'; console.log(name); // 여기서의 name 은 Mike let name = 'Jane'; console.log(name); // Error가 남 또한.. 2022. 2. 22.
728x90

티스토리툴바