[S1/U5] JavaScript 기초

👽·2023년 12월 28일
JavaScript코드스테이츠프론트엔드
0

코드스테이츠 프론트엔드

목록 보기
5/27
post-thumbnail

CH1. 코드 기초

📌 코드 실행

🔸 StackBrlitz : JavaScript를 작동할 수 있는 웹사이트
🔸 node 파일명.확장자 : 코드를 구체적으로 열어 확인가능
🔸 node : 작성한 코드에 대해서 간단한 테스트 디버깅을 할 수 있도록 바로 실행결과를 확인 가능 (종료는 .exit)
🔸 REPL(Read-Evaluate-Print loop) : 읽고(read), 평가(evaluate)하고, 출력(print)을 반복(loop)하는 가장 간단한 개발 환경. 내가 작성한 코드가 문법에 맞는지 틀린 지 간단하게 실행해 볼 수 있음.
🔸 프로그램(program) : 작업(task) 수행을 위한 코드 모음.
🔸 프로세스(process) : 프로그램 실행의 결과물.

📌 코드 독해

JavaScript 엔진이 코드 읽는 법

🔸 기계어 : 컴퓨터가 이해할 수 있는 숫자로만 구성된 언어로 0과 1의 조합으로 모든 정보를 표현.
🔸 프로그래밍 언어 : 개발자가 프로그램을 작성하기 위한 언어로 사람이 다룰 수 있는 수준의 문법과 의미를 가짐 (JavaScript, python, C ...).
🔸 JavaScript : 브라우저, 서버, 모바일 개발이 가능한 멀티 패러다임 프로그래밍 언어.

  • 장점
    • HTML/CSS와 완전히 통합할 수 있음
    • 간단한 일은 간단하게 처리할 수 있게 해줌
    • 모든 주요 브라우저에서 지원하고, 기본 언어로 사용됨

🔸 JavaScript 엔진: JavaScript 코드를 실행할 수 있는 프로그램. 크롬에 내장된 v8이 대표적.
🔸 JS는 코드를 위에서 아래로 코드를 읽고, 해석하고, 평가하다가 문제가 있을 시 에러를 발생시키고, 해당 지점에서 코드 실행 바로 중단.

주석(comment)

🔸 JS 엔진이 따로 해석하지 않는 코드로 개발자가 쓰고 싶은 사람의 언어, 자연어를 자유롭게 작성가능.
🔸 자연어 : 인간이 쓰는 언어로 컴퓨터공학에서 프로그래밍 언어와 구분하기 위해 사람의 언어를 자연어로 따로 구분.
🔸 //, /* */이용

값과 표현식

🔸 값 (Value) : 하나의 고유한 의미를 가지는 코드. JS 엔진이 하나의 값으로 읽고 평가할 수 있어야 하며, 그렇지 않으면 에러 발생.
🔸 표현식 (expression) : 값으로 평가될 수 있는 코드.
🔸 연산자 (operator) : 특정 연산을 수행할 수 있는 코드.

📌 코드 출력

🔸 console.log() : 개발자 도구 콘솔이나 터미널에 원하는 값을 출력할 수 있게 돕는 메서드.
🔸 콘솔(console)은 브라우저의 디버깅 콘솔을 의미. 브라우저 안에 내장된 브라우저의 하위 객체이므로 브라우저 객체를 통해 접근 가능

CH2. 타입 (Type)

📌 Number 타입

🔸 숫자를 JS에서 표현하기 위한 데이터 타입. 정수(integer)와 실수(float)를 모두 표현할 수 있음.
🔸 산술 연산자 (arithmetic operator) : 간단한 사칙연산 (+, -, *, /)

Math 내장 객체

🔸 Math.floor(n) : 괄호 안의 숫자를 내림하여 반환.
🔸 Math.ceil(n) : 괄호 안의 숫자를 올림하여 반환.
🔸 Math.round(n) : 괄호 안의 숫자를 반올림하여 반환.
🔸 Math.abs(n) : 괄호 안의 숫자의 절대값을 반환.
🔸 Math.sqrt(n) : 괄호 안의 숫자의 루트값을 반환.
🔸 Math.pow(n, power) : 괄호 안의 첫 번째 숫자(n)를 밑, 두 번째 숫자(power)를 지수인 숫자를 반환.
🔸 Math.trunc(n) : 괄호 안의 숫자의 소수부를 무시.
🔸 Math.random() : 0과 1 사이의 난수를 반환 (1은 제외).
🔸 Math.max() / Math.min() : 괄호 안의 인수 중 최대/최솟값을 반환.

