배열,객체 기초
배열
여러 데이터 값을 순차적으로 나열한 자료구조. 객체의 특수한 한 유형
각 요소들은 위치값(index)를 가짐. 시작위치값은 1부터 시작이 아니라 0부터.
1. 배열생성
- 기본적인 배열생성
배열을 만들 때는 대괄호([])를 사용하며, 각 요소는 쉼표(,)로 구분
let fruits = ["사과", "바나나", "오렌지"];- 배열의 크기 지정
new Array()를 사용하여 배열의 크기를 지정후 생성.
let numbers = new Array(5);2. 배열 요소 접근
대괄호([]) 안에 인덱스 값을 넣어 접근.
let fruits = ["사과", "바나나", "오렌지"];
console.log(fruits[0]); // "사과"
console.log(fruits[1]); // "바나나"
console.log(fruits[2]); // "오렌지"3. 배열 메서드
- push()메서드
배열의 끝에 요소를 추가
let fruits = ["사과", "바나나"];
fruits.push("오렌지");
console.log(fruits); // ["사과", "바나나", "오렌지"]- pop()메서드
배열의 마지막 요소를 삭제
let fruits = ["사과", "바나나", "오렌지"];
fruits.pop();
console.log(fruits); // ["사과", "바나나"]- shift()메서드
배열의 첫번째 요소를 삭제. 배열의 전체 위치값 앞으로 땡겨짐
let fruits = ["사과", "바나나", "오렌지"];
fruits.shift();
console.log(fruits); // ["바나나", "오렌지"]- unshift()메서드
배열의 맨 앞에 요소를 추가. 배열의 전체 위치값 뒤로 밀림.
let fruits = ["바나나", "오렌지"];
fruits.unshift("사과");
console.log(fruits); // ["사과", "바나나", "오렌지"]- spilce()메서드
배열의 요소를 삭제하고 그자리에 새로운 요소를 추가할수 있음.
spilce(시작인덱스, 삭제할개수(생략시 ), 추가할 요소(생략시 삭제만됨))
let fruits = ["사과", "바나나", "오렌지"];
fruits.splice(1, 1, "포도"); // 1번인덱스(바나나)부터 1개를 삭제(바나나삭제),그자리에 "포도"추가
console.log(fruits); // ["사과", "포도", "오렌지"]- slice()메서드
배열의 일부분을 새로운 배열로 반환. 원본배열 그대로 .
콜백함수를 적용한 새로운 배열을 담을 변수필요
slice(시작인덱스,지정한 인덱스 바로 앞까지 복사)
let fruits = ["사과", "바나나", "오렌지"];
let slicedFruits = fruits.slice(1, 2); //1번인덱스(바나나)부터 2번인덱스(오렌지) 앞 = 바나나
console.log(slicedFruits); // ["바나나"]- forEach()메서드
배열의 각 요소에 대해 콜백 함수를 각각 한번씩 실행. 반복중간에 멈출수없음.
콜백함수 : 매개변수 자리에 함수를 넣는 것
let numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(number) {
console.log(number); //1,2,3,4,5
});- map()메서드
배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과를 새로운 배열로 반환
그래서 콜백함수를 적용한 새로운 배열을 담을 변수가 꼭 필요하고 리턴도 필요함.
항상 원본 배열의 길이만큼 리턴됨.
let numbers = [1, 2, 3, 4, 5];
let squaredNumbers = numbers.map(function(number) {
return number * number;
});
console.log(squaredNumbers); // [1, 4, 9, 16, 25]- filter()메서드
배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과가 true인 요소만 새로운 배열로 반환
콜백함수를 적용한 새로운 배열을 담을 변수필요
let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter(function(number) {
return number % 2 === 0; //number로 받은 매개변수값을 2로 나눴을때 나머지가 0인경우
//=짝수인 경우
});
console.log(evenNumbers); // [2, 4]- reduce()메서드
배열을 순회하면서 각 요소에 대해 콜백 함수를 실행하고, 그 결과를 누적하여 하나의 값으로 모음.
콜백함수를 적용한 새로운 배열을 담을 변수필요
reduce(누적될 값, 현재 처리하고있는 요소),초기셋팅값
let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce(function(accumulator, currentValue) {
return accumulator + currentValue; //누적값 매개변수 + 현재 돌고있는 요소
}, 0); // 0은 누적매개변수 accumulator에 초기셋팅값. 생략시 배열의 첫번째요소를 초기셋팅값으로
console.log(sum); //15- find()메서드
배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과가 true인 첫 번째 요소를 반환
콜백함수를 적용한 새로운 배열을 담을 변수필요
let numbers = [1, 2, 3, 4, 5];
let foundNumber = numbers.find(function(number) {
return number > 3;
});
console.log(foundNumber); // 4- some()메서드
배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과가 true인 요소가 하나라도 있는지 확인후
있으면 true반환
let numbers = [1, 2, 3, 4, 5];
let hasEvenNumber = numbers.some(function(number) {
return number % 2 === 0; //짝수값 찾기 2,4
});
console.log(hasEvenNumber); // true요소가 있기때문에 true- every()메서드
배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과가 true인 요소가 모든 요소인지 확인후 맞으면 true반환
let numbers = [2, 4, 6, 8, 10];
let isAllEvenNumbers = numbers.every(function(number) {
return number % 2 === 0;
});
console.log(isAllEvenNumbers); // true- sort()메서드
배열의 요소를 정렬한 후 그 배열을 반환.(원본수정) 문자열로 변환한 후 유니코드 코드 순서로 정렬
특정 기준에 따라 정렬하려면 비교함수를 제공
let numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];
numbers.sort(function(a, b) {
return a - b; //오름차순 정렬
//return b - a; //내림차순 정렬
});
console.log(numbers); // [1, 1, 2, 3, 3, 4, 5, 5, 5, 6, 9]
//console.log(numbers); // [9, 6, 5, 5, 5, 4, 3, 3, 2, 1, 1]- reverse() 메소드
배열의 요소를 역순으로 정렬(원본수정)
let numbers = [1, 2, 3, 4, 5];
numbers.reverse();
console.log(numbers); // [5, 4, 3, 2, 1]문
조건문
1. if문
조건이 참인지 거짓인지에 따라 코드 블록을 실행하도록 하는 조건문
- 기본적인 if문
if (조건) {
// 조건이 참일 때 실행할 코드
}- if-else문
if (조건) {
// 조건이 참일 때 실행할 코드
} else {
// 조건이 거짓일 때 실행할 코드
}- if-else if-else문
if (조건1) {
// 조건1이 참일 때 실행할 코드
} else if (조건2) {
// 조건1이 거짓이고 조건2가 참일 때 실행할 코드
} else {
// 조건1과 조건2 모두 거짓일 때 실행할 코드
}2. swich문
변수의 값에 따라, 여러 개의 경우(case)중 일치하는값 선택 후 코드실행,
일치하는 case가 없다면 선택적으로 사용할수있는 default절이 실행됨.
각 case마다 break문 필요. 없으면 원하는 동작 실행 안됨.
let tempValue = "apple"
switch (tempValue) {
case "apple":
// "apple"과 일치할 때 실행될 코드
break;
case value2:
// value2와 일치할 때 실행될 코드
break;
default:
// 어떤 case도 일치하지 않을 때 실행될 코드
break;
} 3. 조건문의 중첩
하나의 조건문 안에 다른 조건문을 포함시키는 것
let age = 20;
let gender = "여성";
if (age >= 18) { //age가 18이상이면 실행
if (gender === "남성") { //age가 18이상인 상태에서 gender가 남성이면
console.log("성인 남성입니다."); // 출력
} else {
console.log("성인 여성입니다."); //age가 18이상인 상태에서 gender가 남성이 아니면 출력
}
} else {
console.log("미성년자입니다."); //age가 18미만이면 출력
}4. 조건부 실행
앤드연산자 &&를 이용한 조건부 실행. 왼쪽값이 참일경우 오른쪽값을 평가하고 그값을 반환
let x = 10;
(x > 0) && console.log("x는 양수입니다."); //x는 양수입니다.5. 삼항연산자와 단축평가
or연산자 ||를 이용한 조건부 실행. 왼쪽값이 false경우 오른쪽값을 평가후 그값을 반환
let x; //undefined
let y = x || 10; //x는 false 오른쪽값을 y에 할당.
console.log(y); // 106. falsy한 값과 truthy한 값
if문 안의 조건에() 0,빈문자열,null,undefined,NaN,false 도 조건으로 평가될수있음.
이런값을들 falsy한 값이라고 함. 이외 나머지는 전부 truthy한 값으로 평가됨.
반복문
특정 코드를 반복해서 실행
1. for문
- 기본적인 for문
초기값; 조건식; 증감식을 사용하여 반복 횟수를 제어
for (let i = 0; i < 10; i++) {
//초기값 i=0 ;조건식 i가 10보다 작을때까지; 한번돌고 i는 1씩증가
console.log(i);
}- 배열과 함께 사용하는 for문
let numbers = [1, 2, 3, 4, 5];
for (let i = 0; i < numbers.length; i++) {
//초기값; i가 배열numbers의 길이보다 작을때까지 실행 ; 증감식
console.log(numbers[i]); //배열의 인덱스를 순차적으로 순회할때
}- for...in문
객체의 프로퍼티를 순서대로 접근할 수 있음.
let person = { name: "John", age: 30, gender: "male" };
for (let key in person) {
//person을 순회할때마다 각 속성명을 key에 할당함.
console.log(key + ": " + person[key]);
//person[key] 는 객체의 요소에 접근하는 방법중 대괄호표기법.
//동적,유효하지않은 변수명값일때 씀
}2. while문
조건식이 참인 경우에만 코드를 반복해서 실행
let i = 0;
while (i < 10) { //i가 10보다 작으면 실행
console.log(i);
i++; //코드실행후 증감식. 빼먹으면 무한루프
}3. do...while문
일단 한 번은 코드를 실행하고, 그 후에 조건식을 체크하여 반복 여부를 결정
let i = 0;
do {
console.log(i); //여기까지는 그냥 실행
i++; //증감식
} while (i < 10); //이제 조건 비교후 실행여부결정4. brack문과 continue문
- break문
반복문을 종료
for (let i = 0; i < 10; i++) {
if (i === 5) { //만약 i가 5면
break; //멈추고 for문 밖으로 나감.
}
console.log(i); // 0,1,2,3,4
}- continue문
해당사항을 건너띄고 넘어감.
for (let i = 0; i < 10; i++) {
if (i === 5) { //만약 i가 5면
continue; // 밑에 로직을 실행하지 않고 다시 for문으로 올라감.
}
console.log(i); // 0,1,2,3,4,6,7,8,9
}2주차강의
ES6,일급객체로서의 함수, Map과 Set
각종 ES6문법 소개
1. let, const
둘다 재선언은 안됨,
let은 값을 재할당은 가능.
const 는 재선언, 재할당 둘다 안됨.
2. 화살표 함수(arrow function)
function 대신 화살표로 함수를 만드는 방법.
this바인딩 관련 function 과의 차이점.
function은 호출할때 this가 정해지지만 , 화살표함수는 선언할 때 this가 정해짐
(좀더 뒤에서 자세히) 화살표함수는 this가 보통 감싸고 있는 곳을 가리킴.
3. 삼항연산자
조건 ? 결과1 : 결과2
조건이 true면 결과1, 조건이 false면 결과2
if if-else 와 비슷함. 식이 길이지면 가급적 if문으로.
4. 구조 분해 할당
배열[]이나 객체{}의 속성을 분해해서 그 값을 변수에 담을 수 있게 해주는 문법
- 배열
let [value1, value2] = [1, "new"]; //배열 1,"new를 변수value1,2에 각각 할당하고 선언
console.log(value1); // 1
console.log(value2); // "new"
let arr = ["value1","value2","value3"]; //arr의 배열 안에 value1,2,3을 할당
let [a,b,c] = arr; // a,b,c변수선언 하며 arr을 할당. arr안에 value값들이 각각 a,b,c로 할당됨
console.log(a,b,c); // value1 value2 value3
let [a,b,c,d] = arr //만약 변수선언할때 값이 할당되고 남는 변수가 생기는경우
// 그값은 값이 들어와야하는데 없다라고 판단. 언디파인을 출력함.
console.log(d) // undefined
let [a,b,c,d = 4] = arr //변수선언시 초기값을 설정해 줄수있는데 undefined일 경우
//초기값이 출력됨.
//초기값이 있는데 값이들어옴 => 들어온값. 초기값있는데 값이 없음 =>초기값
console.log(d) // 4- 객체
let user = {name: "nbc", age: 30};
let {name, age} = user;
//name과 age변수선언을 하고 user 객체를 각각 할당.
//객체의 속성을 변수에 할당할때 변수의 이름이 객체의 키(프로퍼티값)이름과 정확히 일치해야함.
//user 객체의 name, age 속성을 다른 이름의 변수에 할당하고 싶다면
// let {name:newName, age:newAge} 이런식으로
// let name = user.name;
// let age = user.age;
console.log(name, age) // nbc 30
let {name, age, birthDay} = user;
//배열과 마찬가지로 변수선언시 값이 들어오지않는경우 undefined.
console.log(birthDay) // undefined
let {name, age, birthDay = "today"} = user;
//이경우도 초기값을 설정후 undefined일 경우 초기값출력, 할당되는값이 있으면 할당되는값 출력.
console.log(birthDay) // today
5. 단축 속성명
변수에 할당할 객체의 key와 value 이름이 같다면, 생략 가능
(공부할때 구분안돼서 헷갈리게 했던거. 근데 생략까지 가능?)
const name = "nbc"
const age = "30"
const obj = {name,age} //const obj = {name: name, age: age}와 같음
console.log(obj); // {name: 'nbc', age: '30'}6. 전개구문
배열이나 객체를 전개하는 문법
// 배열
let arr = [1,2,3];
//let newArr = [...arr]했을시 arr과 newArr은 결과값이 같음.
//arr배열 1,2,3에 4를 추가 하고싶을때 push매서드를 사용해도 되나 밑에 예시처럼도 가능.
let newArr = [...arr, 4];
console.log(newArr) // [1,2,3,4]
// 객체
let user = {name: "nbc", age: 30};
let user2 = {...user}
//user과 전개구문으로 할당한user2는 결과같음.
user2.name = "nbc2"
//user2의 name이라는 프로퍼티의 값을 "nbc2"로 재할당.
console.log(user.name) // nbc
console.log(user2.name) // nbc27. 나머지 매개변수
function func (a, b, ...args) {
//func라는 함수에 a,b, 그리고 그외 나머지는 ...args라는 매개변수로 값을 받음
console.log(...args)
}
func(1, 2, 3) // 3
func(1, 2, 3, 4, 5, 6, 7) // 3 4 5 6 78. 템플릿 리터럴
백틱 (``)과 ${}
백틱안에 여러줄로 이루어진 문자열이나 변수, 표현식을 ${}로 묶어 삽입가능.
let value = "안녕하세요";
console.log(`string text ${value} text`); //표현식,변수도 삽입 가능
console.log(`string text
string text line2`); //줄바꿈 띄어쓰기도 쉽게 표현 가능
//string text
//string text line29.named export vs default export
작성한 코드를 모듈화시켜서 파일화하여 다른곳에서 재사용할때
하나의 파일에서 하나의 기본 내보내기 vs 하나의 파일에서 여러개를 내보내기
(아직 모르겠음 설명없어서 일단 적기만하고 패스)
- default Export
// name.js
const Name = () => {
}
export default Name
// other file
// 아무 이름으로 import 가능
import newName from "name.js"
import NameFromOtherModule from "name.js- named export
// 하나의 파일에서 여러 변수/클래스 등을 export 하는 것이 가능
export const Name1 = () => {
}
export const Name2 = () => {
}
// other file
import {Name1, Name2} from "name.js"
import {newName} from "name.js" // x
// 다른 이름으로 바꾸려면 as 사용
import {Name1 as newName, Name2} from "name.js"
// default export 처럼 가져오려면 * 사용
import * as NameModule from "name.js"
console.log(NameModule.Name1)일급 객체로서의 함수
일급객체 : 다른 객체들에 일반적으로 적용가능한 연산을 모두 지원하는 객체
함수는 일급객체로 취급됨. 그래서 매우 유연하게 사용가능.
1. 변수에 함수를 할당
함수는 값으로 취급되기 때문에, 다른 변수와 마찬가지로 변수에 할당가능.
변수에 할당된 함수는 나중에 사용가능.
const sayHello = function() {
console.log('Hello!'); //sayHello변수는 함수가 할당된상태
};
sayHello(); // "Hello!" 출력2. 함수를 인자로 다른 함수에 전달
콜백함수 : 다른 함수의 인자로 전달되는것
고차함수 : 함수를 인자로 받거나 함수를 출력으로 반환하는 함수
function callFunction(func) { //callFunction함수에 매개변수로 밑에서 sayHello를 받아옴
func(); //매개변수로 받아온 함수 실행
}
const sayHello = function() { //sayHello 변수는 함수가 할당된상태
console.log('Hello!');
};
callFunction(sayHello); // "Hello!" 출력3. 함수를 반환
function createAdder(num) {
return function(x) {
return x + num;
}
}
const addFive = createAdder(5);
console.log(addFive(10)); // 15 출력createAdder함수는 num이라는 매개변수를 받는 함수임. 내부는 매개변수 x를 받는
또하나의 함수가 있고 그 함수는 x+num을 실행후 값을 리턴함.
상수 addFive는 createAdder함수에 매개변수로 5를 입력받은 함수임.
addFive는 createAdder의 매개변수인 5를 기억함.
createAdder 함수를 호출하면서 5를 인자로 주었을 때,
createAdder 함수 내부에서 반환되는 내부 함수는 x를 매개변수로 받는 함수.
이 내부 함수가 addFive에 할당되며, addFive 함수를 호출할 때 괄호 안에 전달한 값이 바로 x에 대입
즉 addFive()는 x+5인 상태 . 인자로 10을 받으면 10+5가되어 15가 출력됨.
(이해안돼)
4. 객체의 프로퍼티로 함수를 할당
const person ={
name: "John",
age: 31,
isMarried: true,
sayHello: function(){
console.log(`Hello my name is ${this.name}`) //여기서 this는 person을 가리킴
} // 객체메서드로 함수호출시 this는 호출한 객체를 가리킴.
//객체내부에서 화살표함수 호출시 호출한 객체가아니라 객체를 감싸고있는 외부에서 this값을 찾음.
}
person.sayHello();- 배열의 요소로 함수를 할당
const myArray = [
function(a, b) {
return a + b;
}, //0번
function(a, b) {
return a - b;
} // 1번
];
console.log(myArray[0](5, 10)); // 15 출력
console.log(myArray[1](10, 5)); // 5 출력function multiplyBy(num) { //매개변수로 num을받음
return function(x) { //multiplyBy안에 매개변수 x를 받는 함수가있음. x*num후 값을 리턴
return x * num;
}
}
function add(x, y) {
return x + y;
}
const multiplyByTwo = multiplyBy(2);
//multiplyBy에 2를 매개변수로 주고 그안에 리턴되는 x를매개변수로받는 함수를 할당.
//multiplyByTwo = function(x){return * 2}인상태
const multiplyByThree = multiplyBy(3);
//multiplyBy에 3를 매개변수로 주고 그안에 리턴되는 x를매개변수로받는 함수를 할당.
//multiplyByTwo = function(x){return * 3}인상태
const result = add(multiplyByTwo(5), multiplyByThree(10)); // 40 출력
//multiplyByTwo(5) = 5*2 =10, multiplyByThree(10) = 10*3 = 30, 10+30 = 40Map과 Set
객체(object)와 배열(array)을 가지고도 부족한 부분을 프로그래밍적으로
반영하는데있어 보완할수 있는 자료구조
1. Map
키-값 쌍을 저장함. 객체와달리 키로 어떤값이든 사용가능.(ex.숫자,객체,배열)
저장될때 들어온 순서대로 정렬. size속성도 가지고 있음.
-
Map의 주요 메서드
-new Map() : Map생성.
-map.set(key, value) : key를 이용해 value를 저장.
-map.keys() : Map의 모든 키를 포함하는 반복 가능한 객체를 반환.
-map.values() : Map의 모든 값을 포함하는 반복 가능한 객체를 반환.
-map.entries() : Map의 모든 키-값 쌍을 포함하는 반복 가능한 객체를 반환.
[key, value] 형태의 배열로구성
-map.get(key) : key에 해당하는 값을 반환. key가 존재하지 않으면 undefined를 반환.
-map.has(key) – key가 존재하면 true, 존재하지 않으면 false를 반환.
-map.delete(key) – key에 해당하는 값을 삭제.
-map.clear() – 맵 안의 모든 요소를 제거.
-map.size – 요소의 개수를 반환. -
맵의 반복
keys(), values(), entries() 메소드를 사용하여 키, 값 및 키-값 쌍을 반복할 수 있음.
iterator이라는 속성을 가지며 for...of를 이용해 iterator객체를 순회할 수 있음.
const myMap = new Map(); //myMap이라는 새로운 Map 추가
myMap.set("one",1); //myMap에 one이라는 키에 값으로 1을 할당.
myMap.set("two",2);
myMap.set("three",3);
for (const key of myMap.keys()) { //myMap의 모든키값을 상수key에 순회할때마다 할당
console.log(key); //one,two,three
}
for (const value of myMap.values()) { //myMap의 모든벨류값을 상수value에 순회할때마다 할당
console.log(value); //1,2,3
}
for (const entry of myMap.entries()) {//myMap의 모든와 벨류값을 상수entry에 순회할때마다 할당
console.log(`${entry[0]}: ${entry[1]}`); //one: 1,two: 2, three: 3
}
console.log(myMap.size) //3
console.log(myMap.has("two")) //true2. Set
고유한 값을 저장하는 자료구조. 값만 저장. 값이 중복 되지않는 유일한 요소로만 구성.
- Set의 주요 메서드
-new Set() : Set생성.
-add(value) : Set에 새로운 value를 추가. 이미 Set에 같은 value가 있다면 아무런 변화없음
-values() : Set의 모든 값을 포함하는 반복 가능한 객체를 반환. 삽입 순서대로 반복
-keys() : values() 메서드와 동일한 기능을 하며, Set의 모든 값을 포함하는 반복 가능한 객체를 반환
-entries() : Set의 모든 값에 대해 [value, value] 형태의 쌍을 포함하는 반복 가능한 객체를 반환. Map과의 인터페이스 일관성을 위해 제공.
-clear() : 모든 요소를 제거
-delete(value) : Set에서 주어진 value를 삭제하고, 성공적으로 삭제되면 true를, 그렇지 않으면 false를 반환
-has(value) : Set에 특정 value가 존재하는지 확인하고, 존재하면 true, 존재하지 않으면 false를 반환.
-size : Set의 요소 개수를 반환
const mySet = new Set(); //mySet이라는 Set생성
mySet.add('value1'); //mySet에 "value1"추가
mySet.add('value2');
mySet.add('value3');
mySet.add('value3'); //같은값은 추가 안됨.
mySet.add('value5');
for (const value of mySet.values()) {
console.log(value); //value1 value2 value3 value5
}