🌷[230220] 코드스테이츠 부트캠프 D+6

🦄 코드스테이츠 부트캠프 둘 째주 진입했습니다. 오늘부터 JS를 들어가는 군요.. 저는 CSS 레이아웃 배치보다 JS로 코테 푸는게 더 재미있는 것 같아요.. ㅠ 돌려줘 내 디자인 감각 

 

🍀 오늘의 날짜 : 23년 02월 20일 

🍀 오늘의 주제 : JS 기초 

• 변수 선언 및 할당 
• 코테 맛보기 : 자바스크립트 math 객체 / 자바스크립트 string / 자바스크립트 arguments

 

 

---

 

 

🌷햇깔렸던 부분들 + TIP🌷

 

 

 

⭕Node.js의 REPL                  

REPL(Read Evaluate Print Loop)의 약자로 윈도우 커맨드, UNIX, Linux shell 처럼 사용자가 command를 입력하면 시스템이 값을 반환하는 환경을 의미합니다. 제가 작성한 코드가 문법에 맞는지 틀린지 간단하게 실행해 볼 수 있습니다. 

 

➡️[Node.JS]강좌 03편 : REPL터미널 

 

 

 

⭕자바스크립트 math 객체           

코딩테스트 풀다 보면 특히 저 레벨에서는 자주 만날 수 있는 Math.객체입니다. 

 

Math.max() : 제일 큰 값 찾기

Math.min() : 제일 작은 값 찾기

 *  숫자 목록을 인수로 받기 때문에 Math.max(arr) 처럼 그대로 넘기면 오류 발생 하니 주의 

 * 배열 : Math.min.apply(null, arr이름)

➡️ 배열에서 최댓갑 최솟값 반복문으로 구하기

Math.random() : 랜덤 값 배출

Math.round() : 소수점 첫 번째 자리 반올림

Math.floor() : 내림 ( ex. -11.01은 -12 / 10.35 는 10 )

Math.ceil() : 올림

Math.sqrt() : 루트값

Math.pow(a, b) : 밑의 숫자 a , 지수 b 

 

 

⭕자바스크립트 String 메소드         

+ 문자열에 쓸 수 있는 메서드

   * .concat()

   * .c

   * .c

➡️ MDN : String

 

 

 

⭕코딩을 할 때 (코테) 문제를 보고 무작정 푸는 것이 아니라 의사코드 (주석)을 다는 습관을 먼저 들이도록 합시다. 

//입력 : 무엇이 입력되나요 - 문자열 2개 / 알파벳 / 길이가 10개 이하 
// 출력 : 무엇을 어떠한 형태로 출력해야 하나요 - number type의 평균 값
// 기타 - 평균 구하는 방법 ( a + b / 2);
// 사용 예정 방식 : Math.floor();

 

 

 

🌷추가 공부 TIP 🌷

 

 

 

🔖함수의 매개변수에 접근하는 방법 : arguments

함수의 여러개의 매개변수에 arguments 를 통해서 접근할 수가 있습니다. MDN의 설명에 따르면 arguments 객체는 함수에 전달된 인수에 해당하는 Array 형태의 객체 인 것입니다.(매개변수 목록을 배열로 가져오는 ..)  아래 예시는  arguments를 이용해서 매개변수에 들어올 str1, str2, str3 중 가장 큰 값을 출력하는 예제입니다. 

function example(str1, str2, str3){
	let big = arguments[0]; 
    
	for( let i = 0; i<arguments.length ; i++){
    	if( big < arguments[i]){
        	big = arguments[i];
        }
    }
    return big;
}

example( 3, 4, 5)  //  5 출력

 

 

아래 출력 내용을 보시면 arguments각 각 매개변수에 접근하고 있음을 알 수 있습니다. 이를 이용해서 다양한 코테에 적용할 수 있을 것 같은 생각이 듭니다. 

※  화살표 함수는 arguments 객체를 지원하지 않습니다!!!

 

➡️ [MDN] arguments

➡️ [JS] 나머지 매개변수로 여러 개의 인수를 변수로 전달하기

 

 

🔖스프레드 문법(Spread syntax, 전개 문법) [ ... ]

배열 길이를 알 수 없을 때, 수동으로 일일히 나열 할 수 없을 때 사용 됩니다. [ ... ] 을 사용해서 나머지 매개변수와 비슷해 보이지만 스프레드 문법은 나머지 매개변수와는 반대되는 역할을 합니다. 

 

함수 호출 시 [...arr] 사용하면, 이터러블 객체 arr이 인수 목록으로 << 확장 >> 됩니다. 

  * 배열이 인수 목록으로 확장 

  * 배열이 아니라 이터러블 객체이면 스프레드 문법(문자열을 문자 배열로 변환시키기..)을 사용할 수 있음. 

  * 이터러블 (iterable : 반복 가능함)

 

 

🔖나머지 매개변수 [ ... ] 

임이의 정해지지 않은 수의 인수를 받는 방법으로 " 남아있는 매개변수들을 한데 모아 배열에 집어넣어라" 라는 의미입니다. 

 

function showName(firstName, lastName, ...titles){
	console.log(firstName + '' + lastName); //Bora Lee
    
    // 나머지 인수들은 titles 배열의 요소가 됩니다. 
    // titles = ["software engineer", "researcher"]
    console.log(titles[0]); // software engineer
    console.log(titles[1]); // researcher.
}

showName("Bora", "Lee", "software engineer", "researcher");
//앞의 Bora와 Lee 뒤의 인수들이 titles 배열에 속하게 됨!

💡두 개의 차이를 잘 모르겠다는...(23.02.20)

 

➡️ MDN 나머지 매개변수와 스프레드 문법

 

 

 

🔖slice()와 splice()의 차이점 💡완료X

배열을 다룰 때 자주 사용하는 함수로 비슷하지만 큰 차이점이 있습니다. 

[1] Array.prototype.slice ( ) 

.slice( 시작, 끝) < - 시작 부터 끝-1까지 잘라버림 

 

[2] Array.prototype.splice ( )

배열의 기존 요소를 삭제/교체 하거나 새 요소를 추가하여 배열의 내용을 변경  = 원본 배열 자체를 수정

 

 

➡️ slice()와 splice()의 차이점 

 

 

 

 

 

---

🌱 오늘의 생각                                               

🔹

🔹

 

🌱  공부 중 참고 사이트                                   

🔹

🔹

 

🌱 도움이 될 만한 사이트 추천쓰                     

🔹

🔹

🔹

🔹