📌 String (문자열) 타입

🔸 자연어를 JavaScript에서 표현하기 위한 데이터 타입. 따옴표, 큰따옴표, 백틱(줄바꿈 가능)을 사용.
🔸 + 로 문자열과 문자열을 이어 붙일 수 있으며(문자열 연결 연산자), 다른 타입과 이어 붙이려고 하면 모두 문자열로 변함. 

"안녕하세요" + "!!"; // 안녕하세요!!
"감사합니다." + " " + "🙏" // 감사합니다. 🙏
1 + "1" // 11

문자열 주요 메서드

🔸 String.length : 문자열의 길이 반환 (띄어쓰기 취급 안함).
🔸 String[숫자] or String.charAt() : 해당 인덱스에 맞는 문자열 반환. 첫 번째 문자의 인덱스는 0 (Zero-based numbering)부터 시작.
🔸 toLowerCase() : 문자열을 소문자로 변경.
🔸 toUpperCase() : 문자열을 대문자로 변경.
🔸 concat() : 문자열 연결 연산자 +처럼 문자열을 이어 붙일 수 있음.
🔸 slice() : 문자열의 일부를 자를 수 있음.
🔸 indexOf() : 문자열 내에 특정 문자가 몇 번째 위치하는지 확인 (공백포함). 만약 찾는 문자가 2개 이상일 경우, 가장 앞에 있는 문자의 인덱스를 조회. 포함되어 있지 않으면 -1을 반환.

'🍎🍓🍉🍇'.indexOf('🍎'); // 0
'🍎🍓🍉🍇'.indexOf('🖥'); // -1
'최초의 JavaScript는 Netscape의 Brendan Eich에 의해 만들었다.'.indexOf('Eich'); // 34
'최초의 JavaScript는 Netscape의 Brendan Eich에 의해 만들었다.'.indexOf('Dahl'); // -1

🔸 includes() : 문자열 내에 특정 문자가 포함되어 있는지 확인. 불리언 값 반환.

'🍎🍓🍉🍇'.includes('🍎'); // true
'🍎🍓🍉🍇'.includes('🖥'); // false
'최초의 JavaScript는 Netscape의 Brendan Eich에 의해 만들었다.'.includes('Eich'); // true
'최초의 JavaScript는 Netscape의 Brendan Eich에 의해 만들었다.'.includes('Dahl'); // false

📌 Boolean 타입

🔸 사실 관계를 구분하기 위한 타입. true 혹은 false 둘 중 하나.

falsy

🔸 불리언 타입은 아니지만, JS에서 false로 "여겨지는" 값.
🔸 반대로 true로 "여겨지는" 값은 truthy 값이라고 한다. (truthy 값은 매우 많아, falsy 값을 암기하면 됨)

// 대표적인 falsy 값
false
0
-0
0n
""
''
``
null
undefined
NaN

비교연산자(comparison operator)

🔸 두 값이 같은지 다른지를 확인할 때 유용함

🔸 ===, !== : 엄격한 동치 연산자

  • 두 피연산자의 값과 타입이 같으면 true, 다르면 false를 반환. 엄격한 동치 연산자는 보이는 값이 같아도, 두 값의 타입이 다르면 false.
123 === (100 + 23); // true ("123의 값과 100 + 23의 값은 같다."는 사실이기 때문에 true)
123 === '123'; // false ("123의 값과 '123'의 값은 같다."는 사실이 아니기 때문에 false)
123 !== (100 + 23); // false ("123의 값과 100 + 23의 값은 같지 않다."는 사실이기 아니기 때문에 false)
123 !== '123'; // true ("123의 값과 '123'의 값은 같지 않다."는 사실이기 때문에 true)

