WEB/JavaScript 78

[JavaScript] Array helper method

▶ Array helper method 배열 조작을 보다 쉽게 수행할 수 있는 특별한 매서드 모음 ES6에 도입 배열의 각 요소를 순회하며 각 요소에 대해 콜백함수를 호출한다. forEach(), map(), filter(), every(), some(), reduce() 매서드 호출 시 콜백함수를 인자로 받는 것이 특징이다. forEach() 배열 내의 모든 요소 각각에 대해 콜백함수를 호출한다 반환 값이 없다 map 배열 내의 모든 요소 각각에 대해 콜백함수를 호출한다 함수 호출 결과를 모아 새로운 배열을 반환한다 ▶콜백 함수 (Callback function) 다른 함수에 인자로 전달되는 함수 -> 외부 함수 내에서 호출되어, 일종의 루틴이나 특정 작업을 진행한다

WEB/JavaScript 2024.04.18

[JavaScript] 배열 구조, 배열 매서드 (push, pop, unshift, shift)

▷ Object 키로 구분된 데이터 집합을 저장하는 자료형 -> 이제는 순서가 있는 collection이 필요하다 ▷ Array 순서가 있는 데이터 집합을 저장하는 자료구조 ▶ 배열 구조 대괄호 ( '[ ]' ) 를 이용해 작성한다 요소 자료형 : 제약이 없다 length 속성을 사용해, 배열에 담긴 요소가 몇 개인지 알 수 있다 ▶ 배열 매서드 1. push() 배열 끝에 요소를 추가 2. pop() 배열 끝에 요소를 제거함 제거한 요소를 반환한다 3. unshift() 배열 앞에 요소를 추가한다 4. shift() 배열 앞에 요소를 제거하고, 제거한 요소를 반환한다

WEB/JavaScript 2024.04.18

[JavaScript] 'new' 연산자

▷ 문제 인식 Q. JS에서 객체를 하나 생성한다고 한다면? => 하나의 객체를 선언하여 생성한다 (불편함) Q. 동일한 형태의 객체를 또 만든다면 ? => 또 다른 객체를 선언하여 생성해야한다. (불편함) ▷ 해결방법 new 연산자 사용하기 사용자 정의 객체 타입을 생성한다 매개변수 constructor : 객체 인스턴스의 타입을 적는 함수 arguments : constructor와 함께 호출될 값 목록

WEB/JavaScript 2024.04.18

[JavaScript] 추가 객체 문법 ②

5. Object with '전개 구문' "객체 복사" 객체 내부에서 객체를 전개한다 얕은 복사에 활용 가능하다 6. 유용한 객체 매서드 Object.keys() Object.values() 7. Optional chaining ( ' ?. ') 장점 참조가 누락될 가능성이 있는 경우, 연결된 속성으로 접근할 때 더 짧고 간단한 표현식을 작성할 수 있다 어떤 속성이 필요한지에 대한 보증이 확실하지 않은 경우에 객체의 내용을 보다 편리하게 탐색할 수 있다 속성이 없는 중첩 객체를 에러 없이 접근할 수 있는 방법 만약 참조 대상이 null 또는 undefined라면, 에러가 발생하는 것 대신 평가를 멈추고 undefined를 반환한다 만약 Optional chaining을 사용하지 않는다면 ' && ' 연산..

WEB/JavaScript 2024.04.18

[JavaScript] 추가 객체 문법 ①

1. 단축 속성 키 이름 == 값으로 쓰이는 변수의 이름 키 이름과 값으로 쓰이는 변수의 이름이 같은 경우 단축 구문을 사용할 수 있다. 2. 단축 매서드 매서드를 선언할 때 function 키워드를 생략할 수 있다 3. 계산된 속성 (computed property name) 키가 대괄호 ( [ ] )로 둘러싸여 있는 속성 고정된 값이 아닌 변수 값을 사용할 수 있다 4. 구조 분해 할당 (destructing assignment) 배열 또는 객체를 분해하여 객체 속성을 변수에 쉽게 할당할 수 있는 문법

WEB/JavaScript 2024.04.18

[JavaScript] Method, this

▶ Method 객체 속성에 정의된 함수 object.method() 방식으로 호출된다 매서드는 객체를 '행동'할 수 있게 한다 ▶ this 함수나 매서드를 호출한 객체를 가리키는 키워드 this 키워드를 사용해서, 객체에 대한 특정한 작업을 수행할 수 있다 함수 내에서 객체의 속성 및 매서드에 접근하기 위해 사용한다 자바스크립트에서 this는 함수를 "★★호출하는 방법★★"에 따라 가리키는 대상이 다르다 단순 호출 시 this 매서드 호출 시 this 가리키는 대상 => 전역 전체 가리키는 대상 => 매서드를 호출한 객체 ▶ 중첩된 함수에서 this의 문제점과 해결책 forEach의 인자로 작성된 함수는 일반적인 함수 호출이기 때문에 this가 전역 객체를 가리킨다 화살표 함수는 자신만의 this를 가..

WEB/JavaScript 2024.04.18

[JavaScript] 객체

▶ Object 객체 키로 구분된 데이터 집합을 저장하는 자료형 * 데이터의 집합 data collection ▶ 객체 구조 중괄호 (' { } ') 를 이용해 작성한다 중괄호 안에는 key : value 쌍으로 구성된 속성(property)를 여러 개 작성할 수 있다 key는 문자형만 허용 value는 모든 자료형 다 허용 ▶ 속성 참조 점 ( '.' chaining operator) 또는 대괄호 ( '[ ]' )로 객체 요소에 접근한다 key 이름에 띄어쓰기 같은 구분자가 있으면 대괄호 접근만 가능하다. ▶ ' in ' 연산자 in 연산자는 속성이 객체 안에 존재하는지를 확인한다

WEB/JavaScript 2024.04.18

[JavaScript] 화살표 함수

▶ 화살표 함수 표현식 (Arrow function expressions) 함수 표현식의 간결한 표현법 전 후 ▶ 화살표 함수 작성 과정 1단계 function 키워드 제거 매개변수와 중괄호 사이에 화살표 (=>) 작성 2단계 함수의 매개변수가 하나 뿐이라면, 매개 변수의 '()' 를 제거할 수 있다. (단, 생략하지 않는 것을 권장한다) 3단계 함수 본문의 표현식이 한 줄이라면, '{ }'와 'return'을 제거할 수 있다. ▶ 화살표 함수 심화

WEB/JavaScript 2024.04.18