본문 바로가기

Programming/자바스크립트51

[자바스크립트] Math Math 객체 Math 객체는 자바스크리트가 수학 상수와 함수를 위한 프로퍼티와 메소드를 제공하는 빌트인 객체이다. Math 객체는 생성자 함수가 아니기 때문에 정적(static) 프로퍼티와 메소드만을 제공한다. Math 메소드 Math 객체가 가지고 있는 메소드 중 자주 사용하는 메소드들에 대해 알아보자. Math 메소드는 사용하기 매우 쉽기 때문에 간단한 설명과 예제를 통해 알아보겠다. 예제를 통해 각 메소드들이 상황에 따라 어떤 값을 반환하는지를 위주로 살펴보겠다. Math.abs(number) 인수의 절댓값을 반환한다. // Math.abs(number) Math.abs(-1); // 1 Math.abs('-1'); // 1 Math.abs(''); // 0 Math.abs([]); // 0 Ma.. 2023. 10. 28.
[자바스크립트] callback 함수 callback 함수란? 자바스크립트를 공부하다보면, 많이 듣고 사용하는 단어 중 하나가 바로 callback 함수이다. callback 함수가 무엇이길래 계속해서 등장하고 사용되는 것일까? 자바스크립트에서는 함수는 데이터로 취급받는다. 그리고 모든 데이터는 타입을 가지고 함수는 함수 타입의 데이터를 가진다. console.log(typeof function(){}) //function 그리고 데이터의 타입은 원시타입(primitive type) 과 객체타입(object type)으로 나뉘게 되는데, 함수 타입은 바로 object 타입에 속하는 데이터의 타입이다. 정리하면, 자바스크립트에서 함수는 하나의 데이터이고 함수 타입의 객체라는 것이다. 그렇기 때문에 함수는 변수에 할당할 수도 있고, 인자로도 넘.. 2023. 10. 28.
[자바스크립트] Method Chaining Method Chaining 이란? 메소드 체이닝(Method Chaining)은 이름 그대로 Method를 연결하여 사용하는 것을 의미한다. 메소드가 실행 결과로 객체를 반환하게 되고 반환된 객체를 통해 또 다른 메소드를 호출할 수 있는 것이다. 배열과 객체를 많이 사용하신 분들이라면 이미 메소드 체이닝을 사용하고 있었을 것이다. 예를 들어, 문자열을 거꾸로 뒤집는 코드를 작성할 때 다음과 같이 작성 할 수 있다. // 문자열 뒤집기 const str = "JavaScript"); const strReverse = str.split('').reverse().join(''); console.log(strReverse); //tpircSavaJ 위의 문자열 뒤집는 부분의 동작과정은 다음과 같다. split.. 2023. 10. 28.
[자바스크립트] 배열 - 메소드2 이전에 배열의 기본적인 메소드에 대해 다룬 포스팅이다. 이번 포스팅에서는 유용하게 사용하는 또 다른 배열 메소드에 대해서 추가로 다루겠다. https://codingralro.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%B0%B0%EC%97%B4-%EB%A9%94%EC%86%8C%EB%93%9C [자바스크립트] 배열 - 메소드1 이번 포스팅에서는 배열이 가지고 있는 메소드들 중 많이 사용하는 몇가지 메소드들에 대해서 알아보겠다. 자바스크립트의 배열의 개념에 대해서 먼저 알고싶으신 분들은 아래의 링크를 참고 codingralro.tistory.com Map() 배열의 map 메소드는 함수를 인수(콜백함수)로 받는데.. 2023. 10. 28.
[자바스크립트] Date 메소드 Date 메소드 저번 글에서는 Date 객체의 생성 방법에 대해서 알아보았다. 이번 글에서는 Date가 가지고 있는 여러 메소드들에 대해서 살펴보겠다. https://codingralro.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-Date-%EA%B0%9D%EC%B2%B4-%EC%83%9D%EC%84%B1 [자바스크립트] Date 객체 생성 Date 자바스크립트에서는 Date객체를 사용하여 시간과 날짜에 관한 정보를 손쉽게 얻고 다룰 수있다. Date 객체는 연, 월, 일, 시, 분, 초에 대한 정보를 제공하고 밀리초의 정도도 제공한다. 자바스 codingralro.tistory.com Date.now() 1970년 .. 2023. 10. 28.
[자바스크립트] Date 객체 생성 Date 자바스크립트에서는 Date객체를 사용하여 시간과 날짜에 관한 정보를 손쉽게 얻고 다룰 수있다. Date 객체는 연, 월, 일, 시, 분, 초에 대한 정보를 제공하고 밀리초의 정도도 제공한다. 자바스크립트에서 날짜와 시간을 나타내기 위한 값의 범위는 아래와 같다. 값 범위 Year 1900(00) ~ Month 1월(0) ~ 12월(11) Day 1일(1) ~ 31일(31) Hours 0시(0) ~ 23시(23) Minutes 0분(0) ~ 59분(59) Seconds 0초(0) ~ 59초(59) 이 때, 주의해야 할 점이 위의 표에서도 나와있지만 자바스크립트 Date 객체의 1월이 0으로 표현되고, 12월이 11로 표현된다는 것이다. UTC / KST 프로그래밍 언어에서 Date 객체를 다루다보.. 2023. 10. 27.
[자바스크립트] 즉시 실행 함수(IIFE) 즉시 실행 함수 즉시 실행 함수란 이름 그대로 함수의 정의와 동시에 즉시 호출되어 실행되는 함수이다. Immediately Invoked Function Expression의 약자인 IIFE라고도 부른다. 즉시 실행 함수는 단 한번만 실행되며, 다시 호출할 수 없다. 사용하는 방법으로는 함수를 그룹 연산자로 감싼다음 함수를 호출하면 된다. // 익명 IIFE // 일반 함수 (fuction () { console.log('일반 함수 익명 IIFE'); }()); // 일반 함수 익명 IIFE // 화살표 함수 가능 (() => { console.log('화살표 함수 익명 IIFE'); }()); // 화살표 함수 익명 IIFE // 기명 IIFE (fuction iife() { console.log('기.. 2023. 10. 27.
[자바스크립트] 반복문 - For in / For of https://codingralro.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%B0%98%EB%B3%B5%EB%AC%B8-forwhile [자바스크립트] 반복문 - for/while 반복문이란 반목문이란 이름 그대로 실행문을 반복하여 동작하게 하는 문법이다. 이 때, 특정 조건식을 통해 반복문을 계속 반복할 것인지 종료할 것인지를 판단하게 된다. 즉, 반복문도 조건문 codingralro.tistory.com 자바스크립트의 반복문 자바스크립트에서 기본적인 반복문으로 for, while, do while이 있다.( 위의 링크 참고!!) 이 중에서도 배열과 객체를 순회하면서 특정 코드를 작성할 때에는 for문을 가.. 2023. 10. 27.
[자바스크립트] Arrow Function 화살표 함수 (Arrow Function) 화살표 함수는 ES6에서 도입된 문법으로 function 키워드 대신 화살표(=> , arrow)를 사용하여 함수를 선언할 수 있다. 화살표 함수가 분명 함수를 선언하는데에 편리한 방법이기는 하지만 사용할 수 없는 상황이 존재하기 때문에 정확하게 아는 것이 중요하다. 먼저, 화살표 함수의 기본적인 문법은 아래와 같다. // 화살표 함수 기본 문법 // 매개변수 지정 방법 // 1. 매개변수가 없을 때 () => { } // { } // () 생략 가능 // 3. 매개변수가 여러개일 때 (n1, n2) => { } // () 필수 // 실행문 작성 방법 // single line block : 실행문이 한 줄일때 x => console.log(x) // {} 생략.. 2023. 10. 26.
[자바스크립트] 구조 분해 할당 구조 분해 할당 ( Destructuring assingment ) 구조 분해 할당은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식이다. 프로그래밍을 하다 보면 객체의 속성과 배열의 요소들이 일부분만 필요한 경우가 있다. 예를 들어, 아래와 같이 객체의 일부 속성만 넘겨받아서 출력하는 함수가 있다고 하였을 때, 객체의 속성값에 접근하여 넘겨주어야 하는 번거러움이 있다. function Person(name, age) { this.name = name; this.age = age; this.country = 'korea'; this.printinfo = function() {} } const person1 = new Person('Kim', 25); const.. 2023. 10. 26.
[자바스크립트] 전개(spread) 연산자 전개 연산자란 전개 연산자는 ECMAScript2015에서 도입된 문법이다. 전개란 펼치다라는 의미로, 전개 연산자를 사용하면 의미 그대로 객체 혹은 배열을 펼칠 수 있게 해 준다. 전개 구문을 배열이나 객체 앞에 점 3개(...)를 붙여주면 된다. 배열 : ...[] 객체 : ...{} 전개 연산자를 사용하면 펼쳐진 객체나 배열을 반환하기 때문에 객체 또는 배열로 담아야 한다. //객체 spread { ...{} } //배열 spread [ ...[] ] { ...[] } 객체는 객체에만 담을 수 있고, 배열은 객체와 배열 두 곳에 다 담을 수 있다. 또한, 전개 연산자를 통해 각각의 데이터만 복사해서 뽑아오는 것이기 때문에 원본 객체와 배열이 변경되지 않는다. ES5 vs ES6 배열 합치기 ES5에.. 2023. 10. 26.
[자바스크립트] 옵셔널 체이닝 옵셔널 체이닝이란 옵셔널 체이닝(optional chaining) 연산자는 ?.로써, 객체 내의 key 에 접근할 때 그 참조가 유효한지 아닌지를 판단하여 유효할 경우에만 참조하고 유효하지 않을 경우(null or undefined), 에러를 발생시키는 것이 아닌 undefined를 반환하는 연산자이다. 자바스크립트에서 객체의 값을 접근하는 경우가 많은데 객체마다 가지고 있는 키 값이 차이가 있다. 예를 들어, 어떤 학생은 전공에 대한 정보가 있을 수 있지만 어떤 학생은 전공에 대한 정보가 기입되어 있지 않을 수 있다. const students = { John : { age : 20, grade : 1, fieldOfStudy : { major : 'computer', minor : 'economics.. 2023. 10. 26.
728x90
반응형

티스토리툴바