🔸 ==, != : 느슨한 동치 연산자

  • 느슨한 동치 연산자는 “대체로” 타입이 달라도 값이 같으면 true, 다르면 false를 반환.
  • “느슨하게” 동치 여부를 판단하기 때문에 예외가 많아 현대 웹 개발에서는 사용을 권장하지 않음.
  • 다른 프로그래밍 언어에서는 ==, !=를 주로 사용하는데, JavaScript에서는 ===, !== 로 비교해야 함.
12 == '12' // true

🔸 > , < , >= , <= : 대소 관계 비교 연산자

  • 두 피연산자의 값의 크기를 비교.
100 > 200; // false ("100은 200보다 크다."는 거짓)
200 > 100; // true ("200은 100보다 크다."는 참) 
100 >= 100; // true ("100은 100보다 크거나 같다."는 참)
200 <= 100; // false ("200은 100보다 작거나 같다."는 거짓)

논리연산자(logical operator)

🔸 두 값의 논리 관계를 확인 가능

🔸 || : 논리합(OR). 두 값 중 하나만 true여도 true로 판단, 모두 false면 false로 판단

true || false; // true
false || true; // true
100 > 200 || 200 > 100; // true ("100은 200보다 크다" 혹은 "200은 100보다 크다" 중 하나는 true)
false || false // false
200 < 100 || 20 < 10; // false

🔸 && : 논리곱(AND). 두 값이 모두 true면 true로 판단, 두 값 중 하나만 false여도 false로 판단

true && true // true
200 > 100 && 20 > 10; // true
true && false // false
false && true // false
100 > 200 && 200 > 100; // false

논리 부정 연산자 (!)

🔸 사실 관계를 반대로 표현.

🔸 ! : 부정(NOT). 오른쪽 피연산자와 반대의 사실을 반환, falsy, truthy의 반대 값을 반환합니다.

!true // false
!(100 > 200) // true
!0 // true
!'' // true
!1 // false
!'코드스테이츠' // false

CH3. 변수

📌변수 선언과 값 할당

🔸 변수 선언 : 특정 데이터를 컴퓨터가 기억할 수 있도록 메모리 공간을 확보하고 그 메모리 공간에 이름을 부여하는 것.
🔸 변수 선언 키워드 : let, const, var
🔸 값 할당 : 할당연산자(=)를 사용하여 메모리 공간에 특정한 값을 넣는 것.

let num; // 변수 선언
num = 5; // 값 할당
let num = 5; // 변수 선언과 값 할당을 동시에 진행

🔸 변수에는 JavaScript에서 사용이 가능한 모든 타입의 값을 할당가능. 

let string = '원주율';
let number = 3.141592;
let boolean = true;
let array = [1, 'two', false];
let object = {name: 'kimcoding', age: 25, course: 'SEB FE'};
let empty = null;
let notDefined = undefined;

🔸 아무것도 할당하지 않은 변수는 undefined가 자동으로 할당. 이는 초기화라는 JS의 특징.

let variable;
console.log(variable) 
// undefined

🔸 존재하지 않는(nothing) 값, 비어있는(empty) 값은 null이 자동으로 할당. 

let variable;
console.log(variable) 
// undefined

🔸 let 키워드로 선언한 변수에 새로운 값을 할당하는 것을 값의 재할당이라 부르며, 할당연산자(=)를 사용.

let name = 'kimcoding';
console.log(name) // 'kimcoding'
name = 'parkhacker';
console.log(name) // 'parkhacker'

🔸 let 키워드가 아닌 const 키워드를 사용하면 재할당이 금지됨.

const name = 'kimcoding';
console.log(name) // 'kimcoding'
name = 'parkhacker'; // Uncaught TypeError: Assignment to constant variable.

🔸 var 키워드 : let키워드와 const키워드가 등장하기 이전에 사용되던 변수 선언 키워드로, var키워드의 여러 단점으로 인해 이를 보완하기 위해 let키워드와 const키워드가 등장 (var키워드는 사용을 되도록 지양).

변수명 네이밍 규칙

