본문 바로가기
코딩 자율학습단/자바스크립트

[ 자바스크립트 입문 ] 2주차

by 주연배 2024. 3. 18.

이차원 배열

더보기
- 배열 안에 배열이 들어 있는 형태
- 행(가로)과 열(세로)로 이루어져 있음
const arr = [[1,2], [4,5],[7,8] // 3행 2열
];​

 

flat()

배열의 차원을 한 단계 낮춤(2차원->1차원)
const arr = [[1,2,3],[4,5,6],[]7,8,9];
arr.flat(); // [1,2,3,4,5,6,7,8,9]

 

fill()

빈 배열의 값을 채운다.
const empty = Array[5]; //5개 방을 만듦
empty.fill(2);//2로 채움
console.log(empty); //[2,2,2,2,2]

 

Set()

중복 요소 제거하기
const arr = new Set([1,1,2,3,4,4,5]);
consloe.log(arr); //[1,2,3,4,5]

const stc = new Set("hello");
console.log(stc); // {"h","e","l","o"}

요소 전체 삭제하기 clear()
const setntence = new Set("hi");
sentence.clear(); // 요소 완전 삭제

배열로 변환하기(Array.from)
const stcs = new Set([1,2,1,3,3,5]); //중복된 요소 삭제
const arr = Array.from(stcs); /*배열로 변환*/ 
console.log(arr); // [1,2,3,5]

Set 요소 개수 구하기
const a = new Set([1,2,3,4,5,4,2,1]);
const sizes = a.size;  
console.log(sizes); // {1,2,3,4,5}로 5가 출력된다

 

 

 

함수

function a() {}
const b = function() {};
const c = () => {};


return 문
- 함수를 호출하면 항상 결과 값이 나온다.
- 함수의 실행을 중간에 멈춰준다.

const a = () =>{
	for(let i =0; i<10; i++){
    	if(i>=3) return i; // return문 실행
    }
    console.log('return에서 종료'); //실행x
}

 

매개변수와 인수 사용하기

function a(parameter){
	console.log(parameter);
}
a('argument'); //인수 호출


'argument' 문자열은 함수 a()를 선언할 때 소괄호에 넣은 parameter와 연결된다.
즉 parameter는 argument를 값으로 가진다

이때 parameter 같은 변수를 매개변수라고 하며 'argument' 값을 인수라고 한다.


 function a(x,y){
    console.log(x+y);
}
a(1,3);


더하기 함수를 만들어 두면 인수만 바꿔 가면서 더하기 함수를 재사용할 수 있다

 

고차 함수

const func = () =>{
	return () => {
    	console.log('hi');
    }
}

const innerFunc = func(); //호출
innerFunc();

1) func() 함수를 호출하면 함수를 변환하고 변수에 저장된 함수를 다시 호출할 수도 있다.

const fun = (change) => ()=>{  //축약
    console.log(change);
}

const inf = fun('msg');
const inf2 = fun('hh');
inf();
inf2();

호출할 때마다 다른 값으로 바꾸고자 한다면 매개 변수를 사용한다

 

객체 리터럴

객체 리터럴 : 여러 변수를 하나의 변수로 묶을 때 사용한다.
{ //객체의 기본 구성
	<속성 이름>: <속성 값>,
}​
const juyeon = {
    name: '주연',
    age: 18,
    gender: 'girl',
    year: 2007,
    date: 13,
}

console.log(juyeon.name="j"); //객체의 속성 수정
console.log(delete juyeon.age); //객체의 속성 삭제
console.log(juyeon.age); //삭제(undefined)
console.log(juyeon.date); //date속성에 접근
console.log(juyeon.year);

const myObject = {
    name: 'juyeon',
    age: 18,
    greet: function(){
        console.log("my name is "+this.name+", my age is "+ this.age);
    }
}
myObject.greet();

 

매서드


메서드: 객체에 속한 함수를 가리킨다, 객체는 속성과 메소드의 집합이며, 메소드는 객체의 동작을 정의한다.
const debug = {
	log: function(value){ //속성 값이 함수이므로 log는 메서드다
    	console.log(value);
    },
}
debug.log('hi');​

 

중첩된 객체와 옵셔널 체이닝 연산자

const zerocho = {
    name: {
        first: '현명',
        last: '조',
    },
    
    gender: 'm',
}
console.log(zerocho.name?.first); //옵셔널 체이닝 연산자(?.) : 존재하지 않는 속성에 접근할 때 에러 발생을 막아 줌
console.log(zerocho.name.last);
console.log(zerocho.gender);