🔸 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러 기호($)를 포함할 수 있지만, 숫자로 시작할 수 없음.
🔸 예약어는 식별자로 사용할 수 없음. (예약어: 프로그래밍 언어에서 사용되고 있거나 사용될 예정인 단어를 말한다 ex) let, const, true, false, typeof 등)
🔸 그 외 규칙들 - 변수명은 변수의 존재 목적을 이해할 수 있도록 의미를 명확히 표현해야 함.

네이밍 컨벤션

🔸 하나 이상의 영어단어를 사용하여 식별자를 만들 경우 네이밍 컨벤션을 잘 지키면 가독성을 높일 수 있음.
🔸 JavaScript에서는 일반적으로 카멜 케이스(camelCase)를 사용

  • 카멜 케이스(camelCase) : 첫 단어의 첫 문자는 소문자로, 그 이후에 연결되는 단어의 첫 문자는 대문자로 작성.
  • 스네이크 케이스(snakecase) : 단어와 단어 사이에 언더스코어(``)를 사용.
  • 파스칼 케이스(PascalCase) : 단어의 시작을 대문자로 작성.

📌 변수 활용하기

변수를 활용한 연산

🔸 변수에 숫자 타입의 값이 할당되어 있는 경우 숫자 타입에 사용 가능한 모든 연산이 가능하지만, 각각의 연산은 독립적으로 이루어지므로 변수에 할당된 값은 변하지 않음.
🔸 따라서 재할당이 필요.

템플릿 리터럴(template literal)

🔸 백틱을 사용하는 방법으로, 문자열 내부에 변수 삽입할 수 있음.
🔸 템플릿 리터럴 내부에 ${}를 사용하여 변수 삽입. 이때, 문자열이 할당되지 않은 변수도 문자열로 취급됨.
🔸 단어와 단어 사이에 공백을 삽입하기 위해 ‘ ‘를 사용하는 것보다 템플릿 리터럴을 사용하는 것이 가독성 측면에서 우수.

console.log(`${course} ${cohort} ${name}`); // 'SEB FE 99 kimcoding'
console.log(course + ' ' + cohort + ' ' + name); // 'SEB FE 99 kimcoding'

CH4. 조건문

📌if문

🔸 if 뒤 소괄호(())에 조건식의 참(true)/거짓(false) 여부에 따라 실행이 결정되며, 참으로 평가된 경우 코드블록 내부의 코드가 실행됨.

if (true) {
	console.log('hello world');
}

동치연산자(===)

🔸 두 피연산자가 동일하면 true, 그렇지 않으면 false를 반환. !==는 반대로 두 피연산잔가 동일하지 않으면 true, 동일하면 false를 반환.

let name = 'kimcoding';
if (name === 'kimcoding') {
	console.log('중복된 이름입니다.'); // '중복된 이름입니다.'
}
let name = 'parkhacker';
if (name !== 'kimcoding') {
	console.log('가입할 수 있는 이름입니다.'); // '가입할 수 있는 이름입니다.'
}

비교연산자 (>, <, >=, <=)

🔸 두 피연산자의 값의 크기를 비교.

let num = 5;
if (num < 10) {
	num = num + 1;
}
console.log(num); // 6

if (num > 5) {
	num = num - 1;
}
console.log(num); // 5

논리연산자 (&&, ||)

🔸 논리합(||)과 논리곱(&&)을 사용하면 복수의 조건을 작성할 수 있음.

let age = 15;
if (age > 13 && age <= 19) {
	console.log('청소년입니다.'); // '청소년입니다.'
}

부정연산자 (!)

🔸 조건을 부정, 조건이 true면 false, 조건이 false면 true를 리턴.

let num = 11;
if (!(num === 10)) {
	console.log('변수 num은 10이 아닙니다.'); // '변수 num은 10이 아닙니다.'
}

📌 else문

🔸 if문 바로 뒤에 작성하여, 조건식이 true일 때만 코드가 실행되는 if문과는 다르게, false일 때 실행되는 코드.

let num = 5;
if (num % 2 === 0) {
	console.log('짝수입니다.');
} else {
	console.log('홀수입니다.'); // '홀수입니다.'
}

🔸 조건을 더 추가하고 싶을 경우 else if문을 사용 (if문과 else문은 두 번 이상 사용할 수 없기 때문에 else if문을 여러 번 사용).

let age = 15;
if (age < 8) {
  console.log('미취학아동입니다.');
} else if (age >= 8 && age < 14) {
  console.log('초등학생입니다.');
} else if (age >= 14 && age < 17) {
  console.log('중학생입니다.'); // '중학생입니다.'
} else if (age >= 17 && age < 20) {
  console.log('고등학생입니다.');
} else {
  console.log('성인입니다.');
}

삼항 조건 연산자

🔸 조건식을 먼저 작성한 후, ?를 입력. ? 뒤로 참/거짓일 때 실행할 코드를 각각 작성하며 그 참/거짓 코드는 :로 구분.

let num = 5;
num % 2 === 0 ? console.log('짝수') : console.log('홀수'); // '홀수'

CH5. 반복문

🔸 비슷하거나 동일한 구문을 반복해서 수행할 수 있는 구문으로 불필요한 코드를 반복적으로 사용하지 않고 간결하게 코드를 작성할 수 있음.

📌 for문

🔸 구문 작성시 반복을 위해 필요한 세 가지 요소를 한 곳에 모아 작성함으로써 보다 명시적으로 반복 횟수를 표현할 수 있는 직관적인 구문.

for(초기값; 조건식; 증감식) {
//조건이 true인 경우 반복 수행할 코드
} 초기값 -> 조건식 -> 코드 -> 증감식 -> 조건식 -> 코드 -> 증감식 -> ``` -> 조건식 false (종료)

🔸 초기값 : 증감식 반복 횟수를 카운트하는 역할을 하는 변수. (이때 변수는 정수를 의미하는 ‘integer’의 약자인 i를 주로 사용) 초기값은 반복문의 코드블록 내부에서만 유효.
🔸 조건식 : 코드블록 내부의 코드를 실행 여부를 결정한다. true일 경우에는 코드를 실행하며, false일 경우 반복문이 종료된다.
🔸 증감식: 코드블록 내부의 코드를 실행한 후 초기값으로 선언된 변수를 증가 또는 감소시키기 위한 표현식.

📌 반복문 활용하기

let num = 3;
if (num >= 2 && num <= 9) {
	console.log(num * 1); // 3
	console.log(num * 2); // 6
	console.log(num * 3); // 9
	console.log(num * 4); // 12
	console.log(num * 5); // 15
	console.log(num * 6); // 18
	console.log(num * 7); // 21
	console.log(num * 8); // 24
	console.log(num * 9); // 27
} else {
	console.log('2와 9사이의 수를 입력하세요.');
}
// 구구단을 for문을 통해 간결하게 만들기
let num = 3;
if (num >=2 && num <=9) {
  for (let i = 1; i <= 9; i++) {
     console.log(num * i);
     }
} else {
   console.log('2와 9사이의 수를 입력하세요.')
}

문자열과 반복문

🔸 indexOf('문자') : 특정 문자의 인덱스를 확인하는 메서드. 반환값은 문자의 인덱스 숫자. 찾는 문자가 2개 이상일 경우 가장 앞에 있는 문자의 인덱스를 조회.
🔸 문자열을 담은 변수 뒤에 [숫자]를 입력하면 숫자에 해당하는 인덱스의 문자를 반환.
🔸 .length : 문자열 길이 조회.

문자열의 첫 번째 문자부터 마지막 문자까지 모두 출력하는 코드 구현

let str = 'codestates';
for (let i = 0; i <= 9; i++) {
	console.log(str[i]);
}
// 문자열의 길이를 모를경우 조건식을 i < str.length로 작성.

📌 반복문의 중첩

🔸 반복문은 중첩이 가능하여 반복문 내부에 또 다른 반복문을 사용할 수 있음.
🔸 2개의 반복문이 중첩된 경우 이중반복문, 3개의 반복문이 중첩된 경우 삼중반복문.

for (let i = 1; i <= 6; i++) {
	for (let j = 1; j <;= 6; j++) {
		console.log(`첫번째 주사위는 ${i}, 두번째 주사위는 ${j}입니다.`);
	}
}
  1. 외부 반복문의 초기화와 조건식 평가가 이루어진 후, 내부 반복문이 실행.
  2. 내부 반복문 또한 초기화와 조건식 평가가 이루어진 후 내부에 있는 코드가 실행되고, 증감식, 조건식 평가가 반복됨.
  3. 내부 반복문의 조건식 평가가 false가 되면, 내부 반복문은 종료.
  4. 외부 반복문의 증감식과 조건식 평가. 이때 조건식 평가가 true면, 다시 내부 반복문을 순환.
  5. 외부 반복문의 조건식이 false가 되면 모든 반복문이 종료.

📌 While문

🔸 조건식만 입력한 후, 조건식의 평가결과가 true인 경우 코드블록 내부의 코드를 반복하여 실행.

let num = 0;

while (num < 3) {
	console.log(num); // 0 1 2
	num++
}

💡 while문은 반복문이 종료되는 조건식이 항상 참으로 평가되어 무한히 반복되는 무한루프 현상이 있으므로 주의.

do...while문

🔸 while 뒤에 오는 조건식이 true로 평가되는 동안 do 뒤에 오는 코드블럭 내부의 코드를 반복하여 실행. 단, 이 경우 do의 코드블록 내부의 코드가 최소 한 번은 실행됨.

do {
	console.log('코드블록 내부의 코드는 최소 한 번은 실행됩니다.') 
	// '코드블록 내부의 코드는 최소 한 번은 실행됩니다.'
} while (false)

for문 vs. while문

🔸 두 반복문의 용도는 명확하게 구분되지 않으나 주로 사용하는 상황이 있음.

  • for문을 사용하는 경우
    • 반복 횟수가 비교적 명확할 때
    • 배열, 문자열 내부를 순회할 때
    • 반복문의 중첩이 필요할 때
  • while문을 사용하는 경우
    • 반복 횟수가 명확하지 않을 때

CH6. 함수

📌 함수 정의

🔸 함수 : 입력을 받아서 코드블록 내부의 코드를 실행한 후 함수의 실행결과를 반환하는 일련의 과정의 묶음.
🔸 함수는 호출되었을 때만 코드블록 내부의 코드가 실행됨. 즉, 함수 호출이란 함수를 실행시키는 명령을 전달하는 것과 같음.
🔸 지정한 함수명 뒤에 소괄호(())를 붙이면 함수를 호출할 수 있음.

함수명() //코드실행

🔸 함수를 정의하는 방법은 여러 가지 그중 가장 대표적인 함수 정의 방법은 함수선언문과 함수표현식이 있음.

함수선언문

🔸 함수 선언 키워드인 function으로 함수를 '선언'

function 함수명(매개변수) {
  // 함수의 기능을 표현한 구문
}

함수표현식

🔸 변수에 함수를 할당하여 함수를 '표현'

let 함수명 = function (매개변수) {
  // 함수의 기능을 표현한 구문
}

🔸 함수선언문과는 달리 함수에는 특별한 식별자를 지정할 필요가 없음. JS에서는 이처럼 함수를 변수에 할당하는 것이 가능.

📌 매개변수와 전달인자

🔸 매개변수(parameter) : 함수를 정의할 때 선언하고, 함수 코드 블록 안에서 변수처럼 취급됨. 🔸 소괄호(())에 매개변수를 추가할 수 있음. 

function greeting (name) {
	console.log('hello ' + name);
}

🔸 greeting이라는 이름의 함수가 name이라는 매개변수를 가지고 있음. 현재는 아무것도 할당되어 있지 않으므로, 매개변수 name은 undefined로 초기화되어 있음. 이 매개변수 name에 값을 할당하기 위해 전달인자(argument)를 사용한다.

function greeting (name) {
	console.log('hello ' + name);
}

greeting('kimcoding'); // 'hello kimcoding'

🔸 전달인자(argument) : 함수를 호출할 때 소괄호 안에 값을 넣음으로써 매개변수에 값을 할당할 수 있음.
🔸 즉, 매개변수와 전달인자를 활용하면 함수 외부에서 함수 내부로 값을 전달할 수 있음.

🔸 매개변수를 여러 개 사용할 경우 매개변수의 개수에 맞게 전달인자를 전달하면 매개변수에 차례대로 전달됨.

function greeting (user1, user2) {
	console.log('hello ' + user1);
	console.log('hello ' + user2);
};

greeting('kimcoding', 'parkhacker');
// 'hello kimcoding', 'hello parkhacker'

🔸 매개변수의 수보다 적은 전달인자가 전달되면 아무것도 전달되지 않은 매개변수는 undefiend로 초기화. 아무것도 할당하지 않은 변수가 undefined로 초기화되어 있는 것과 같음.

function getUserName (user1, user2) {
	console.log(user1);
	console.log(user2);
};

getUserName('kimcoding'); 
// 'kimcoding' undefined

🔸 매개변수보다 많은 전달인자가 전달되면

🔸 매개변수는 함수 내부에서만 사용 가능. 함수 내부에서 선언한 변수도 함수 내부에서만 사용 가능. 

function getUser (number) {
	let userName = 'kimcoding';
};

console.log(number); // Uncaught ReferenceError: number is not defined
console.log(userName); // Uncaught ReferenceError: userName is not defined

🔸 매개변수와 함수 내부에서 선언한 변수는 자신이 선언된 위치에 따라 유효범위가 결정됨. 변수가 유효한 범위를 스코프라고 부름.

📌 return문

🔸 함수의 실행결과를 외부로 반환하는 방법으로, 반환이란 함수 외부에서 함수의 결과값을 사용할 수 있도록 하는 것.
🔸 return은 '반환한다'라는 의미를 지님.

function add (x, y) {
	return x + y; // 반환문
}

return문의 역할

🔸 return문 뒤에 나오는 코드는 실행되지 않음. 함수 내부의 코드가 차례대로 실행되다가 return문을 만나면 값을 반환한 후 함수는 종료. 

function add (x, y) {
	return x + y; // 반환문
	console.log('실행되지 않습니다');
}

🔸 return문에 작성된 코드를 실행한 후 결과를 함수 외부로 리턴. 함수 외부에서 함수를 호출하면 함수의 실행결과를 확인할 수 있음.

 function add (x, y) {
    return x + y; // 반환문
 }

 console.log(add(3, 2)); // 5

🔸 함수 호출의 결과를 변수에 할당하는 것도 가능.

function add (x, y) {
	return x + y; // 반환문
}

let result = add(3, 2);
console.log(result); // 5

🔸 함수의 호출 결과끼리의 연산도 가능

function add (x, y) {
	return x + y; // 반환문
}

let result = add(3, 2) + add(5, 7);
console.log(result); // 17

추가 공부

변수의 선언 방식

// let i=1 과 i =1
function multiplication(n) {
  for (i = 1; i <= 9; i++) {
    console.log(n * i);
  }
} 

function multiplication (n) {
	for(let i = 1; i <= 9; i++) {
		console.log(n * i);
	}
}
  • 첫 번째 함수에서 변수 i는 선언되지 않은 전역 변수. 이는 함수 내부와 외부에서 모두 접근 가능하여 다른 함수에서 동일한 이름의 변수를 사용할 경우 충돌이 발생.
  • i 변수가 선언되지 않은 경우, 해당 변수는 자동으로 전역 변수로 선언되므로 의도하지 않은 동작이 발생할 가능성이 있음.
  • 두번째 함수에서 i는 let키워드로 선언됨. let을 사용하면 해당변수는 블록스코프를 갖게되어 함수 외부에서는 접급을 할 수 없음.
  • 또한 let을 사용하면 변수가 선언되지 않은 경우 에러가 발생하므로 코드의 안정성이 높아짐.

연산자 우선 순위

증감 연산자

  • a += 3은 a = a + 3과 같은 의미로 왼쪽 항에 오른쪽 항을 더한 값을 왼쪽 항에 할당하는 역할이다.
  • 전위(prefix; ++n) : 먼저 증감 후에 해당 문장 실행
  • 후위(postfix; n++) : 해당 문장을 실행하고 증감
profile
👽
코린이👽
이전 포스트

[S1U4] HTML/CSS 활용

다음 포스트

[S1U7] Linux/Git 기초

0개의 댓글